Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zeddxx/moobie
Moobie is an KDrama streaming web app which have clean UI/UX mostly runs on server side.
https://github.com/zeddxx/moobie
axios drama express korean lucide-react moobie nextjs13 nodejs react shadcn-ui ssr typescript
Last synced: 4 days ago
JSON representation
Moobie is an KDrama streaming web app which have clean UI/UX mostly runs on server side.
- Host: GitHub
- URL: https://github.com/zeddxx/moobie
- Owner: Zeddxx
- License: apache-2.0
- Created: 2024-03-22T14:59:26.000Z (10 months ago)
- Default Branch: master
- Last Pushed: 2024-09-05T17:24:15.000Z (5 months ago)
- Last Synced: 2024-09-07T03:02:53.791Z (5 months ago)
- Topics: axios, drama, express, korean, lucide-react, moobie, nextjs13, nodejs, react, shadcn-ui, ssr, typescript
- Language: TypeScript
- Homepage: https://moobie.vercel.app
- Size: 1.14 MB
- Stars: 14
- Watchers: 1
- Forks: 4
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
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
- Clone the moobie repo through terminal.
```bash
git clone https://github.com/Zeddxx/moobie.git
```
- Get into the folder.
```bash
cd moobie
```
- Install the required dependencies.
```bash
npm install or yard add
```
- Run the project.
```bash
npm run dev
```
## TODO
Feature that i have yet to implement.
- [x] Beautiful landing or marketing page.
- [ ] Navbar
- [x] Theme selector.
- [x] Search functionality.
- [ ] Resposive hamburger.
- As there are currently not many pages, I have not yet made it work.
- [ ] Skeleton loader.
- [x] Skeleton loader for home page.
- [x] Loader for info page.
- [ ] Loader for Watch page.
- [ ] Loader for search page.
- [ ] Authentication.
- [x] SEO implementation.
- [ ] Moobie player.
- [x] 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.