Comfy-Store - React E-Commerce Front-end App

👉 Live Demo: Comfy Store

Demo Credentials

• Email: john25@gmail.com
• Password: 123456Aa@

About the project

A React backed fully functional e-coomerce front end integrated with Stripe Payment API and Auth0 for authentication

Build with:

» React JS
» Auth0
» Stripe Payment

Screenshots of the Project 📸

• Home
• About
• Product Listing
• Product
• Cart
• Checkout

Home Page 🏡

---

About Page 🏡

---

Product Listing Page 🏡

---

Product Page 🏡

---

Cart Page 🏡

---

Checkout Page 🏡

Getting Started with Comfy-Store

To get started with Comfy-Store and explore its rich features and functionality, follow these steps:

1. Access the Application

Visit the Comfy-Store website to access the application.

2. Registration/Login

• If you're a new user, click on the "Login/Register" button at the top-right corner of the page to create a new account.
• Enter your email and password to register, or use the provided demo login details:
  • Email: john25@gmail.com
  • Password: 123456Aa@

3. Explore the Pages

• Navigate through the different pages of the application using the navigation tabs:
  • Home: Explore featured products and subscribe to the newsletter.
  • About: Learn more about the company behind Comfy-Store.
  • Products: Browse through the extensive list of available products and use advanced filtering and sorting options to find what you need.
  • Checkout: Proceed to checkout and complete your purchase securely.

4. Interact with Products

• Click on product images or names to view detailed product information, including images, descriptions, pricing, and availability.
• Choose product variants, adjust quantities, and add products to your cart directly from the product page.

5. Manage Your Cart

• Access your shopping cart to view all items added during your browsing session.
• Adjust quantities, remove items, or clear the entire cart with ease.

6. Secure Checkout

• Once you're ready to complete your purchase, proceed to the checkout page.
• Enter your payment details securely to finalize the transaction.

7. Logout

• After completing your shopping session, logout from your account to ensure the security of your personal information.

Features

E-Commerce Functionality

• Comfy-Store offers a full-blown e-commerce website experience, providing users with essential features such as product browsing, cart management, and checkout functionality.

Next.js Serverless Backend

• The application utilizes Next.js serverless functions for backend functionality, ensuring efficient and scalable server-side processing for enhanced performance.

Pages and Navigation

• Comfy-Store consists of four main page tabs: Home, About, Products, and Checkout, each offering unique content and functionality to users.
• The Home page features a cart and login button for quick access, as well as featured products and a newsletter subscription option.
• Users can navigate to the Products page to browse the available product listings and access advanced filtering and sorting options.

Product Listings

• The Products page provides users with a comprehensive listing of available products, with features including sorting by price, filtering by category, company, color, price range, and free shipping option.
• Users can easily switch between different listing views (cards and list) and utilize the search functionality to find specific products.

Product Details

• Upon clicking on a product, users are directed to the product page, where they can view multiple product images, product description, pricing details, brand information, and availability.
• Users can choose product variants, adjust quantities, and add products to their cart directly from the product page.

Cart Management

• The Cart page displays all items added to the cart, allowing users to adjust quantities, remove items, and view real-time total billing information.
• Users can easily clear the cart with a single click, streamlining the shopping experience.

Secure Checkout

• The Checkout page enables users to proceed to payment, where they can securely enter their payment details and complete the transaction.

Authentication and Persistence

• Comfy-Store integrates Auth0 services for secure user authentication, ensuring the safety of user accounts and personal information.
• User cart data is persisted locally, allowing users to maintain their shopping cart across sessions.

Deployment

• The application is deployed on Netlify using Git, with Netlify serverless functions utilized to optimize server-side functionality.

Role:

#I was the sole developer on this project, responsible for designing and implementing the front-end architecture, as well as integrating it with a mock API using Axios.

Technologies Used

Comfy-Store is built using the following technologies and tools:

• React.js
• Styled Components
• React Context API
• React Router 6
• Auth0 for authentication
• Stripe API for payment processing
• Netlify for deployment

Contributors

This project was developed by Shivam Gupta as a demonstration of front-end development skills.

License

This project is licensed under the MIT License.