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. 🫡
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
tolight
, with the default beingsystem
. - I mostly used SSR, which conveniently hides the API calls in the network section. Somehow, I loved this.
-
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
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.
Error may can arise if it does so please do open an issue here. I will probably get in touch within 5 - 6hrs.