https://github.com/ib-inu/flexxcart
FlexxCart is a React and TypeScript-based e-commerce app with Redux, featuring product browsing, a static cart, and mock authentication using the FakeStore API.
https://github.com/ib-inu/flexxcart
meterial-ui react-query react-router reactjs redux styled-components typescript
Last synced: 3 months ago
JSON representation
FlexxCart is a React and TypeScript-based e-commerce app with Redux, featuring product browsing, a static cart, and mock authentication using the FakeStore API.
- Host: GitHub
- URL: https://github.com/ib-inu/flexxcart
- Owner: ib-inu
- Created: 2024-10-21T12:30:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-25T14:12:05.000Z (over 1 year ago)
- Last Synced: 2025-04-08T18:37:08.550Z (about 1 year ago)
- Topics: meterial-ui, react-query, react-router, reactjs, redux, styled-components, typescript
- Language: TypeScript
- Homepage: https://flexxcart.netlify.app
- Size: 228 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FlexxCart
FlexxCart is a modern e-commerce website designed by styled components to provide a seamless shopping experience with the use of redux. The app allows users to browse products by category, add them to a cart, and perform basic mock authentication and authorization. It integrates React and TypeScript with Redux for state management and uses React Query for efficient data fetching and caching.
## Features
- **Browse Products**: Fetch product data from the FakeStore API.
- **Shopping Cart**: Add, remove, and manage items in the cart.
- **Mock Authentication**: Simulate login and authorization for user-based interactions.
- **Mock PaymentGateway**: Basic Payment mock UI with the 50% chance to success or fail.
- **Persistent Notifications**: Provide feedback with React Hot Toaster.
- **Dynamic Routing**: Navigate seamlessly with React Router.
- **Customizable UI**: Styled with Material UI and Styled Components.
## Limitations
Due to the limitations of the FakeStore API:
- **Dynamic Cart Operations**: The cart functionality is static and does not persist changes to the backend.
- **User Data by Login**: User-specific data cannot be retrieved using JSON keys or tokens.
- **Search Functionality**: There is no built-in support for search features.
These limitations make FlexxCart an ideal project for learning and practicing frontend development, but not fully production-ready for dynamic user interactions.
## Technologies Used
- **React**: For building the user interface.
- **Redux**: For managing global state.
- **TypeScript**: For type safety and improved developer experience.
- **React Query**: For handling server-state and API interactions.
- **React Router**: For navigation and routing.
- **Axios**: For making HTTP requests.
- **Material UI**: For responsive and pre-styled components.
- **Styled Components**: For modular and reusable CSS-in-JS styling.
- **React Hot Toaster**: For showing toast notifications.