sherif-el-sheikh / freshcart

Route Academy Graduation Project

Fresh Cart Ecommerce

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.

Features

User Authentication and Authorization

• User Authentication: Secure login and registration system to manage user access, including a "Forgot Password" feature for password recovery.

Product Management

• 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.

Payment Methods

• Online Payment:Users can complete purchases using secure online payment methods.
• Cash Payment: Option to pay with cash upon delivery.

Order Management

• Order History: A dedicated page for users to view their order history and track current orders.

User Account

• 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.

Skills and Techniques Covered

React Development

• Functional Components and Hooks: Utilizing functional components, hooks (e.g., useState, useEffect, useContext), and the context 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.

Routing and Navigation

• React-Router-Dom: Implementing client-side routing with route protection to manage navigation between different parts of the application, ensuring a smooth user experience.

Form Handling and Validation

• Formik and Yup: Leveraging Formik for efficient form handling and Yup for validation, ensuring a smooth and error-free user experience when submitting data.

API Integration

• Axios: Making HTTP requests to fetch and submit data, handling asynchronous operations seamlessly.

Meta Tag Management

• React-Helmet: Managing changes to the document head to update meta tags, improving SEO.

Token Management

• JWT-Decode: Decoding JSON Web Tokens to manage user authentication and authorization.

Notifications

• React-Toastify: Implementing user notifications to provide feedback and enhance the user interface and experience.

Loading Indicators

• React-Loader-Spinner: Providing visual feedback during data loading operations to improve user experience.

Data Fetching and Caching

• React-Query: Efficiently fetching, caching, and synchronizing server state in the application.

Styling and Responsive Design

• Bootstrap 5: Utilizing Bootstrap for responsive design and consistent styling across the application.

Offline Detection

• React-Detect-Offline: Detecting offline status and providing appropriate feedback to the user.

Deployment

• Vercel: Deploying the application using Vercel for scalable and efficient hosting.