Shopi is a fully responsive e-commerce web application built using ReactJS, ViteJS, and TailwindCSS. The project fetches product data from FakeStoreAPI and showcases categories and individual products through dynamically generated product cards. The app implements dynamic routes depending on whether the user is authenticated or not, though this authentication is stored locally as it is a frontend-only project. The purpose of Shopi is to demonstrate a practical flow using ReactJS and best practices for building scalable web apps.
- Fully responsive design built with TailwindCSS
- Dynamic routing based on user authentication
- Fake authentication (credentials stored in
localStorage) - Product listing and category filtering with data fetched from FakeStoreAPI
- React component architecture with clean separation of concerns
- ReactJS: Frontend library
- ViteJS: Next-generation frontend tooling
- TailwindCSS: Utility-first CSS framework
- FakeStoreAPI: External API for fetching product data
To get started with the Shopi project, follow these steps:
-
Clone the repository:
git clone https://github.com/AndriwRC/react-ecommerce.git cd react-ecommerce -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to:
http://localhost:5173
The app uses a basic fake authentication mechanism to restrict access to certain routes. The credentials are stored in localStorage as this project is focused solely on the frontend. The following credentials are available for testing:
- Username:
user - Password:
password
Upon successful login, the app stores the authentication credentials in localStorage, allowing access to authenticated routes.
The product data is fetched from FakeStoreAPI. The application makes use of the following endpoints:
- Products:
https://fakestoreapi.com/products
The application has been deployed on Netlify. You can access the live version here:
Andriw Rollo Castro Platzi Student <3 & Web Developer GitHub: https://github.com/AndriwRC