Tokopedia Play (Clone)

Context & Challenge

Tokopedia Play (Clone) is a final project from Generasi Gigih 3.0 Program. This project is a clone of Tokopedia Play. Tokopedia Play is a video live-streaming service that provides Tokopedia for Sellers to promote their products. The application should focus on user-friendly design and seamless functionality. The project offers clear guidelines for wireframes, allowing flexibility in their modification while meeting the technical requirements and desired features. The user interface (UI) is customizable, ensuring an optimal and aesthetically pleasing user experience. This project is built using the MERN Stack (MongoDB, Express.js, React.js, Node.js) and Vite as a build tool. This project is also deployed on Vercel (Frontend), Railway (Backend), and MongoDB Atlas (Database). This project also uses the React Router library to implement the Single Page Application (SPA) concept. This project also uses the React Hook useState and useEffect to implement the concept of state and side effects. For UI, this project uses Tailwind CSS. The API development follows the RESTful standard and API Minimum guidelines. The project should have well documentation on README in GitHub covering project overview, features, installation, and database schema.

Architecture & Scope

1. Develop a Tokopedia Play clone as per provided wireframes and guidelines.
2. Choose a UI library (e.g., ChakraUI, MaterialUI) to enhance aesthetics and user experience.
3. Create a minimum of 5 promotional YouTube videos for product sales.
4. Implement two main pages: Home and Video Detail Page.
5. Display a list of videos with YouTube thumbnails on the Home page.
6. Enable users to navigate to video detail pages by clicking on videos.
7. Video Detail Page should include: list of products, embedded YouTube video, list of comments, and comment submission form.
8. Comments require user's name and comment input.
9. Display submitted comments in the list comment section after successful submission.
10. Follow API Minimum section and restful standards for API development.
11. Set up a MongoDB database to support required APIs.
12. Create at least two custom React Hooks for enhanced functionality.
13. Utilize React Router for seamless navigation between pages.
14. Include a README covering project overview, features, installation, and database schema.