Sports Sphere

Introduction

Sports Sphere - Your Ultimate Destination for All Things Sporting!

Welcome to Sports Sphere, the premier e-commerce platform for sporting goods enthusiasts! Whether you're a seasoned athlete or a casual player, Sports Sphere offers a comprehensive selection of equipment and accessories for every sport. Our extensive catalog ensures you'll find exactly what you need to elevate your game.

Project Description

Purpose

The primary purpose of Sports Sphere is to create a comprehensive and user-friendly e-commerce platform dedicated to sporting goods. Our aim is to provide a one-stop destination for athletes, sports enthusiasts, and casual players alike to find a wide range of high-quality equipment and accessories for various sports. By offering a seamless and efficient shopping experience, we aim to support our customers in their pursuit of fitness, sports, and an active lifestyle.

Goals

• Diverse Selection: Offer a vast array of sporting goods, including equipment, apparel, and accessories for popular sports.

• User Role: Implement a unique user system where a single account can handle both customer and admin tasks. This includes browsing products, making purchases, tracking orders, and managing account settings.

• Intuitive Interface: Design an intuitive and visually appealing interface that simplifies navigation, enhances user engagement, and makes the shopping process enjoyable and hassle-free.

Features

Homepage

• Hero Section: Carousel with discount information and compelling visuals.
• Featured Products: Cards displaying latest products with key details, ratings, and a "View Details" button.
• Product Categories: Clearly defined categories with links to relevant product listings.

Product Listing (All Products Page)

• Search Functionality: Robust search bar to find products by name. Filter Options: Allow users to filter products by category, price, brand, rating, etc.
• Sorting: Options to sort products by price (ascending or descending).
• Clear Filter Button: Resets all filters.

Product Details (Single Product Page)

• Product Information: Detailed view with name, description, category, brand, stock, ratings, price, and images.
• Add to Cart: Button with functionality to add products to the cart, considering stock availability and preventing duplicates.

Cart Page

• Product Summary: Displays items added to the cart with quantity and total price.
• Quantity Adjustment: Allows users to increase or decrease product quantities.
• Remove Item: Option to remove products from the cart. Total Price: Calculates total price including VAT.
• Proceed to Checkout: Button enabled only when products are in stock, leading to the checkout page.

Checkout Page

• User Information: Collects necessary details like name, email, phone number, and delivery address.
• Payment Options: Offers Cash on Delivery.
• Order Confirmation: Displays order summary and confirmation message post-payment.

Manage Products

• Product CRUD: Create, read, update, and delete products using RTK Query.
• User-Friendly Interface: Intuitive form design with pre-filled data for updates.
• Feedback Mechanisms: Inform users about actions through modals or toasts.

Technology Stack

Frontend

• React ⚛️
• Redux 🌀
• Shadcn

Backend

• Node.js 🟢
• Express.js 🌐
• Mongoose 🍃
• TypeScript 📘

Installation Guideline

Follow The Instructions To Run The Application Locally

Step:1 Clone the repository

  git clone https://github.com/ShariarNiaj05/Sports-Sphere-Client.git

Step:2 Change the directory

  cd Sports-Sphere-Client

Or simply navigate to the folder and open VS Code in that directory.

Step:3 Install node modules and all the dependencies

  npm install

Step:4 .env file setup

   WIll update later

Step:5 Run the project

   npm run dev

The server will start running on http://localhost:5173 or http://localhost:5174