Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/samuelindrawijaya/react-mini-e-commerce
E-commerce Mini APP using tailwind, react and API from Platzi
https://github.com/samuelindrawijaya/react-mini-e-commerce
fetch-api formik-yup npm react react-hooks react-native react-router tailwind-css
Last synced: about 1 month ago
JSON representation
E-commerce Mini APP using tailwind, react and API from Platzi
- Host: GitHub
- URL: https://github.com/samuelindrawijaya/react-mini-e-commerce
- Owner: samuelindrawijaya
- Created: 2024-08-25T07:00:23.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T16:22:15.000Z (2 months ago)
- Last Synced: 2024-10-14T20:41:06.582Z (about 1 month ago)
- Topics: fetch-api, formik-yup, npm, react, react-hooks, react-native, react-router, tailwind-css
- Language: TypeScript
- Homepage: https://react-mini-e-commerce-chi.vercel.app
- Size: 25 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Bela Beli - React Tailwind 🛒
Glad to see you here ! 
hi, I'm Samuel. I am here to explain my project mini E-COMMERCE , that i've been build recently using react as the foundation.
> # About
This project is a About
E-commerce Mini APP using tailwind and react.user can view information about each product, filter products by category that i have provide, and add / remove products from the cart, view detailed cart and checkout item
I styled the landing page with Tailwind CSS and built it with React Js. Also, Tailwind CSS helped with the responsiveness of the website.
I created the routes to the other pages with react-router-dom.
The products data were fetched from [Platzi Fake Store API](https://api.escuelajs.co/docs#/).
## Features
### 🛍️ **Explore Products**
- **Product Details**: Discover all you need to know about each product, from its title and description to its price and images.
- **Filter by Category**: Easily find what you’re looking for by filtering products based on categories.
### 🛒 **Shopping Cart Management**
- **Add to Cart**: Add products to your cart and adjust quantities as needed.
- **Remove from Cart**: Remove items from your cart or add the quantity with a click.
- **View Cart**: Check out your cart to see what’s in it, adjust quantities, or clear everything with a single click.
- **Clear Cart**: Empty your cart whenever you need a fresh start or checkout things.
### 🚀 **Checkout Process**
- **Review Your Cart**: Before you finalize your purchase, review your cart to ensure everything looks right.
- **Checkout**: When you’re ready to buy, proceed to checkout and complete your purchase.
### 🔐 **User Authentication**
- **Login**: Sign in to access your account and manage your cart.
- **Register**: Create a new account to start shopping.
### 📋 **Form Management with Formik and YUP**
- **Formik**: Form handling with Formik, manage login and register.
- **YUP** : Error handling with YUP, manage form login and register.
### 🔄 **Seamless Navigation**
- **React Router**: Easy Navigate between pages like home, product details, cart, and checkout.
## Showcase
### User Authentication
#### Login
#### Register
#### Home
### Explore Products
#### Product
#### Product Detail
### Shopping Cart Management
#### Overview Cart
#### Add and Remove Cart
#### View Detailed Cart
### Checkout Process
#### Review Cart and Checkout
#### Checkout
## 🛠️ Technologies
- React :floppy_disk:
> React: A JavaScript library for building user interfaces
- Tailwind CSS :construction:
> A utility-first CSS framework for rapidly building custom designs.
- Git and Github :fa-file-o:
> For code management
## :steam_locomotive: Installation
1. Clone the project to your computer:
```bash
git clone https://github.com/samuelindrawijaya/React-Mini-E-commerce
```
2. Go to the project directory:
```bash
cd React-Mini-E-commerce
```
3. Install dependencies:
```bash
npm install
```
4. Start the development server:
```bash
npm start
```
#### The application will run at http://localhost:3000.
## Usage
- Start the development server: `npm run `
# DEPLOYMENT LINK
> [!IMPORTANT]
> This is my deployment link.
https://react-mini-e-commerce-chi.vercel.app/