https://github.com/arrafi2644/performance-gear-client
This is an e-commerce website for sports accessories, where customers can browse, purchase, and review various sports products, including gear and apparel. The website is fully responsive, offers user authentication, and allows users to manage products they add to the platform. It also features various animations, dark/light theme toggle and more
https://github.com/arrafi2644/performance-gear-client
daisyui expressjs firebase mongod nodejs react reactreveal reactrouter tailwindcss
Last synced: 2 months ago
JSON representation
This is an e-commerce website for sports accessories, where customers can browse, purchase, and review various sports products, including gear and apparel. The website is fully responsive, offers user authentication, and allows users to manage products they add to the platform. It also features various animations, dark/light theme toggle and more
- Host: GitHub
- URL: https://github.com/arrafi2644/performance-gear-client
- Owner: Arrafi2644
- Created: 2025-01-05T05:14:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-05T04:25:24.000Z (over 1 year ago)
- Last Synced: 2025-02-05T05:23:57.861Z (over 1 year ago)
- Topics: daisyui, expressjs, firebase, mongod, nodejs, react, reactreveal, reactrouter, tailwindcss
- Language: JavaScript
- Homepage: https://performance-gear.web.app/
- Size: 124 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Performance Gear
This is an e-commerce website for sports accessories, where customers can browse, purchase, and review various sports products, including gear and apparel. The website is fully responsive, offers user authentication, and allows users to manage products they add to the platform. It also features various animations, dark/light theme toggle, and sorting functionality.
## Live site link: https://performance-gear.web.app/
## Features:
- **Responsive Design**: The website is designed to be responsive on all devices, including mobile, tablet, and desktop views.
- **User Authentication**: Users can log in, register, and use third-party authentication methods like Google and GitHub.
- **Add and Manage Products**: Users can add, view, update, and delete sports equipment on the platform (private routes).
- **Product Sorting**: Users can sort products based on price (ascending or descending).
- **Dark/Light Theme Toggle**: A toggle is provided to switch between dark and light themes.
- **Toast Notifications**: The app uses SweetAlert for showing success and error messages, such as when login fails.
- **Animations**: Integrated React Awesome Reveal for various animations.
- **Loading Spinner**: A loading spinner appears while data is being fetched.
- **404 Page**: Displays a custom 404 page for non-existent routes.
## Tech Stack:
- **Frontend**: React, React Router, React Reveal
- **Backend**: Node.js, Express, MongoDB
- **Authentication**: Firebase Authentication (Google/Email)
- **Hosting**: Firebase for client-side, Vercel for server-side hosting
- **Database**: MongoDB
- **State Management**: React Context API
## 🛠Installation
1. **Clone the repository**:
```sh
git clone https://github.com/Arrafi2644/Performance-Gear-Client.git
cd performance-gear
#### Install dependencies:
npm install
#### Set up environment variables:
#### Create a .env file in the root directory and add the following:
VITE_apiKey=your_api_key
VITE_authDomain=your_auth_domain
VITE_projectId=your_project_id
VITE_storageBucket=your_storage_bucket
VITE_messagingSenderId=your_messaging_sender_id
VITE_appId=your_app_id
#### Start the development server:
npm run dev
Build for production:
#### Preview the production build:
npm run preview