EquiSports - A Sports Equipment E-commerce Website

EquiSports is an e-commerce platform designed for purchasing sports equipment and accessories. The website is built using React and styled with Tailwind CSS. It supports dark and light theme toggling and is designed to be fully responsive.

Live Demo

Check out the live version of EquiSports: Live Demo

Features

• Responsive Design: The website is optimized for desktop, tablet, and mobile devices.
• Dark/Light Theme Toggle: Users can switch between dark and light themes for improved readability and customization.
• Firebase Integration (Coming Soon): Firebase will handle user authentication and data storage.
• Product Management (Coming Soon): Users will be able to browse, add, update, and delete products.

Technologies Used

• React: A JavaScript library for building user interfaces.
• Vite: A next-generation, fast development build tool.
• Tailwind CSS: A utility-first CSS framework for creating custom designs.
• DaisyUI: A plugin for Tailwind CSS that provides pre-built components.
• Firebase: A platform for developing web and mobile applications, used here for authentication and database management.
• React Router: A library for managing routing in React applications.
• React Context API: A state management tool used for passing data through the component tree without having to pass props manually at every level.
• ESLint: A tool for identifying and fixing problems in JavaScript code.
• PostCSS: A tool for transforming CSS with JavaScript plugins.
• MongoDB: A NoSQL database for storing product and user data.
• Vercel: A platform for server-side deployment.

Installation

To get started with EquiSports, follow these steps:

1. Clone the repository:

   git clone https://github.com/your-username/equisports.git

2. Navigate to the client directory:

   cd directory_name

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

Folder Structure

The project is organized into the following folder structure to keep the code modular and easy to maintain:

EquiSports/
├── public/                     # Static files, such as favicons, images, etc.
│   ├── favicon.ico             # Website favicon
│   └── index.html              # Main HTML file for Vite
├── src/                        # Source code of the project
│   ├── assets/                 # Static assets (e.g., images, icons)
│   ├── components/             # Reusable React components
│   │   ├── Navbar/            
│   │   └── Footer/            
│   ├── context/                # React Context API (e.g., AuthContext, CartContext)
│   ├── firebase/               # Firebase-related logic (e.g., authentication, database)
│   │   └── firebase.js         # Firebase configuration and initialization
│   ├── hooks/                  # Custom hooks
│   │   └── useAuth.jsx         # Custom hook for user authentication
│   ├── pages/                  # Pages for routing
│   │   ├── Home.jsx            # Home page
│   │   ├── Login.jsx           # Login page
│   │   ├── Register.jsx        # Registration page
│   │   ├── ProductPage.jsx     # Product page
│   │   ├── Cart.jsx            # Shopping Cart page
│   │   └── NotFound.jsx        # 404 page
│   ├── routes/                 # Routing logic
│   │   ├── AppRouter.jsx       # Main router file
│   │   └── PrivateRoute.jsx    # Higher-order component for protected routes
│   ├── services/               # API calls or data handling logic
│   │   └── productService.js   # API calls related to products (fetch, add, update, delete)
│   ├── App.jsx                 # Main App component
│   ├── main.jsx                # Entry point for React (Vite-specific)
│   └── index.css               # Global CSS entry file for Tailwind
├── .env                        # Environment variables (Firebase config, etc.)
├── .gitignore                  # Files and directories to ignore in Git
├── README.md                   # Documentation for the project
├── package.json                # Project metadata and dependencies
├── postcss.config.js           # PostCSS configuration for Tailwind
├── tailwind.config.js          # Tailwind configuration
└── vite.config.js              # Vite configuration

Installation

To get started with EquiSports, follow these steps:

1. Clone the repository:

   git clone https://github.com/your-username/equisports.git

2. Navigate to the client directory:

   cd equisports/client

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev