https://github.com/ankit-nautiyal/shopeasy-react
ShopEasy is a responsive e-commerce website that uses React with the Fake Store API to provide a seamless shopping experience, including user authentication, product browsing, cart management, and a checkout process. The application features a clean UI, a mobile-first design, and global state management for the cart.
https://github.com/ankit-nautiyal/shopeasy-react
api axios css css-grid fake-store-api git github html5 javascript react-icons react-router reactjs responsive-design toast-notifications
Last synced: about 1 year ago
JSON representation
ShopEasy is a responsive e-commerce website that uses React with the Fake Store API to provide a seamless shopping experience, including user authentication, product browsing, cart management, and a checkout process. The application features a clean UI, a mobile-first design, and global state management for the cart.
- Host: GitHub
- URL: https://github.com/ankit-nautiyal/shopeasy-react
- Owner: ankit-nautiyal
- Created: 2025-04-12T12:26:00.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-14T12:57:16.000Z (about 1 year ago)
- Last Synced: 2025-05-07T21:08:07.328Z (about 1 year ago)
- Topics: api, axios, css, css-grid, fake-store-api, git, github, html5, javascript, react-icons, react-router, reactjs, responsive-design, toast-notifications
- Language: JavaScript
- Homepage: https://shopeasy-ankit.vercel.app
- Size: 130 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ShopEasy - Shopping Website
ShopEasy is a responsive e-commerce website that uses React with the Fake Store API to provide a seamless shopping experience, including user authentication, product browsing, cart management, and a checkout process. The application features a clean UI, a mobile-first design, and global state management for the cart.
---
## Tech Stack
- **Frontend**: React.js (Vite)
- **Routing**: React Router v6
- **State Management**: React Context API (for cart)
- **HTTP Client**: Axios (for API calls)
- **Styling**: Plain CSS (mobile-first)
- **API**: [Fake Store API](https://fakestoreapi.com/docs)
- **Build Tool**: Vite
---
## Project Screenshots:
## Features
- **Login Page**:
- Authenticate users via Fake Store API's `/auth/login` endpoint.
- Store JWT token in `localStorage`.
- Redirect to the home page on successful login.
- **Product Listing (Home)**:
- Fetch and display products in a responsive grid.
- Filter products by category using `/products/category/:category`.
- Search bar to filter products by title.
- **Product Detail Page**:
- Display detailed product info (image, title, description, price).
- "Add to Cart" functionality.
- **Cart Page**:
- View cart items with quantity controls and removal options.
- Calculate total price dynamically.
- Checkout clears the cart and shows a confirmation popup (auto-closes after 4 seconds).
- **Header**:
- Navigation links to Home, Cart, and Logout.
- Displays real-time cart item count.
- Logout clears JWT and redirects to Login.
- **Footer**:
- Includes brand info, contact details, and social media links.
- Responsive design with a dynamic copyright year.
- **Responsive Design**:
- Mobile-first approach using plain CSS.
- It adapts seamlessly to desktop and mobile devices.
## Directory Structure
```
shopping-website/
├── public/ # Static assets
├── src/
│ ├── assets/ # Images, fonts (if any)
│ ├── components/ # Reusable components
│ │ ├── Header.jsx
│ │ ├── Footer.jsx
│ │ ├── ProductCard.jsx
│ │ ├── Popup.jsx
│ ├── pages/ # Page components
│ │ ├── Login.jsx
│ │ ├── Home.jsx
│ │ ├── ProductDetail.jsx
│ │ ├── Cart.jsx
│ ├── context/ # Context API
│ │ ├── CartContext.jsx
│ ├── styles/ # CSS files
│ │ ├── Login.css
│ │ ├── Home.css
│ │ ├── ProductDetail.css
│ │ ├── Cart.css
│ │ ├── Header.css
│ │ ├── Footer.css
│ │ ├── ProductCard.css
│ │ ├── Popup.css
│ ├── App.jsx # Main app with routes
│ ├── main.jsx # Entry point
│ ├── index.css # Global styles
├── .gitignore # Git ignore file
├── package.json # Project dependencies
├── README.md # This file
├── vite.config.js # Vite configuration
```
## Prerequisites
- **Node.js** (v16 or higher)
- **npm** (v8 or higher)
- A modern web browser
## Setup Instructions
1. **Clone the Repository**:
```bash
git clone https://github.com/ankit-nautiyal/ShopEasy-React.git
cd shopping-website
```
2. **Install Dependencies**:
```bash
npm install
```
3. **Run the Development Server**:
```bash
npm run dev
```
Open `http://localhost:5173` in your browser (port may vary).
4. **Build for Production** (Optional):
```bash
npm run build
```
The production-ready files will be in the `dist/` folder.
## Usage
1. **Login**:
- Use Fake Store API credentials (e.g., `username: "mor_2314"`, `password: "83r5^_"`).
- On success, you’ll be redirected to the home page.
2. **Browse Products**:
- Filter by category or search by product name.
- Click a product to view details.
3. **Manage Cart**:
- Add products to the cart from the product detail page.
- Update quantities or remove items in the cart.
- Click "Checkout" to place an order (cart clears, popup appears).
4. **Logout**:
- Click "Logout" in the header to clear the JWT and return to the login page.
## Testing
- **API Testing**:
- Ensure the Fake Store API (`https://fakestoreapi.com`) is accessible.
- Test login with provided credentials.
- **UI Testing**:
- Verify responsiveness on mobile (<600px) and desktop.
- Check navigation, cart updates, and popup behavior.
- **Functionality**:
- Confirm cart state persists across pages.
- Test checkout clears the cart and shows the confirmation.
## Future Improvements
- **Error Handling**: Display user-friendly messages for API failures.
- **Styling**: Add animations or use a CSS framework like Tailwind.
- **Local Storage for Cart**: Persist cart state across sessions.
## Contributing
1. Fork the repository.
2. Create a feature branch (`git checkout -b feature/your-feature`).
3. Commit changes (`git commit -m "Add your feature"`).
4. Push to the branch (`git push origin feature/your-feature`).
5. Open a pull request.
## Acknowledgments
- [Fake Store API](https://fakestoreapi.com) for providing a free e-commerce API.
- [Vite](https://vitejs.dev) for a fast development environment.
- [React](https://reactjs.org) for a powerful UI library.
---
### Notes for Customization
- **Repository URL**: Replace `https://github.com/ankit-nautiyal/ShopEasy-React.git` with your actual repo URL.
- **Screenshots**: You can add screenshots by placing them in a `screenshots/` folder and linking them in the README (e.g., ``).
- **Deployed Link**: If you deploy the app (e.g., on Vercel), add a "Live Demo" section with the URL.