https://github.com/03-bunny-06/react-e-com-website
This project is a mock e-commerce web application called Fake Store, built with React. It features a responsive and user-friendly interface, where users can search, filter, and view products dynamically.
https://github.com/03-bunny-06/react-e-com-website
api external-font react react-hooks reactjs
Last synced: 2 months ago
JSON representation
This project is a mock e-commerce web application called Fake Store, built with React. It features a responsive and user-friendly interface, where users can search, filter, and view products dynamically.
- Host: GitHub
- URL: https://github.com/03-bunny-06/react-e-com-website
- Owner: 03-Bunny-06
- Created: 2024-10-16T04:51:47.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2025-02-21T03:54:39.000Z (4 months ago)
- Last Synced: 2025-02-21T04:29:09.702Z (4 months ago)
- Topics: api, external-font, react, react-hooks, reactjs
- Language: JavaScript
- Homepage: https://react-e-com-website.vercel.app
- Size: 138 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Fake Store E-Commerce App
## Project Description
This project is a mock e-commerce web application called **Fake Store**, built with **React**. It features a **responsive and user-friendly interface**, where users can search, filter, and view products dynamically. The app is styled with **CSS** for a modern and sleek design and uses the **Fake Store API** to fetch product data.
## Features
### Dynamic Product Search and Filtering
Users can search for products using the search bar, filtering results dynamically as they type.
Filter options include sorting products by:
- **Alphabetical Order** (A-Z and Z-A).
- **Price** (Low to High and High to Low).
- **Categories** such as **Jewelery, Electronics, Men's Clothing, and Women's Clothing**.
### Product Listing
Displays products in a **card layout**, showing:
- **Product Image**.
- **Category**.
- **Title**.
- **Price**.
Products are dynamically fetched from the **Fake Store API**.
### Reusable Components
Modular React components, making the app scalable and easier to maintain:
- **TopOfNav**: Includes the logo, search bar, and icons.
- **NavBar**: Navigation bar with essential links like Shop, Skills, Stories, etc.
- **BottomOfNav**: Highlights the store's purpose with a descriptive section.
- **FilterDiv**: Provides filtering and sorting options.
- **ProductListing**: Dynamically displays products with filtering and sorting applied.
- **Footer**: Contains quick links, contact information, and social media links.
### Loading Animation
- Implements a **rotating circle animation** for better UX during data fetching.
### Responsive Design
- Optimized for various screen sizes using **flexible layouts and CSS styling**.
## Technologies Used
### Front-End
- **React.js**: For building reusable and dynamic components.
- **CSS**: Custom styles for a polished UI.
### API
- **Fake Store API**: For fetching real-time product data.
### External Fonts
- **Google Fonts**: Lilita One, Protest Strike, and Roboto for typography.
## File Structure
```
src/
├── components/
│ ├── TopOfNav.js # Top navigation with logo and search bar
│ ├── NavBar.js # Main navigation bar with categories
│ ├── BottomOfNav.js # Informative section below the navigation
│ ├── FilterDiv.js # Filter and sort options
│ ├── ProductListing.js # Dynamic product listing
│ ├── Footer.js # Footer with quick links and contact info
│ └── App.js # Main entry point of the app
├── styles/
│ └── styles.css # Global styles for the application
└── index.js # ReactDOM rendering
```
## How to Run
### Clone the Repository:
```bash
git clone https://github.com/your-repo/fake-store-app.git
cd fake-store-app
```
### Install Dependencies
Ensure you have **Node.js** installed, then run:
```bash
npm install
```
### Start the Application
Launch the development server:
```bash
npm start
```
### Access the App
Open [http://localhost:3000](http://localhost:3000) in your browser.
# React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh