Skip to content

noureen66/TechPalaceWebsite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

TechPalace

A modern e-commerce website built using React.js and Material UI, featuring authentication, localization, cart management, PayPal payment integration, favorites system, protected routes, and fake API using JSON Server.


Features

  • User Authentication (Login / Register)
  • Google Authentication using Firebase
  • Protected Routes
  • Products Listing
  • Product Details Page
  • Shopping Cart System
  • Favorites / Wishlist
  • Search Functionality
  • Categories Filtering
  • Localization (English / Arabic)
  • Responsive Design
  • PayPal Payment Integration
  • Snackbar Notifications
  • Loading Spinners
  • Error Handling
  • Dynamic Routing using React Router
  • Context API State Management
  • Fake Backend using JSON Server

Technologies Used

  • React.js
  • Vite
  • Material UI (MUI)
  • React Router DOM
  • Firebase Authentication
  • PayPal React SDK
  • JSON Server
  • Context API
  • i18next (Localization)
  • Axios
  • React Icons

Project Structure

src/
│
├── components/     # Reusable Components
├── pages/          # Website Pages
├── context/        # Context API
├── locales/        # Translation Files
├── routes/         # Protected Routes
└── assets/         # Images & Static Files

db.json             # Fake Database

Localization

The website supports:

  • English 🇺🇸
  • Arabic 🇪🇬

Using i18next.


Authentication

Authentication system includes:

  • Email & Password Login/Register
  • Google Login with Firebase
  • Protected Pages
  • Logout Functionality

Payment Integration

Integrated PayPal payment gateway using PayPal React SDK.

Users can:

  • Complete checkout process
  • Simulate payment using sandbox accounts

Responsive Design

The website is fully responsive and works on:

  • Desktop
  • Tablet
  • Mobile Devices

Fake Backend

Fake API created using JSON Server.

Data includes:

  • Products
  • Categories
  • Users
  • Cart Items

To run the code

npx json-server --watch db.json --port 3001

npm run dev

To test PayPal payment use these credentials

Email: sb-03hrz50248360@personal.example.com

Password: (sO5b)Oe

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors