Your Ultimate Destination for Sports Gear Shopping!
🔗 Live Site:
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. 🎯
-
🌟 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.
- 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)
- Visit the Site: Go to PlayGear Live and discover a wide variety of sports gear.
- Sign Up/Login: Easily sign up using your email or Google account for a faster checkout experience.
- Browse & Add to Cart: Select your gear, filter through categories, and add products to your cart in just a few clicks.
- Toggle Between Light/Dark Themes: Customize your browsing experience with just a button click—perfect for both daytime and nighttime browsing.
- Checkout: With future updates, you’ll enjoy seamless checkout and payment options. Stay tuned!
-
💳 Payment Integration
Enjoy a smooth checkout process with multiple payment methods (Stripe, PayPal, and more). -
📈 AI-Based Recommendations
Get personalized product suggestions based on your browsing and purchase history. -
🗣️ Multi-Language Support
Reach a wider audience with global language support for better inclusivity. -
📦 Real-Time Inventory Updates
Stay updated with real-time stock levels and availability, so you never miss out on your favorite product.
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:
npm install-
Clone the repository:
git clone https://github.com/Abubokkor98/career-compass.git
-
Navigate to the project directory:
cd career-compass -
Install dependencies:
npm install
-
Set up Firebase:
- Create a Firebase project at Firebase Console.
- Enable Authentication and configure the desired sign-in methods.
- Copy the Firebase configuration and create a
.envfile in the root directory. - Add the following variables:
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
- Access the application at
http://localhost:5173.
We love contributions! Feel free to fork the project, report any bugs, or suggest features.
To contribute:
- Fork the repository.
- Create a new branch (
git checkout -b feature-branch). - Make your changes and test them.
- Submit a pull request to the main branch.
Built with 💻 and passion by Abu Bokkor Siddik.
- GitHub: Abubokkor98
- LinkedIn: Your LinkedIn Profile
-
🛡️ 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!
Visit us at PlayGear Live to explore, shop, and experience the future of sports accessories!