Giter VIP home page Giter VIP logo

metube-content-manager's Introduction

METUBE content manager

Getting Started

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

Assumptions

  • 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.

Major techincal Challenges

  • 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.

Major Constraints or limitations

  • 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.

Why do we need this software?

  • 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

Total time to finish the project

  • 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

metube-content-manager's People

Contributors

wookiecookie87 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.