Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shariarniaj05/sports-sphere-client
https://github.com/shariarniaj05/sports-sphere-client
react reduxrtkquery redx-toolkit shadcn-ui
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/shariarniaj05/sports-sphere-client
- Owner: ShariarNiaj05
- Created: 2024-07-08T16:40:12.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-08-16T18:27:10.000Z (5 months ago)
- Last Synced: 2024-08-17T18:18:10.572Z (5 months ago)
- Topics: react, reduxrtkquery, redx-toolkit, shadcn-ui
- Language: TypeScript
- Homepage:
- Size: 213 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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**
```bash
git clone https://github.com/ShariarNiaj05/Sports-Sphere-Client.git
```
### Step:2 **Change the directory**
```bash
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**
```bash
npm install
```
### Step:4 **.env file setup**
```bash
WIll update later
```
### Step:5 **Run the project**
```bash
npm run dev
```
The server will start running on http://localhost:5173 or http://localhost:5174