https://github.com/abubokkor98/playgear-client
PlayGear is a responsive sports accessories e-commerce platform featuring user authentication, product management, sorting, and a dark/light theme toggle.
https://github.com/abubokkor98/playgear-client
axios firebase-auth framer-motion react-awesome-reveal react-helmet reactjs tailwindcss
Last synced: about 2 months ago
JSON representation
PlayGear is a responsive sports accessories e-commerce platform featuring user authentication, product management, sorting, and a dark/light theme toggle.
- Host: GitHub
- URL: https://github.com/abubokkor98/playgear-client
- Owner: Abubokkor98
- Created: 2025-01-05T09:28:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-07T17:22:54.000Z (over 1 year ago)
- Last Synced: 2025-02-07T18:26:52.530Z (over 1 year ago)
- Topics: axios, firebase-auth, framer-motion, react-awesome-reveal, react-helmet, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://playgear.netlify.app
- Size: 1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **PlayGear** 🎾🏀⚽
**Your Ultimate Destination for Sports Gear Shopping!**
🔗 **Live Site:**
- [PlayGear Live (Netlify)](https://playgear.netlify.app/)
- [PlayGear Live (Firebase)](https://assignment-10-2cdec.web.app/)
---
### **🚀 Overview**
Welcome to **PlayGear** – where sports enthusiasts of all levels find the gear they need to elevate their game! From beginner to pro, our platform offers a seamless, feature-rich shopping experience that is visually stunning, fast, and easy to navigate. With a combination of modern design, powerful features, and robust security, **PlayGear** is the go-to store for all your sports accessories.
Our mission? To **empower athletes** with the best tools, delivered in style. 🎯
---
### **✨ Key Features**
- **🌟 Responsive Design for All Devices**
PlayGear is optimized to work flawlessly on mobile, tablet, and desktop devices, ensuring a top-notch experience no matter where you shop.
- **🔒 Secure User Authentication**
Register and log in seamlessly with **Google Authentication**, backed by **Firebase** for top-level security.
- **🌗 Elegant Dark/Light Mode Toggle**
Whether you're shopping during the day or night, enjoy the flexibility of switching between dark and light themes, making PlayGear your perfect companion in any environment.
- **💡 Engaging Animations**
Powered by **Lottie React** and **React Awesome Reveal**, watch our animations bring your shopping journey to life with smooth transitions and delightful touches.
- **🛒 Advanced Product Sorting**
Effortlessly sort through hundreds of sports accessories by price, rating, and availability—making your decision-making process quick and easy.
- **🛠️ Admin Tools for Easy Management**
With **React-admin** integration, the admin panel allows you to manage products, stock status, and even discounts—all in real-time.
- **🎯 Personalized Experience**
Future updates will introduce **AI-driven product recommendations** based on your browsing history, making your experience even more personalized and tailored.
---
### **🚀 Tech Stack**
- **Frontend**: React.js, TailwindCSS (for sleek and responsive design)
- **Animations**: Lottie React, React Awesome Reveal (for engaging motion effects)
- **Routing**: React Router DOM (for smooth navigation)
- **Authentication**: Firebase (for secure user login)
- **Notifications**: SweetAlert2, React Hot Toast (for beautiful, customizable alerts)
- **Backend**: Express.js, MongoDB (for server-side functionality and data management)
---
### **🎮 How It Works**
1. **Visit the Site**: Go to [PlayGear Live](https://assignment-10-2cdec.web.app/) and discover a wide variety of sports gear.
2. **Sign Up/Login**: Easily sign up using your email or Google account for a faster checkout experience.
3. **Browse & Add to Cart**: Select your gear, filter through categories, and add products to your cart in just a few clicks.
4. **Toggle Between Light/Dark Themes**: Customize your browsing experience with just a button click—perfect for both daytime and nighttime browsing.
5. **Checkout**: With future updates, you’ll enjoy seamless checkout and payment options. Stay tuned!
---
### **💡 Roadmap and Future Features**
1. **💳 Payment Integration**
Enjoy a smooth checkout process with multiple payment methods (Stripe, PayPal, and more).
2. **📈 AI-Based Recommendations**
Get personalized product suggestions based on your browsing and purchase history.
3. **🗣️ Multi-Language Support**
Reach a wider audience with global language support for better inclusivity.
4. **📦 Real-Time Inventory Updates**
Stay updated with real-time stock levels and availability, so you never miss out on your favorite product.
---
## 📦 Dependencies
PlayGear relies on the following libraries:
| Dependency | Version | Description |
|--------------------------------|-----------|-------------|
| **@emotion/react** | `^11.13.5` | Library for writing CSS-in-JS styles |
| **firebase** | `^11.0.2` | Google Firebase SDK for authentication and database |
| **framer-motion** | `^11.15.0` | Library for animations and transitions |
| **lottie-react** | `^2.4.0` | Library for rendering Lottie animations in React |
| **react** | `^18.3.1` | Core React framework for UI development |
| **react-awesome-reveal** | `^4.3.1` | Animation effects for React components |
| **react-dom** | `^18.3.1` | React rendering package for DOM elements |
| **react-helmet-async** | `^2.0.5` | Manages document head for better SEO and performance |
| **react-hot-toast** | `^2.4.1` | Library for toast notifications |
| **react-icons** | `^5.4.0` | Collection of scalable vector icons for React |
| **react-router-dom** | `^6.28.0` | React library for handling routing/navigation |
| **react-spring** | `^9.7.5` | Library for physics-based animations in React |
| **sweetalert2** | `^11.14.5` | Beautiful alert popups with customizable styles |
| **swiper** | `^11.1.15` | Mobile-friendly slider and carousel component |
**Install Dependencies**
To install dependencies manually, use:
```bash
npm install
```
---
## Installation and Setup 🚀
1. Clone the repository:
```bash
git clone https://github.com/Abubokkor98/career-compass.git
```
2. Navigate to the project directory:
```bash
cd career-compass
```
3. Install dependencies:
```bash
npm install
```
4. Set up Firebase:
- Create a Firebase project at [Firebase Console](https://console.firebase.google.com/).
- Enable Authentication and configure the desired sign-in methods.
- Copy the Firebase configuration and create a `.env` file in the root directory.
- Add the following variables:
```plaintext
REACT_APP_FIREBASE_API_KEY=your-firebase-api-key
REACT_APP_FIREBASE_AUTH_DOMAIN=your-firebase-auth-domain
REACT_APP_FIREBASE_PROJECT_ID=your-firebase-project-id
REACT_APP_FIREBASE_STORAGE_BUCKET=your-firebase-storage-bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your-firebase-messaging-sender-id
REACT_APP_FIREBASE_APP_ID=your-firebase-app-id
```
5. Start the development server:
npm start
```
6. Access the application at `http://localhost:5173`.
---
### **👥 Contribution and Support**
We love contributions! Feel free to fork the project, report any bugs, or suggest features.
To contribute:
1. Fork the repository.
2. Create a new branch (`git checkout -b feature-branch`).
3. Make your changes and test them.
4. Submit a pull request to the main branch.
---
### **🙋♂️ About the Developer**
Built with 💻 and passion by **Abu Bokkor Siddik**.
- **GitHub**: [Abubokkor98](https://github.com/Abubokkor98)
- **LinkedIn**: [Connect with me](https://www.linkedin.com/in/abubokkor)
---
### **🔥 Why Choose PlayGear?**
- **🛡️ Trusted by Athletes Worldwide**
Our customers range from casual joggers to pro athletes who trust **PlayGear** for their sporting needs.
- **⚡ Fast, Reliable, Secure**
Powered by cutting-edge tech for the best shopping experience.
- **🌍 Global Vision**
Expanding to bring PlayGear to athletes everywhere, with new features coming soon!
---
### **🎯 Get Started Today!**
Visit us at [PlayGear Live](https://playgear.netlify.app/) to explore, shop, and experience the future of sports accessories!