Tokoplay is a platform where seller can promote products through videos to potential buyers. It is a simple clone of Tokopedia Play. It is built for the final project of Generasi GIGIH 3.0. This repo is the frontend of the app. It is built with React.js. You can see the API in this repo.
Check out the web version of Tokoplay here: tokoplay.vercel.app
These are the features of the app. Features marked with (additional) are features I added that are not included in the minimum requirements.
- Display list of videos
- Search videos with debouncing (additional)
- Show detail of a video
- Display products of a video
- Display comments of a video
- Add a comment to a video
- Implement infinite scroll for list of videos & comments (additional)
- Language: JavaScript
- Frontend Library: React 18
- Routing Library: React Router
- Frontend Build Tool: Vite
- CSS Framework: Tailwind CSS 3
- Tailwind CSS Component Library: DaisyUI
- HTTP Client: Axios
- Linter: ESLint
- Code Formatter: Prettier
- Git Hook: Husky
-
Make sure you have Node.js & Yarn installed on your computer.
-
Clone the repo.
git clone https://github.com/nadiannis/tokoplay-web.git
cd tokoplay-web -
Make a copy of
env.examplefile & rename it to.env.Write an API base URL to connect the frontend app to the API. Make sure the API is running. Go to this repo to know more about the API.
VITE_API_BASE_URL=http://localhost:8080
-
Install the dependencies.
yarn
Run the development server.
yarn devBuild the app.
yarn buildLocally preview the production build.
yarn previewIf you want to fix ESLint error or format the code, you can run this command.
yarn lint:fixyarn prettier:fix