Git Product home page Git Product logo

moobie's Introduction

moobie banner

moobie logo

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

Please give this repo a star โญ๏ธ
typescrpt badge scrapper badge drama badge steaming badge typescrpt badge

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 ๐Ÿฅบ.

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.