SinaEcom Client

A modern, full-featured e-commerce web application built with React that enables businesses to sell their products online. This is the client-side application that provides an intuitive shopping experience for customers and a comprehensive admin panel for store management.

🌐 Live Demo: https://sina-ecom.web.app/

✨ Features

Customer Features

Product Catalog: Browse products with detailed descriptions, prices, images, and ratings
Search Functionality: Search products by name with real-time filtering
Category Navigation: Filter products by categories
Product Details: View comprehensive product information with image magnification
Shopping Cart: Add, update, and remove items from cart with quantity management
User Authentication: Secure signup/login system with JWT tokens
User Profile: Manage personal information and view order history
Password Recovery: Forgot password and reset password functionality
Shipping Information: Enter and save shipping addresses
Order Placement: Complete checkout process with order confirmation
Payment Integration: Secure payment processing
Product Reviews: Leave ratings and reviews for purchased products
Responsive Design: Fully responsive UI that works on all devices

Admin Features

Admin Dashboard: Dedicated admin panel with protected routes
Product Management: Add, edit, and manage products
Category Management: Create and organize product categories
Inventory Control: Track and update stock levels
Rich Text Editor: Use Draft.js editor for product descriptions
Image Upload: Upload product images via ImgBB API integration
Order Management: View and manage customer orders

🛠 Technology Stack

Frontend Framework & Libraries

React 17.0.2 - Core UI library
React Router DOM 6.4.5 - Client-side routing and navigation
Redux 4.1.2 - State management
React Redux 7.2.6 - React bindings for Redux
Redux Thunk 2.4.1 - Async Redux middleware
Redux DevTools Extension - Development debugging tools

UI Components & Styling

React Bootstrap 2.1.2 - UI component library
Bootstrap 4.6.0 - CSS framework
Ant Design 4.18.5 - Enterprise-level UI design system
Tailwind CSS 2.2.19 - Utility-first CSS framework
Framer Motion 6.2.7 - Animation library
React Icons 4.7.1 - Icon library

Form Handling & Validation

React Hook Form 7.43.4 - Form validation and management
React Hot Toast 2.4.0 - Toast notifications

Rich Text & Media

Draft.js 0.11.7 - Rich text editor framework
TinyMCE React 3.13.0 - WYSIWYG editor
React Image Magnify 2.7.4 - Product image zoom
React Slick 0.29.0 - Carousel/slider component
Slick Carousel 1.8.1 - Carousel base library

HTTP & API

Axios 0.24.0 - HTTP client for API requests
Proxy: http://127.0.0.1:7070 (Backend server)

Additional Libraries

JSON Web Token 8.5.1 - JWT token handling
bcryptjs 2.4.3 - Password hashing
SweetAlert2 11.3.10 - Beautiful alert dialogs
React Loader Spinner 5.3.4 & React Spinners 0.11.0 - Loading indicators

Development Tools

React Scripts 5.0.0 - Create React App build tooling
Firebase Hosting - Deployment platform

📁 Project Structure

sinaEcom-client/
├── public/                      # Static public assets
│   ├── index.html              # HTML template
│   ├── manifest.json           # PWA manifest
│   ├── robots.txt              # SEO robots file
│   └── images/                 # Public images
│
├── src/
│   ├── index.js                # Application entry point
│   ├── App.js                  # Main App component
│   ├── store.js                # Redux store configuration
│   ├── index.css               # Global styles
│   ├── App.css                 # App component styles
│   └── customizeCss.css        # Custom styling
│
│   ├── actions/                # Redux action creators
│   │   ├── cartActions.js      # Cart operations
│   │   ├── categoriesAction.js # Category operations
│   │   ├── orderActions.js     # Order operations
│   │   ├── payActions.js       # Payment operations
│   │   ├── productActions.js   # Product CRUD operations
│   │   └── userActions.js      # User authentication & profile
│
│   ├── reducers/               # Redux reducers
│   │   ├── cartReducers.js
│   │   ├── categoriesReducers.js
│   │   ├── orderReducers.js
│   │   ├── payReducers.js
│   │   ├── productReducers.js
│   │   └── userReducers.js
│
│   ├── constants/              # Redux action constants
│   │   ├── cartConstant.js
│   │   ├── CategoriesConstant.js
│   │   ├── orderConstant.js
│   │   ├── payConstants.js
│   │   ├── productConstants.js
│   │   ├── urlConstant.js      # API endpoint configuration
│   │   └── userConstants.js
│
│   ├── components/             # Reusable UI components
│   │   ├── Alert.js            # Alert component
│   │   ├── Card.js             # Card component
│   │   ├── Loader.js           # Loading spinner
│   │   ├── Message.js          # Message display
│   │   ├── Navbar.js           # Navigation bar
│   │   ├── Product.js          # Product card
│   │   ├── ProductList.js      # Product grid
│   │   ├── Rating.js           # Star rating display
│   │   ├── SideBar.js          # Sidebar component
│   │   └── Time.js             # Time display utility
│
│   ├── Layout/                 # Layout components
│   │   ├── AdminLayout/        # Admin panel layout
│   │   │   ├── AdminLayout.js
│   │   │   └── Admin.css
│   │   └── Main/               # Main app layout
│   │       └── Main.js
│
│   ├── Router/                 # Routing configuration
│   │   ├── PrivateRoutes/      # Protected route components
│   │   │   └── PrivateRoutes.js
│   │   └── Routes/             # Route definitions
│   │       └── Routes.js
│
│   ├── screens/                # Page components
│   │   ├── HomeScreen.js       # Homepage with slider & products
│   │   ├── CartScreen.js       # Shopping cart
│   │   ├── ProductDetailsScreen.js  # Product detail page
│   │   ├── SearchScreen.js     # Search results
│   │   ├── ShippingScreen.js   # Shipping address form
│   │   ├── PayScreen.js        # Payment selection
│   │   ├── PlaceOrderScreen.js # Order confirmation
│   │   ├── SigninScreen.js     # User login
│   │   ├── SignupScreen.js     # User registration
│   │   ├── ForgotPasswordScreen.js  # Password recovery
│   │   ├── ResetPasswordScreen.js   # Password reset
│   │   │
│   │   ├── admin/              # Admin panel screens
│   │   │   ├── AddProductScreen.js   # Add new product
│   │   │   ├── EditProductScreen.js  # Edit product
│   │   │   ├── ProductScreen.js      # Product management
│   │   │   └── AddCategory.js        # Category management
│   │   │
│   │   ├── Profile/            # User profile screens
│   │   │   ├── ProfileScreen.js      # User profile page
│   │   │   ├── MyOrdersScreen.js     # Order history
│   │   │   └── UserScreen.js         # User management
│   │   │
│   │   ├── Categories/         # Category screens
│   │   │   ├── Categories.js         # Category listing
│   │   │   └── Category.js           # Single category
│   │   │
│   │   ├── Footer/             # Footer component
│   │   │   └── FooterScreen.js
│   │   │
│   │   └── Slider/             # Homepage slider
│   │       └── HomeSlider.js
│
├── firebase.json               # Firebase hosting configuration
├── package.json                # Dependencies and scripts
└── README.md                   # Project documentation

🚀 Getting Started

Prerequisites

Node.js (v14 or higher)
npm or yarn package manager
A running backend server (see API Integration section)

Installation

Clone the repository

git clone https://github.com/anis009/sinaEcom-client.git
cd sinaEcom-client

Install dependencies
```
npm install
```
Configure environment variables Create a .env file in the root directory (see Environment Variables section)
Start the development server
```
npm start
```
Open your browser Navigate to http://localhost:3000

🔐 Environment Variables

Create a .env file in the root directory with the following variables:

# ImgBB API for image uploads (required for admin panel)
REACT_APP_imgbb_key=your_imgbb_api_key_here

To get an ImgBB API key:

Visit https://api.imgbb.com/
Sign up for a free account
Generate your API key
Add it to your .env file

📜 Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in development mode at http://localhost:3000. The page will reload when you make changes.

`npm run build`

Builds the app for production to the build folder. Optimizes the build for best performance.

`npm test`

Launches the test runner in interactive watch mode.

`npm run eject`

Note: this is a one-way operation! Ejects from Create React App for full configuration control.

`npm run add-tailwind`

Processes Tailwind CSS from src/tailwind.css to src/styles.css.

🎯 Key Functionalities

Authentication System

JWT-based authentication with secure token storage
User registration with email and password validation
Login with credential verification
Password recovery via email token
Password reset functionality
User profile updates
Persistent login state using localStorage

Shopping Cart

Add/remove products with quantity selection
Real-time cart total calculation
Cart persistence in localStorage
Visual cart badge with item count
Quantity adjustment in cart view

Product Management

Product listing with pagination
Category-based filtering
Search functionality with URL parameters
Product detail view with image magnification
Rating and review system
Related products display
Top-rated products section

Order Processing

Add items to cart
Proceed to checkout
Enter shipping information
Select payment method
Review order details
Place order and receive confirmation
Track order in profile

Admin Panel

Protected routes (admin-only access)
Add new products with rich text descriptions
Upload product images to ImgBB
Manage product inventory
Create and manage categories
View and manage all orders
Edit existing products

🔌 API Integration

Backend Server

Production: https://sina-ecom-server.vercel.app
Development Proxy: http://127.0.0.1:7070

API Endpoints Used

User Endpoints:

POST /api/users - User registration
POST /api/users/login - User login
PUT /api/users/ - Update user profile
POST /api/users/forgotpassword - Request password reset
POST /api/users/resetpassword/:token - Reset password

Product Endpoints:

GET /api/products - Get all products
GET /api/products/:id - Get single product
POST /api/products - Create product (admin)
PUT /api/products/:id - Update product (admin)
POST /api/products/:id/reviews - Add product review

Category Endpoints:

GET /api/categories - Get all categories
POST /api/categories - Create category (admin)

Order Endpoints:

POST /api/orders - Create order
GET /api/orders/myorders - Get user orders
GET /api/orders/:id - Get single order

Payment Endpoints:

POST /api/payment - Process payment

🗄 State Management

Redux Store Structure

{
  userSignup: {
    userInfo: { _id, name, email, token, isAdmin },
    loading, error
  },
  userLogin: { loading, error },
  updateUser: { loading, success, error },
  cart: {
    cartItems: [{ product, name, image, price, qty, countInStock }]
  },
  categories: {
    categories: [{ _id, name, image }],
    loading, error
  },
  order: { order, loading, success, error },
  userOrder: { orders: [], loading, error },
  payment: { loading, success, error },
  getSingleOrder: { order, loading, error },
  sentToken: { loading, success, error },
  resetPassword: { loading, success, error },
  addProduct: { loading, success, error },
  editProduct: { loading, success, error },
  getProducts: {
    products: [], loading, error, pages, page
  },
  getTopProducts: { products: [], loading, error },
  getSingleProduct: { product, loading, error },
  addProductReview: { loading, success, error }
}

Middleware

Redux Thunk: Handles async actions for API calls
Redux DevTools: Browser extension integration for debugging

🚢 Deployment

Firebase Hosting

The application is deployed on Firebase Hosting:

Install Firebase CLI
```
npm install -g firebase-tools
```
Login to Firebase
```
firebase login
```
Build the application
```
npm run build
```
Deploy to Firebase
```
firebase deploy
```

Firebase Configuration

The firebase.json file is configured to:

Serve the build folder as the public directory
Rewrite all routes to index.html for SPA routing

📝 Code Features

Component Organization

Separation of concerns with dedicated folders for screens, components, and layouts
Reusable components for consistency across the app
Custom hooks for shared logic

Error Handling

Centralized error messages using Message component
Toast notifications for user feedback
Form validation with error states

Performance Optimization

Lazy loading with React.lazy (if implemented)
Memoization of expensive computations
Optimized re-renders with proper state management

Security

JWT token authentication
Protected admin routes
Password hashing (bcryptjs)
Secure API communication

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is part of the MERN stack e-commerce application suite.

👨‍💻 Author

Anis Mola

GitHub: @anis009

🙏 Acknowledgments

Backend API: https://sina-ecom-server.vercel.app
Deployed on Firebase Hosting
Built with Create React App
UI components from Bootstrap, Ant Design, and custom implementations

Note: This is the client-side application. Make sure the backend server is running for full functionality. For the backend repository, please visit the SinaEcom server repository.

Name		Name	Last commit message	Last commit date
Latest commit History 20 Commits
.firebase		.firebase
.vscode		.vscode
public		public
src		src
.firebaserc		.firebaserc
.gitignore		.gitignore
README.md		README.md
firebase.json		firebase.json
package-lock.json		package-lock.json
package.json		package.json

anis009/sinaEcom-client

Folders and files

Latest commit

History

Repository files navigation