https://github.com/sandeeppaldotnet/cartshoppy
🛍️ React E-Commerce Store A modern, responsive e-commerce frontend built with: ⚛️ React + React Router 🎨 React Bootstrap (for sleek UI components) 🌐 DummyJSON API (mock product data) ✨ Features Browse products by category (smartphones, laptops, etc.) Product details page (dynamic routing) Responsive design (mobile-friendly grids & cards)
https://github.com/sandeeppaldotnet/cartshoppy
ecommerce-website javascript json reactjs redux redux-thunk redux-toolkit shopping-cart
Last synced: 2 months ago
JSON representation
🛍️ React E-Commerce Store A modern, responsive e-commerce frontend built with: ⚛️ React + React Router 🎨 React Bootstrap (for sleek UI components) 🌐 DummyJSON API (mock product data) ✨ Features Browse products by category (smartphones, laptops, etc.) Product details page (dynamic routing) Responsive design (mobile-friendly grids & cards)
- Host: GitHub
- URL: https://github.com/sandeeppaldotnet/cartshoppy
- Owner: sandeeppaldotnet
- Created: 2025-03-31T06:26:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-31T06:32:37.000Z (over 1 year ago)
- Last Synced: 2025-03-31T07:29:29.854Z (over 1 year ago)
- Topics: ecommerce-website, javascript, json, reactjs, redux, redux-thunk, redux-toolkit, shopping-cart
- Language: JavaScript
- Homepage: https://cartshoppy.netlify.app/
- Size: 85 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + Vite
# 🛒 CartShoppy - React E-Commerce Demo
A sleek single-page e-commerce demo built with React and React Bootstrap, showcasing product browsing by categories.
[](https://cartshoppy.netlify.app/)
## ✨ Key Features
- **Single-File Architecture** - All logic in `Home.jsx` for easy understanding
- **Real API Data** - Powered by DummyJSON products API
- **Responsive Categories** - 5 popular product categories
- **Product Previews** - 4 featured products per category
- **Modern UI** - Clean cards with hover effects
## 🛠️ Tech Stack
- **Frontend**: React 18 + React Router
- **Styling**: React Bootstrap (with custom CSS)
- **API**: [DummyJSON](https://dummyjson.com/docs/products)
- **Hosting**: Netlify
## 📦 How It Works
This single-file implementation demonstrates:
```javascript
// 1. Fetches categories from DummyJSON API
const categoriesRes = await fetch('https://dummyjson.com/products/categories');
// 2. Displays products for each category
const productsRes = await fetch(
`https://dummyjson.com/products/category/${category}?limit=4`
);
// 3. Responsive grid layout using React Bootstrap
{products.map((product) => (
{/* Product Card */}
))}
Key features of this README:
1. Highlights your live Netlify URL prominently
2. Clearly states the single-file architecture
3. Shows actual code snippets used in your implementation
4. Minimal setup requirements
5. Mobile-responsive badge styling
To complete it:
1. Add a screenshot named `screenshot.png` in your `/public` folder
2. Update the feature list if you want to highlight specific UI elements
3. Consider adding a "Future Improvements" section if you plan to expand it
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
## Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript and enable type-aware lint rules. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.