https://github.com/ranganivandan/shopper-s.in

Shopper's.In is a comprehensive e-commerce platform designed to provide a seamless and enjoyable shopping experience for users. The platform features a wide array of products and incorporates several key functionalities to enhance user experience, including user authentication, product search, shopping cart management, and order placement.
https://github.com/ranganivandan/shopper-s.in

css firebase html js json reactjs

Last synced: about 15 hours ago
JSON representation

Shopper's.In is a comprehensive e-commerce platform designed to provide a seamless and enjoyable shopping experience for users. The platform features a wide array of products and incorporates several key functionalities to enhance user experience, including user authentication, product search, shopping cart management, and order placement.

• Host: GitHub
• URL: https://github.com/ranganivandan/shopper-s.in
• Owner: Ranganivandan
• Created: 2024-07-17T10:06:20.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-24T04:58:52.000Z (3 months ago)
• Last Synced: 2024-07-24T06:12:40.359Z (3 months ago)
• Topics: css, firebase, html, js, json, reactjs
• Language: JavaScript
• Homepage:
• Size: 34.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


https://github.com/user-attachments/assets/c13c004d-8694-4c9b-a20e-617d96ac336d

Shopper's.In is a comprehensive e-commerce platform designed to provide a seamless and enjoyable shopping experience for users. The platform features a wide array of products and incorporates several key functionalities to enhance user experience, including user authentication, product search, shopping cart management, and order placement. Below is a detailed description of the various components and features of Shopper's.In:

Components:

Navbar:


Contains the site's logo and name for easy brand recognition.

Features a search bar for users to search products on the platform.

Displays user authentication links (Signup, Login) or the logged-in user's email and a signout option.

Provides quick access to the shopping cart.

 Home:


The landing page for the platform, showcasing popular products and categories.

Includes navigation links to various sections such as Mens, Collection, and more.

Signup:


Allows new users to create an account on the platform.

Collects necessary user information like email, password, etc.

Login:


Enables existing users to log into their accounts.

Uses Firebase authentication for secure login management.

Product Listing (Mens, Collection, etc.):


Displays a list of products available in different categories.

Each product item includes a name, image, price, and an "Add to Cart" button.

Product Details (Mens1):


Shows detailed information about a selected product.

Allows users to add the product to their cart.

Shopping Cart:


Displays products added to the cart.

Provides options to adjust quantities, remove items, and proceed to checkout.

Order Placement (Order):


Collects user details such as name, mobile number, address, and email.

Integrates with Firebase Firestore to store order details.

Verifies user login status before allowing order placement.

404 Page:


A fallback page that is displayed when users navigate to a non-existent route on the site.

Features:

User Authentication:



  
Secure user authentication using Firebase.

  
Signup and login functionalities.

Context-based user session management.



Product Search:


Integrated search bar for users to find products quickly.

Cart Management:


Add products to the cart from product listing and detail pages.

View, update, and remove items from the cart.

Persistent cart state across sessions.

Order Management:


Collect user details for order delivery.

Store order details in Firebase Firestore.

Redirect users to the login page if not authenticated before placing an order.

Responsive Design:


User-friendly interface with responsive design elements to ensure compatibility across different devices.

Technologies Used:



  
React: For building the user interface.

  
React Router: For managing navigation and routing.

  
Firebase Authentication: For user authentication and session management.

  
Firebase Firestore: For storing user orders and other data.

  
CSS: For styling the components and ensuring a cohesive design.




Example Usage:

Visiting the Site:

Users land on the homepage, browse through various products, and use the search bar to find specific items.

Authentication:


New users can sign up, while existing users can log in to access personalized features.

Shopping:


Users add desired products to their cart, adjust quantities, and proceed to checkout.

Placing an Order:


Users fill in their delivery details and place their order. The order is stored in Firebase Firestore, and the user is redirected to the homepage with a confirmation.

This detailed description covers the primary components and functionality of your e-commerce platform, providing a clear overview of what Shopper's.In offers to its users.