{"id":15292047,"url":"https://github.com/samuelindrawijaya/react-mini-e-commerce","last_synced_at":"2026-04-08T22:31:59.119Z","repository":{"id":255226115,"uuid":"847212069","full_name":"samuelindrawijaya/React-Mini-E-commerce","owner":"samuelindrawijaya","description":"E-commerce Mini APP using tailwind, react and API from Platzi","archived":false,"fork":false,"pushed_at":"2024-09-13T16:22:15.000Z","size":26202,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-29T15:12:40.027Z","etag":null,"topics":["fetch-api","formik-yup","npm","react","react-hooks","react-native","react-router","tailwind-css"],"latest_commit_sha":null,"homepage":"https://react-mini-e-commerce-chi.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samuelindrawijaya.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-25T07:00:23.000Z","updated_at":"2024-09-13T16:22:18.000Z","dependencies_parsed_at":"2024-08-28T18:52:09.210Z","dependency_job_id":null,"html_url":"https://github.com/samuelindrawijaya/React-Mini-E-commerce","commit_stats":null,"previous_names":["samuelindrawijaya/react-mini-e-commerce"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelindrawijaya%2FReact-Mini-E-commerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelindrawijaya%2FReact-Mini-E-commerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelindrawijaya%2FReact-Mini-E-commerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samuelindrawijaya%2FReact-Mini-E-commerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samuelindrawijaya","download_url":"https://codeload.github.com/samuelindrawijaya/React-Mini-E-commerce/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245247536,"owners_count":20584369,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fetch-api","formik-yup","npm","react","react-hooks","react-native","react-router","tailwind-css"],"created_at":"2024-09-30T16:16:18.015Z","updated_at":"2026-04-08T22:31:59.081Z","avatar_url":"https://github.com/samuelindrawijaya.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bela Beli - React Tailwind 🛒\n\n![Header](public/image1.png)\n\n\u003ch1 align=\"left\"\u003eGlad to see you here ! \u003cimg src=\"https://raw.githubusercontent.com/muhammad-avicena/profile/master/wave.gif\" width=\"30px\" height=\"30px\" /\u003e \u003c/h1\u003e\nhi, I'm Samuel. I am here to explain my project mini E-COMMERCE , that i've been build recently using react as the foundation.\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003e # About\n\nThis project is a About\nE-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\nI styled the landing page with Tailwind CSS and built it with React Js. Also, Tailwind CSS helped with the responsiveness of the website.  \nI created the routes to the other pages with react-router-dom.\nThe products data were fetched from [Platzi Fake Store API](https://api.escuelajs.co/docs#/).\n\n## Features\n\n### 🛍️ **Explore Products**\n\n- **Product Details**: Discover all you need to know about each product, from its title and description to its price and images.\n- **Filter by Category**: Easily find what you’re looking for by filtering products based on categories.\n\n### 🛒 **Shopping Cart Management**\n\n- **Add to Cart**: Add products to your cart and adjust quantities as needed.\n\n- **Remove from Cart**: Remove items from your cart or add the quantity with a click.\n\n- **View Cart**: Check out your cart to see what’s in it, adjust quantities, or clear everything with a single click.\n\n- **Clear Cart**: Empty your cart whenever you need a fresh start or checkout things.\n\n### 🚀 **Checkout Process**\n\n- **Review Your Cart**: Before you finalize your purchase, review your cart to ensure everything looks right.\n\n- **Checkout**: When you’re ready to buy, proceed to checkout and complete your purchase.\n\n### 🔐 **User Authentication**\n\n- **Login**: Sign in to access your account and manage your cart.\n- **Register**: Create a new account to start shopping.\n\n### 📋 **Form Management with Formik and YUP**\n\n- **Formik**: Form handling with Formik, manage login and register.\n- **YUP** : Error handling with YUP, manage form login and register.\n\n### 🔄 **Seamless Navigation**\n\n- **React Router**: Easy Navigate between pages like home, product details, cart, and checkout.\n\n## Showcase\n\n### User Authentication\n\n#### Login\n\n  \u003cimg height=\"400\" src=\"public/login.png\"\u003e\n\n#### Register\n\n  \u003cimg height=\"400\" src=\"public/register.png\"\u003e\n\n#### Home\n\n  \u003cimg height=\"400\" src=\"public/afterlogin.png\"\u003e\n\n### Explore Products\n\n#### Product\n\n  \u003cimg height=\"400\" src=\"public/product.png\"\u003e\n\n#### Product Detail\n\n  \u003cimg height=\"400\" src=\"public/detailproduct.png\"\u003e\n\n### Shopping Cart Management\n\n#### Overview Cart \n\u003cimg height=\"400\" src=\"public/overviewcart.png\"\u003e\n\n#### Add and Remove Cart\n\n \u003cimg height=\"400\" src=\"public/cart.png\"\u003e\n\n#### View Detailed Cart\n\n \u003cimg height=\"400\" src=\"public/cartdetail.png\"\u003e\n\n### Checkout Process\n\n#### Review Cart and Checkout\n\u003cimg height=\"400\" src=\"public/cart and checkout .png\"\u003e\n\n#### Checkout\n\u003cimg height=\"400\" src=\"public/checkouted.png\"\u003e\n\n## 🛠️ Technologies\n\n- React :floppy_disk:\n  \u003e React: A JavaScript library for building user interfaces\n- Tailwind CSS :construction:\n  \u003e A utility-first CSS framework for rapidly building custom designs.\n- Git and Github :fa-file-o:\n  \u003e For code management\n\n## :steam_locomotive: Installation\n\n1. Clone the project to your computer:\n\n   ```bash\n   git clone https://github.com/samuelindrawijaya/React-Mini-E-commerce\n\n   ```\n\n2. Go to the project directory:\n\n   ```bash\n   cd React-Mini-E-commerce\n\n   ```\n\n3. Install dependencies:\n\n   ```bash\n   npm install\n\n   ```\n\n4. Start the development server:\n\n   ```bash\n   npm start\n   ```\n\n#### The application will run at http://localhost:3000.\n\n## Usage\n\n- Start the development server: `npm run `\n\n\n# DEPLOYMENT LINK\n\u003e [!IMPORTANT]\n\u003e This is my deployment link.\nhttps://react-mini-e-commerce-chi.vercel.app/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelindrawijaya%2Freact-mini-e-commerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamuelindrawijaya%2Freact-mini-e-commerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamuelindrawijaya%2Freact-mini-e-commerce/lists"}