https://github.com/parisaghm/webiste-online-cake
A modern and responsive e-commerce website for cakes, built using React and Tailwind CSS. Users can browse, filter, and view detailed information about cakes from different categories, such as birthday cakes and wedding cakes.
https://github.com/parisaghm/webiste-online-cake
e-commerce frontend react react-router shadcn tailwindcss typescript vercel
Last synced: 3 months ago
JSON representation
A modern and responsive e-commerce website for cakes, built using React and Tailwind CSS. Users can browse, filter, and view detailed information about cakes from different categories, such as birthday cakes and wedding cakes.
- Host: GitHub
- URL: https://github.com/parisaghm/webiste-online-cake
- Owner: parisaghm
- License: mit
- Created: 2025-03-27T14:38:15.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2025-08-07T16:24:04.000Z (11 months ago)
- Last Synced: 2025-09-09T23:37:35.241Z (10 months ago)
- Topics: e-commerce, frontend, react, react-router, shadcn, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage: https://cake-shop-orpin.vercel.app
- Size: 237 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
## Cakes E-Commerce Website
📌 Overview
Welcome to the Cakes E-Commerce Website! This is a React-based online store where users can browse and filter cakes by categories such as birthday cakes, wedding cakes, and specialty cakes. The project focuses on delivering a smooth user experience with an intuitive UI.
URL: https://cake-shop-orpin.vercel.app/
## Features
- 🌐 Category Filtering: Users can filter cakes by category.
- 🎨 Responsive Design: The UI adapts to different screen sizes.
- ⚡ Smooth Animations: Components have fade-in animations.
- 🔍 Product Display: Cakes are displayed in a grid format with individual product cards.
- 📜 Dynamic Routing: Uses React Router for seamless navigation.
- 🆙 Scroll to Top: Ensures users always see fresh content when navigating.
## Technologies Used:
- React: Frontend library
- Tailwind CSS: Styling and responsiveness
- React Router: Handling navigation
- ShadCN/UI: UI components
## Project Structure
```
bash
.
├── public # Static assets (e.g., images)
├── src
│ ├── assets # Application-specific assets
│ ├── components # Vue components (ProductList, CartList)
│ ├── App.vue # Main app component
│ ├── main.js # Entry point for Vue app
├── package.json # Project metadata and dependencies
└── README.md # Project documentation
```
## Installation
1. Clone the repository:
```
git clone https://github.com/yourusername/cakes-ecommerce.git
cd cakes-ecommerce
```
2.Install dependencies:
```
npm install
```
3.Run the app:
```
npm run serve
```
The app will be available at http://localhost:3000/.
There are several ways of editing your application.
## How It Works:
- Homepage: Displays the collection of cakes.
- Category Buttons: Filters the displayed cakes dynamically.
- Product Cards: Show cake details with images and descriptions.
- Product Details Page: Displays more information about a specific cake.
## License
This project is licensed under the MIT License.