https://github.com/emam-bokhari/luxury-car-clientside
luxuryCar is an ecommerce website. Where cars are sold. Here a user can select the brand of his choice, search for cars, and buy
https://github.com/emam-bokhari/luxury-car-clientside
Last synced: 2 months ago
JSON representation
luxuryCar is an ecommerce website. Where cars are sold. Here a user can select the brand of his choice, search for cars, and buy
- Host: GitHub
- URL: https://github.com/emam-bokhari/luxury-car-clientside
- Owner: Emam-Bokhari
- Created: 2023-12-09T10:10:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-09T10:17:05.000Z (over 1 year ago)
- Last Synced: 2025-02-02T08:29:47.829Z (4 months ago)
- Language: JavaScript
- Homepage: https://luxury-car-4f537.web.app/
- Size: 86.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Website Name: Luxury Car
## Website Live Link:(https://luxury-car-4f537.web.app/)
## Project Features
### 1. Routing
- Using React Router for handling navigation and rendering different components based on the URL path.
- Defined various routes, including the home page, product details, adding a product, the shopping cart, login, sign-up, and update product details.
- Also implemented a PrivateRoute to protect certain routes, ensuring that only authenticated users can access them.
### 2. Authentication
- Using Firebase for authentication and Firebase's auth module to manage user authentication.
### 3. User Login
- Users can enter their email and password or sign in using Google.
- Password visibility can be toggled with an eye icon.
- If the login is successful, the user is redirected to the home page. If it fails, an error message is displayed using the toast library.
### 4. User Registration
- The SignUp is used for user registration. Users can enter their name, email, password, and optionally a photo URL.
- Users need to accept terms and conditions before registering.
- Password validation checks are performed, and error messages are displayed for any issues.
- If registration is successful, the user is redirected to the home page. If it fails, an error message is displayed using the toast library.
### 5. Add Product Feature
- Users can add products with details such as name, brand name, type, rating, price, photo URL, and product description. When a product is added, a POST request is made to the server to store the product data.
### 6. Error Page Feature
- Displayed when users encounter unexpected errors or navigate to non-existent pages.
- Provides a user-friendly error message and often includes a link to return to the home page.
### 7. Brands Selection Feature
- Displays a list of brand names. Clicking on a brand name redirects the user to a page where products of that brand are displayed.
### 8. Add to Cart Feature
- Users can add products to their cart from the product details page. When a product is added to the cart, a POST request is made to the server to store the cart data. The "Add to Cart" button is implemented with an icon (shopping cart).
### 9. View Cart Feature
- Users can view the products in their cart. There's an option to delete products from the cart.
### 10. Update Product Feature
- Users can update the details of a product. This component allows users to edit and submit changes to the product details, including name, brand name, type, rating, price, photo URL, and product description.
### 10. Private Route Handling
- Protect routes that require authentication. If a user is not authenticated, they are redirected to the login page. The component checks the user's authentication status.
### 10. Responsive Design
- Our project's design is responsive, adapting to different screen sizes ( desktop, tablet and mobile).
- Ensures a consistent and user-friendly experience across devices.
### 1. Client Side:
- React
- React Router Dom
- Tailwind CSS
- Firebase (Authentication)
- JWT
- React Hot Toast
- Daisy UI
### 2. Backend:
- Express js
- MongoDB (Database)