Jippie E-Commerce

Summary

This e-commerce website allows users to browse and purchase products such as keychains, stickers, and pins. The app provides a seamless shopping experience with a responsive user interface, secure payment integration, and efficient product management.

Key Features

• Product Catalog:
  Showcase a variety of products with detailed descriptions, images, and pricing.
• Shopping Cart:
  Enable users to add products to their cart, review items, and proceed to checkout.
• Checkout Process:
  Provide a streamlined checkout process with options for payment and shipping.
• Admin Dashboard:
  Provide an admin dashboard for merchant owner to manage products, orders, inventory, and user accounts.
• Responsive Design:
  Ensure the website is optimized for various devices and screen sizes for a seamless user experience.
• Performance Optimization:
  Optimize website performance for fast loading times and smooth navigation.

Deployed URL

You can access the deployed URL at Jippie E-Commerce.

Access Merchant Page

You can access the Merchant page at Merchant Page.

• I removed the merchant button just recently.
• Don't delete my products using this link haha. Please haha.
• This removal is to prevent people deleting the products away from the deployed url.
• After learning how to do login authentication console for merchant page, it will be added back.

Website Screenshots

Landing Page	Store Page	Merchant Page
Product Page (Categorized)	Contact Page	FAQ Page

Snipcart Function

Add to Cart	Checkout
Payment

Create, Edit, Delete Product for Merchant Owner

Add Product	Edit Product
Delete Product

Check it out!

Deployed URL

You can access the deployed URL at Jippie E-Commerce..

Public Board Planning

For detailed planning and task tracking, refer to the public planning board on Trello Board.

Website Development Diagram

Refer to the diagram on draw.io.

Wireframe Sketches

Wireframe Sketches #1	Wireframe Sketches #2
Wireframe Sketches #3

Technologies Used

Front-End

• React
  • React Router
  • React Icons
  • React Intersection Observer
• Chakra UI
• Tailwind CSS
• Snipcart API

Back-End

• Airtable API:
  For product database management
• Cloudinary API:
  For image cloud management

Tools and Dependencies

• Ngrok
• Crypto.js
• dotenv
• Vite

Next Steps

Planned Future Enhancements

• Website Responsiveness & Compatibility:
  Implement responsive design and ensure compatibility across all device sizes.
• User Authentication:
  Implement user authentication and authorization for a more personalized shopping experience.
• Order History:
  Allow users to view their past orders and track their delivery status.
• Product Reviews:
  Enable users to leave reviews and ratings for products.
• Wishlist:
  Add a wishlist feature for users to save products they are interested in.
• Admin Dashboard:
  Develop an admin dashboard for better management of products, orders, and users.
• Snipcart Price Validation:
  Host and return JSON file for price authentication with Snipcart

For more details and updates, stay tuned to the repository and the project board.