Project Context: University Course Project
Version: 1.0 (Frontend)
Moodie is a Next.js-based frontend application designed for users to recommend, rate, and review movies based on the user's mood. This repository holds the modern User Interface (UI) built with TypeScript and Tailwind CSS, featuring user authentication, content exploration, review forms, and playlist management.
- Authentication: User login and sign-up with protected routes and token-based authentication (via cookies).
- User Dashboard: Summary of personal reviews and playlists.
- Movie Exploration: Browse movies, access detailed film pages, and search functionality.
- Review System: Users can write reviews, apply star ratings, and use an emoji picker.
- Playlist Management: Create and manage personal movie watchlists/playlists.
- API Integration: Configured Axios with an Interceptor to automatically handle authentication tokens and manage 401 Unauthorized responses.
- Modern Styling: Utilizes Tailwind CSS and accessible components from Radix UI.
The project is built upon the following key technologies:
| Category | Technology | Description |
|---|---|---|
| Framework | Next.js 15+ (App Router) | React framework for routing and server capabilities. |
| Language | TypeScript | Ensures type safety throughout the application. |
| Styling | Tailwind CSS 4+ | Utility-first CSS framework for rapid UI development. |
| Forms | React Hook Form & Zod | Efficient form state management and schema validation. |
| HTTP Client | Axios | Configured with Interceptors for streamlined API communication. |
| UI Primitives | Radix UI | Accessible and unstyled component primitives. |
- Node.js (version 18 or higher is recommended).
- A package manager (npm, yarn, or pnpm).
- Access to the required Backend API instance.
-
Clone the repository and navigate into the project directory:
git clone https://github.com/OceanCharlie/Moodie.git cd Moodie -
Install project dependencies:
npm install # or pnpm install -
Configure environment variables by creating a
.env.localfile:# .env.local NEXT_PUBLIC_API_URL=your_backend_api_url_here
To start the development server:
npm run devThe application will be accessible at http://localhost:3000
The program utilizes the App Router structure and the following logical directories for organization:
| Directory | Description |
|---|---|
src/app |
Contains all Next.js routes, including authentication ((auth)) and protected dashboard routes (dashboard). |
src/components |
Reusable UI components and utilities (e.g., sidebar, user-dropdown). |
src/lib |
General utilities, including core axios.ts setup. |
src/model |
TypeScript interfaces and types for domain entities (User, Movie, Review, Playlist). |
src/middleware.ts |
Next.js middleware responsible for route protection and token checks. |
- API URL:
The base API URL is referenced by the NEXT_PUBLIC_API_URL environment variable. - Authentication Flow:
The custom Axios instance in lib/axios.ts automatically attaches the authentication token from cookies to outgoing requests and handles automatic redirection to /login upon receiving a 401 Unauthorized status code from the server. - Code Quality:
ESLint is configured to maintain code consistency and quality.
| Script | Command | Purpose |
|---|---|---|
dev |
npm run dev |
Runs the Next.js development server. |
build |
npm run build |
Compiles the application for production deployment. |
start |
npm run start |
Runs the production-ready application (must be run after build). |
lint |
npm run lint |
Executes ESLint against the codebase. |
This project was developed as part of a university course requirement.
The Backend API that powers this application was developed separately and is crucial for the functionality of this frontend. Special credit is given to:
- Nathangintat - Backend Developer (Developed the API using Golang).
The source code for the Backend API can be found here: Moodie Backend Repo.