Drama Nexus Web Application

K-Drama Database Application

View website

The Korean wave, or Hallyu, has seen global success with hits like Gangnam Style and Squid Game. K-dramas and K-pop have grown immensely in popularity, especially during lockdown. However, finding the right K-drama can be overwhelming with so many options. Drama Nexus is a database tailored for K-drama enthusiasts, offering reviews, ratings, and personalized recommendations that can help with this. Users can explore shows by top picks, new releases, or even try a "Random Pick," while sharing their thoughts and engaging with the community. It’s the perfect platform for discovering and discussing all things K-drama.

This was my capstone project created for Digital Futures' Software Engineering course. From wireframing, planning the architecture to developing the application, I completed the whole project within 2 weeks.

Built with MongoDB, ExpressJS, ReactJS, NodeJS

Visit Website

Architecture

The application uses an n-tier architecture to separate functionality:

Presentation Tier (User Interface): The frontend where users interact, displaying drama information and processing input.

Logic Tier (Business Logic/REST API): The logic tier handles the core functionality of the application. A REST API built with ExpressJS that handles business logic, communicating between the user interface and the database.

Data Tier (Database): MongoDB stores user and drama data, retrieved and processed by the logic tier before being displayed on the frontend.

This layered architecture allows each tier to operate independently, making the system easier to manage, update, and scale.

architechture

Tech Stack

The application is built with the MERN stack (MongoDB, ExpressJS, ReactJS, NodeJS). This stack was taught during my time on the Digital Future's Software Engineering course, which I wanted to utilise the knowledge and implement it in my capstone. It also enabled faster application development.

Styling was done with TailwindCSS library, helping create a beautiful UI of components.

It's been populated with dramas from TMDB API (The Movie Database), where I remapped the information to my own database to make it work for my needs.

The project was then deployed on Render and Netlify.

techstack

User Stories

Users stories were created to provide a comprehensive outline of the features and functionalities Drama Nexus will offer, ensuring the platform caters to the needs of both regular users and admin users while maintaining security, usability, and a niche focus on Korean dramas.

They were also used in a kanban board to help structure and manage my development process.

userstories

Wireframes

Wireframes were created using a Miro board to help guage a user's journey as well as what pages and components I required in my React App.

Home: Main landing page when users first enter the site, holds carousel of latest/popular dramas, top 10 drama list, new release/highlight drama and small about us section.
Explore Page: More insight into Top 10 list with detailed cards with short synopsis of drama.
Drama Profile Page: Profile page for dramas, listing detailed synopsis of drama, more details and also cast list. Reviews from users are also shown here.
Member Profile Page: Detailed profile page of member which shows their name, when they joined and also their reviews of drama titles.
Member Watchlist Page: List of mini cards of dramas that user has added to their to watch list.
Login Page: Form capturing email and password of member.
Sign Up Page: Form capturing basic information to create a member account.

wireframes1
wireframes2
homepage full
explore page
dramacast page
login page
dramapage
profilepage
watchlistpage
addreviewpage

A beautiful, user-friendly website was developed, in a very tight deadline, that allowed users to view information on k-dramas and create their own account to add their own reviews or create a watchlist for all dramas available on the site.

Future potential improvements to the application include:

  • Adding a searchbar on the site for users to be able to locate and find dramas easily.
  • Admin user access, where they can add and remove dramas.
  • Creating bio pages for actors.

See project on GitHub