The Fresh Cart Ecommerce is a modern web application designed to simplify the process of browsing, purchasing, and managing products. Leveraging the latest web technologies, the platform provides an intuitive interface that allows users to easily add products to their cart, save items as favorites, and complete purchases through various payment methods. It is ideal for a diverse user base, offering features that enhance the online shopping experience.
- User Authentication: Secure login and registration system to manage user access, including a "Forgot Password" feature for password recovery.
- Browse Products: Users can browse through a wide range of products, with options to filter by categories or brands.
- Product Details: View detailed information about a product, including images, descriptions, and prices.
- Add to Cart: Users can add products to their shopping cart for purchase.
- Favorites: Users can mark products as favorites for easy access later.
- Online Payment:Users can complete purchases using secure online payment methods.
- Cash Payment: Option to pay with cash upon delivery.
- Order History: A dedicated page for users to view their order history and track current orders.
- User Page: Personal user page where users can view their information, such as name and email.
-
- Categories and Brands: sers can explore products based on categories and brands.
-
Functional Components and Hooks: Utilizing functional components, hooks (e.g.,
useState
,useEffect
,useContext
), and thecontext API
for state management across the application. -
Context API: Using
Context API
to manage global state across the application, ensuring efficient and consistent state updates.
- React-Router-Dom: Implementing client-side routing with route protection to manage navigation between different parts of the application, ensuring a smooth user experience.
- Formik and Yup: Leveraging
Formik
for efficient form handling andYup
for validation, ensuring a smooth and error-free user experience when submitting data.
- Axios: Making HTTP requests to fetch and submit data, handling asynchronous operations seamlessly.
- React-Helmet: Managing changes to the document head to update meta tags, improving SEO.
- JWT-Decode: Decoding JSON Web Tokens to manage user authentication and authorization.
- React-Toastify: Implementing user notifications to provide feedback and enhance the user interface and experience.
- React-Loader-Spinner: Providing visual feedback during data loading operations to improve user experience.
- React-Query: Efficiently fetching, caching, and synchronizing server state in the application.
- Bootstrap 5: Utilizing Bootstrap for responsive design and consistent styling across the application.
- React-Detect-Offline: Detecting offline status and providing appropriate feedback to the user.
- Vercel: Deploying the application using Vercel for scalable and efficient hosting.