/react-ecommerce

E-Commerce web-application built with React, Tailwind CSS, JSON Server, JWTAuth, Context API and deployed on Netlify/Render

Primary LanguageJavaScript

E-Commerce Web Application

This is an E-Commerce web application built with React, Tailwind CSS, JSON Server, JWTAuth, and Context API. The application allows users to create an account using their name, email, and password, browse and order products, view their order summary, and access a user dashboard.

#Live Demo

Check out the live demo of the application on Netlify: [Live Demo](https://frontedgyaanshop.netlify.app/)

image image image

#Features

  • User Registration: Users can create an account with their name, email, and password.
  • Product Catalog: Browse and view available products with detailed information.
  • Shopping Cart: Add products to the cart and manage quantities before placing the order.
  • Order Placement: Place orders with selected products.
  • Order Summary: View a summary of placed orders with order details.
  • User Dashboard: Access a personalized dashboard with order history and account information.

image image image image image

#Technologies Used

  • React: A JavaScript library for building user interfaces.
  • Tailwind CSS: A utility-first CSS framework for rapid UI development.
  • JSON Server: A simple and lightweight JSON-based database for development and prototyping.
  • JWTAuth: JSON Web Tokens for user authentication and authorization.
  • Context API: A state management system for managing global application states.

#Installation

  • Clone the repository: git clone https://github.com/saksham-raghuvanshi/react-ecommerce
  • Navigate to the project directory: cd react-ecommerce
  • Install dependencies: npm install
  • Start the development server: npm start
  • Start the Backend Server: json-server data/db.json -m ./node_modules/json-server-auth -r data/routes.json --port 8000

#Usage

  • Open your browser and go to: http://localhost:3000 to access the application.
  • Sign up for a new account using your name, email, and password.
  • Browse the product catalog, add items to the cart, and adjust quantities.
  • Proceed to checkout to place an order.
  • View your order summary and order history in the user dashboard.

    • #Contributing

    Contributions are welcome! If you find any issues or want to improve the application, feel free to create a pull request.

    #Credit

    Saksham Raghuvanshi