Forever E-Commerce Website

Forever is a modern e-commerce platform built with React and Vite. It provides a seamless shopping experience with features like product browsing, cart management, order placement, and admin functionalities. The project is designed to be user-friendly, responsive, and scalable.

Features

User Features

• Home page showcasing the latest collections and bestsellers.
• Product browsing by category, subcategory, and search functionality.
• Detailed product pages with descriptions, prices, and sizes.
• Cart management: add, update, and remove items.
• Order placement with delivery information and cart totals.
• User authentication: sign up, log in, and log out securely.
• Contact form for user inquiries.

Admin Features

• Add, view, and delete products.
• Admin authentication for secure access.

Additional Features

• Responsive design for all devices.
• Search and filter options for products.
• Real-time notifications for user actions.
• Firebase integration for authentication and database management.
• Lazy loading for improved performance.
• Error handling with custom 404 pages and form validation.

Tech Stack

• Frontend: React, Vite, React Router, Bootstrap
• State Management: Context API
• Backend: Firebase (Authentication, Firestore)
• Styling: CSS, Bootstrap
• Notifications: React Toastify
• Carousel: Swiper.js

Installation and Setup

1. Clone the repository:

  git clone https://github.com/your-repo/forever-ecommerce.git
  cd forever-ecommerce/frontend

2. Install dependencies:

npm install

3. Run the build process:

npm run build

4. Start the development server:

npm run preview

Project Structure

.
├── public/
│   ├── imgs/
│   ├── productImgs/
├── src/
│   ├── components/
│   ├── Contexts/
│   ├── customs/
│   ├── pages/
│   ├── App.jsx
│   ├── firebase.js
│   ├── index.css
│   ├── main.jsx
├── .env.local
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── README.md
├── vite.config.js

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Contact

Kareem Mohamed - in/Kareem-dev