Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shikhu51197/reactecommerce
The application allows users to browse through different categories of products, view details of each product, and includes animations/transitions for an enhanced user experience.
https://github.com/shikhu51197/reactecommerce
chakra-ui css3 localstorage reactjs redux
Last synced: 7 days ago
JSON representation
The application allows users to browse through different categories of products, view details of each product, and includes animations/transitions for an enhanced user experience.
- Host: GitHub
- URL: https://github.com/shikhu51197/reactecommerce
- Owner: shikhu51197
- Created: 2024-02-13T12:24:36.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-02-20T20:40:08.000Z (12 months ago)
- Last Synced: 2024-05-28T23:49:41.988Z (8 months ago)
- Topics: chakra-ui, css3, localstorage, reactjs, redux
- Language: JavaScript
- Homepage: https://react-ecommerce-livid-nine.vercel.app/
- Size: 4.83 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ✨PROJECT NAME --> ❤️🔥❤️🔥 Interactive Product Catalog Web Application ❤️🔥❤️🔥:-
[](https://ecoapp-json.onrender.com/products)
[](https://react-ecommerce-livid-nine.vercel.app/)
---
## 🔗 Profile Links✨
| Resume | Github | Linkedin | Portfolio | Blogger | Medium |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
| [](https://drive.google.com/file/d/1YE62u2ChjmlR-EKeqZ75UvFMg_KcY86T/view?usp=sharing) | [](https://github.com/shikhu51197/)| [](https://www.linkedin.com/in/shikha-gupta-12a2b5199) |[](https://shikhu51197.github.io/) |[](https://wwwartificial-intelligence.blogspot.com/) |[](https://medium.com/@sg780060) |
---
# Objective ❤️🔥:-
Develop an interactive product catalog web application using React.js and associated libraries to showcase various products. The application allows users to browse through different categories of products, view details of each product, and includes animations/transitions for an enhanced user experience.
---
## Features ✨:-
---
| Serial No | Feature |
| ----------------- | ------------------------
| 1 | User Signup and login, logout, navbar, footer|
| 2 | Home Page Design, responsive design |
| 3 | Displays categories with thumbnails. |
| 4 | Allows quick navigation to category-specific product pages. |
| 5 | Displays categories with thumbnails. |
| 6 | Utilizes a responsive grid layout for product display. |
| 7 | Provides filtering options and pagination for user convenience. |
| 8 | Offers detailed product information.|
| 9 | Introduces related products in a popup. |
| 10 | Enables easy addition to cart or wishlist. |
| 11 | Provides filtering options and pagination for user convenience. |
| 12 | Allows users to manage items with basic functionalities. |
| 13| Supports adding/removing items, updating quantities, and clearing the cart/wishlist. |
| 14 | Implements smooth transitions and animations for a polished user experience. |
| 15| Includes hover effects on product thumbnails for interactivity.|
| 16 |Leverages Chakra UI components for a visually consistent design. |
| 17 | Utilizes theming capabilities for easy customization. |
| 18 | Integrates advanced animations like parallax scrolling. |
| 19 | Supports user authentication and persistent cart/wishlist storage. |
| 20 | User Friendly decent ui |
----
# Tech Stack ❤️🔥:-
React.js: JavaScript library for building user interfaces.
Framer Motion/GSAP: Animation libraries for smooth transitions.
Other Libraries: Any additional libraries used for state management, routing, etc.
---
# Packages Used ❤️🔥:-
Create React App: Bootstrapping React applications.
Framer Motion/GSAP: Animation libraries.
React Router: For handling navigation in the application.
----
# Getting Started ❤️🔥:-
Clone the repository:-
git clone https://github.com/your-username/product-catalog.git
Navigate to the project directory:-
cd product-catalog
Install dependencies:-
npm install
Start the development server:-
npm start
Open the application in your browser at http://localhost:3000.
Deployed Application:-
The live version of the application is deployed on Netlify/Vercel.
---
## Flow
```mermaid
graph TD;
App-->HomePage
HomePage-->SignupPage
HomePage-->LoginPage
HomePage--> CategoryPage
HomePage--> CartPage
HomePage--> WishListPage
SignupPage--> LoginPage
CategoryPage-->ProductDetailPage
ProductDetailPage-->RelatedProductPage
ProductDetailPage-->CartPage
ProductDetailPage-->WishListPage
WishListPage-->HomePage
CartPage --> HomePage
```
Contributing
💻 Contributions are welcome! Please follow the standard guidelines for contributing.
---
❤️🔥 THANK YOU ❤️🔥