Welcome to moobie codebase, i guess you liked the project?

Please give this repo a star ⭐️

Why I created Moobie? 🤓

My main motive was to learn server-side rendering in Next.js and how it differs from client-side rendering. Creating a clean UI/UX web application is my hobby, and what I wanted was to provide content to users without any annoying ads and pop-ups.

    Open for new ideas. 🫡
  

Workflow of moobie.

There is a backend that is scraping a website for the desired details; most of the complexity is working behind the UI. The backend is merged with a consumetApi to retrieve streaming links and show them to the user.

• Backend

  • Scraping a website to retrieve desired details such as image source, title, etc.
  • Collecting them into an array of objects.
  • Creating a route that returns those details.
  • Creating the backend was a new experience for me, but it felt kind of easy, though not entirely.
  • The main issue I encountered was during deployment 😅.

• Frontend

  • Yellow theming, as I am not a great UI designer, but I still managed to make it look aesthetic and clean with full screen responsiveness.
  • A good-looking landing page for new users to understand briefly why I created Moobie.
  • I personally love to add the toggle theming from dark to light, with the default being system.
  • I mostly used SSR, which conveniently hides the API calls in the network section. Somehow, I loved this.

Installation.

Important

I'm not sure if you should clone it or not since it uses the scraper I created. But if you're interested in learning how UI/UX works, then go for it.

• Clone the moobie repo through terminal.

  git clone https://github.com/Zeddxx/moobie.git

• Get into the folder.

  cd moobie

• Install the required dependencies.

  npm install or yard add

• Run the project.

  npm run dev

TODO

Feature that i have yet to implement.

• Beautiful landing or marketing page.
• Navbar
  • Theme selector.
  • Search functionality.
  • Resposive hamburger.
    • As there are currently not many pages, I have not yet made it work.
• Skeleton loader.
  • Skeleton loader for home page.
  • Loader for info page.
  • Loader for Watch page.
  • Loader for search page.
• Authentication.
• SEO implementation.
• Moobie player.
  • Add desired theme UI.
  • Next and Previous button to navigate episodes.
  • Add the datails into currently watching.

Have an issue?

Error may can arise if it does so please do open an issue here. I will probably get in touch within 5 - 6hrs.

Future plans

After completing this project, I will dive into my last project that is on my mind. So, if you guys have any ideas and want to create something together, count me in. If I get busy in the future, I will make this repo open source, so it's up to you guys to maintain it 🥺.