https://github.com/waghraj1699/nxttrendz
NxtTrendz is a modern and fully functional fashion e-commerce web application built using React.js. This app allows users to explore a variety of fashion products, view detailed information about each item, add products to their shopping cart. The app provides a seamless and engaging shopping experience for users
https://github.com/waghraj1699/nxttrendz
css html javascript react-components react-context react-router react-router-dom reactjs
Last synced: about 2 months ago
JSON representation
NxtTrendz is a modern and fully functional fashion e-commerce web application built using React.js. This app allows users to explore a variety of fashion products, view detailed information about each item, add products to their shopping cart. The app provides a seamless and engaging shopping experience for users
- Host: GitHub
- URL: https://github.com/waghraj1699/nxttrendz
- Owner: Waghraj1699
- Created: 2024-12-22T06:38:41.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-27T13:16:43.000Z (over 1 year ago)
- Last Synced: 2025-09-13T09:09:32.532Z (9 months ago)
- Topics: css, html, javascript, react-components, react-context, react-router, react-router-dom, reactjs
- Language: JavaScript
- Homepage: https://waghrajnxttrend.ccbp.tech
- Size: 232 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **NxtTrendz React App**
## **About the Project**
**NxtTrendz** is a fully functional **fashion e-commerce web application** built using **React.js**. This app provides users with an intuitive platform to explore fashion products, view their details, and add them to the cart. Users can also proceed to a simulated checkout process for a seamless shopping experience.
The project showcases the use of modern frontend technologies like **React**, **React Router**, and **React Context API**, demonstrating practical skills in building dynamic and responsive single-page applications (SPAs).
---
- username: rahul
- password: rahul@2021
---
## **Features**
### **1. Product Catalog**
- Displays a list of fashion products with their image, name, and price.
- Users can browse and select products.
### **2. Product Details**
- Each product has a dedicated page showcasing its complete details, including images, price, and description.
- Users can navigate to this page by clicking on any product in the catalog.
### **3. Shopping Cart**
- Add products to the cart directly from the product catalog or product details page.
- View, update quantities, or remove items from the cart.
- The total price dynamically updates based on the cart contents.
### **4. Checkout Process**
- Provides a simulated checkout process for completing purchases.
- A simple and intuitive interface for finalizing orders.
### **5. Responsive Design**
- The app is designed to work seamlessly on desktop, tablet, and mobile devices.
- CSS ensures an optimal user experience across various screen sizes.
---
## **Technologies Used**
### **Frontend**
- **React.js**: For building the user interface and handling the app's dynamic behavior.
- **React Router**: To manage navigation and routing between pages like product catalog, product details, cart, and checkout.
- **React Context API**: Used for global state management, particularly for managing the shopping cart across components.
- **CSS**: For styling and making the app visually appealing and responsive.
- **HTML**: Provides the structure of the application.
### **Backend/Mock Data**
- **Mock JSON Data**: Used for simulating product details and cart management.
---
## **Installation**
### **Prerequisites**
Ensure you have the following installed:
- **Node.js**: To run the app locally.
- **npm**: Comes with Node.js to manage dependencies.
### **Steps to Run the App**
1. Clone the repository:
```bash
git clone https://github.com/Waghraj1699/nxtTrendz.git
```
2. Navigate to the project directory:
```bash
cd nxtTrendz
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm start
```
5. Open your browser and navigate to:
```
http://localhost:3000
```
---
## **Usage**
- Visit the homepage to view the product catalog.
- Click on any product to view its detailed page.
- Add items to your cart and view them in the cart section.
- Modify cart items or proceed to the checkout page.
---
## **Future Enhancements**
- **Payment Gateway Integration**: Add a payment gateway like Stripe for real transactions.
- **Backend API**: Integrate a real backend to fetch product details dynamically.
- **Authentication**: Add user authentication for personalized features like order history.
---
## **Author**
- **Waghraj Patil**
- [ GitHub Profile](https://github.com/waghraj1699)
- [LinkedIn Profile](https://linkedin.com/in/waghraj-patil)
---
## **License**
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.