To start the project on local, navigate to the root directory and run the following command:
$ npm run dev
To change API keys, index, api url, please check .env.development
or .env.production
files
- Metube company's main needs are search and classification of their video assets. Therefore, for the first system implementation as an MVP, the main functionalities they need to experience are video listing, video search, and video classification. Once they are certain of the system, they may require other management functionalities such as video uploading, updating, and deleting.
- Metube company needs a search functionality to easily find reference videos for editing, so search results must include the filename, start and end time.
- Metube company needs a classification functionality for a broad understanding of the context of their content to plan out their future content direction. They provided us with a class group (TikTok Topics). Later on, functionalities to add new class groups will be required.
- For the time being, Metube company will maintain only one index.
- The users of this software are content editors, content managers, producers, and directors.
- Organizing types based on API response was a challenge. Component design started with defining data types needed for each component, but it took quite a bit of time because each API response had a different data structure. Based on UI design architecture, reorganizing response data to cater to UI required careful attention to detail.
- Adapting to Nextjs 13's app routing took some time. I wanted to utilize Server Components effectively, but due to my limited understanding, the components I designed were not compatible with it. Eventually, most of the components were rendered client-side. However, it was beneficial to think the concept of server components first.
- Including an API route in the frontend code had obvious pros and cons. Maintaining two interfaces for data fetching necessitated the management of two sets of endpoints and bodies, leading to considerable confusion during implementation. However, since there was a significant need for data organization, having an API route provided a separation of concerns, proving quite convenient during debugging.
- I encountered difficulties in designing reusable components because each API response had different video data. The basic video data I needed included video_id, thumbnail_url, filename, and video_url. However, each API provided different amounts of video data. For instance, the list API only provided the filename, the search API only provided the thumbnail_url, and the classify API only provided the video_id. Detailed video data was supposed to be retrieved via a separate video retrieval API. However, the varying degrees of video data in each API response made it challenging to determine the right timing to call the video retrieval API in components. This overhead caused difficulties in designing reusable components.
- The Classification API response seemed rather unintuitive. Organizing the response data according to class caused significant overhead while optimizing the list page. As I was unable to implement pagination, I listed all the classified results on the page, which involved making numerous calls to the video retrieval API simultaneously. If the index contained a large data set, this method could potentially cause serious problems.
- Managing hundreds of video contents is difficult. With this software, we don't need to watch every video and manually label and tag each one. We can simply upload the videos to the platform, and it will index each video, making search and classification easy. This software will organize all videos, saving us hundreds of hours
-
Understand our API, Playground, and its core functionality : 2 hours
-
Writing the README file : 1.5 hour
-
Setting up the project
Designing UI component architecture: 2 hours
Setting up code base : 1 hour
-
Actual Implementation of the functionalities
Video Listing : 3 hours
Video Search : 5 hours
Video Classification : 4 hours
QA/debug : 2 hours
-
Total time : 20.5 hours