Live Project Link : https://shopkart.akshaydhayal.xyz/
Welcome to our Shopping Ecommerce Project! This application is designed to provide users with a seamless shopping experience, allowing them to browse a wide range of products, add items to their cart, and proceed with checkout. Key features of this project include:
-
Product Catalog:
- Users can explore a diverse selection of products across various categories.
- Each product is accompanied by detailed information such as name, price, and description.
- Advanced filtering options enable users to refine their product search based on criteria such as price range, category, and ratings.
-
Shopping Cart:
- Customers can add products to their shopping cart for later purchase.
- The cart dynamically updates to display the total number of items and the total price.
-
Checkout:
- Once users have added desired items to their shopping cart, they can proceed to the checkout process.
- The checkout process involves reviewing the selected items, providing any promo code if available and then confirming the purchase.
-
Progressive Web App (PWA) and Responsive Design:
- The application is built as a Progressive Web App, providing an app-like experience with offline capabilities.
- The site is fully responsive, ensuring a smooth and intuitive experience on all devices, including desktops, tablets, and mobile phones.
Project.Demo.mov
-
src/components/Navbar.js: Component responsible for rendering the navigation bar at the top of the application, providing links for easy navigation between different sections. It includes the following features:
- Search Bar: Allows users to search for specific products within the catalog.
- Cart Icon: Displays the number of items currently in the shopping cart.
-
src/components/Filters.js: Component handling the filtering functionality, allowing users to refine their product search based on criteria such as price range, category, and ratings.
-
src/components/Products.js: Component responsible for fetching and displaying the product catalog, including filtered results based on user input.
-
src/components/Product.js: Component representing individual product items within the product catalog, displaying details such as name, price, description, and an option to add the item to the shopping cart.
- React: Frontend library for building interactive user interfaces.
- Recoil: State management library for managing global application state.
- React Router: Routing library for navigating between different pages within the application.
- Tailwind CSS: Utility-first CSS framework for styling user interfaces.
- Clone the repository to your local machine.
- Install dependencies using
npm install
. - Start the development server with
npm run dev
. - Access the application in your web browser and begin exploring the features.
- User Authentication: Implement user authentication to enable account creation and secure login.
- Product Reviews: Allow users to leave reviews and ratings for products they have purchased.
- Enhanced Filtering: Further refine filtering options and provide more granular control over product search criteria.