ProGear Sports

(Elevate Your Game, Redefine Your Gear)

ProGear Sports is a sports gear e-commerce platform built with React and Tailwind CSS. It offers secure Google login via Firebase and manages data with MongoDB. Users can browse, manage, and update products easily. With sleek design, Lottie animations, and intuitive features, ProGear provides an engaging shopping experience.

Overview

ProGear is a dynamic e-commerce platform designed for sports enthusiasts, offering a seamless shopping experience for premium gear and equipment. Built using React and Tailwind CSS, the website delivers a sleek, responsive design optimized for all devices.

With Firebase as the authentication backbone, users can securely log in using Google or register via email. MongoDB ensures robust and reliable data management for user and product records. ProGear empowers users to manage their inventory with ease, allowing them to add, update, or delete products.

Engaging features like Lottie animations enhance the visual appeal, while React Tooltip ensures intuitive navigation. With a commitment to performance and user satisfaction, ProGear integrates state-of-the-art tools for smooth operation and a delightful experience.

Features

🔐 Secure Google Authentication: Login and register easily using Google, powered by Firebase for seamless and secure access.

🛍️ Product Management: Add, update, and delete products effortlessly, ensuring users have complete control over their inventory.

📊 MongoDB Data Management Reliable and scalable database handling user and product data with robust CRUD operations.

🎨 Dynamic Animations: Engaging Lottie animations enhance the visual appeal and interactivity of the website.

📱 Responsive Design: Fully optimized for all screen sizes, delivering an enjoyable browsing experience on both mobile and desktop devices.

💡 Filter & Sort Options: User can sorted all product by price or rating

🔄 Theme Customization: Toggle between light and dark modes, with preferences saved in local storage.

⚠️ Error Handling: A custom 404 error page redirects users to the homepage in case of invalid URLs, ensuring a smooth browsing experience.

🛠️ User-Friendly Interface: Simple, intuitive navigation and design allow users to easily browse, filter, and manage their gadgets.

Technologys

🔵 HTML for the basic structure.
🔵 CSS and Tailwind CSS for styling and responsiveness.
🔵 React for the frontend framework.
🔵 JavaScript for logic and interactivity.
🔵 Firebase for Authentication.
🔵 MongoDB for Data Management

🛠️ Technologies Used

This project is built with the following technologies:

Frontend

• ⚛️ React (18.3.1) – JavaScript library for building user interfaces
• 🔄 React Router DOM (7.0.2) – Client-side routing for React applications
• 🎭 Lottie React (2.4.0) – Animations for React apps
• 🎩 React Helmet (6.1.0) – Managing document head
• 🛠️ React Tooltip (5.28.0) – Custom tooltips for React
• 🍬 SweetAlert2 (11.14.5) – Stylish alert popups

Styling

• 🎨 Tailwind CSS (3.4.15) – Utility-first CSS framework
• 🌼 DaisyUI (4.12.14) – Component library for Tailwind

Backend & Authentication

• 🔥 Firebase (11.0.2) – Authentication and database services

Development & Tooling

• ⚡ Vite (6.0.1) – Fast build tool for modern web apps
• ✅ ESLint (9.15.0) – JavaScript linter for code quality
• 🎨 PostCSS (8.4.49) – CSS transformations with plugins
• ✨ Autoprefixer (10.4.20) – Automatic CSS vendor prefixing

React Concepts Used in ProGear Sports

Component-Based Architecture: The entire project is structured with reusable, modular components such as Navbar,ProductCard, and Footer. This modular approach makes it easy to manage, extend, and maintain the codebase as the project grows.

Context API for Global State Management: The Context API is utilized to manage global states like user authentication, theme preferences, and product data, ensuring smooth data flow across components.

React Router for Private Routing: React Router is implemented to create private routes, restricting access to specific pages for authenticated users only.

useEffect for Side Effects: useEffect is used for fetching user and product data from MongoDB, synchronizing authentication states, and applying theme settings.

Conditional Rendering: Conditional rendering is used to control UI based on the application state, like displaying " theme toggling" when the toggling state is true then some design are extend or changed.

Integration of Third-Party Libraries: Tools like Lottie for animations and React Tooltip for enhanced user interaction demonstrate seamless third-party library integration.

Data Management Strategy in ProGear Sports

Firebase Authentication Manages secure login/logout and user sessions.
MongoDB Handles user and product data with robust storage and CRUD operations.
Fetch API Retrieves and updates data from the backend, ensuring real-time interactions.

Installation

Step-by-step instructions to set up the project locally.

# Clone the repository
https://github.com/programming-hero-web-course2/b10-a10-server-side-rejaul48.git

# Navigate to the project directory
cd your_repository

# Install dependencies
npm install

Live Demo

Live demo link

Contact me

Email: [email protected]