Further

A full-stack movie catalog web app. Users can browse movies, view details, and leave comments. Admins get a dedicated dashboard to add, edit, and delete movies.

Live demo: further-eight.vercel.app

---

Overview

Further is split into two separate projects:

• Frontend — Vue 3 SPA (this repo), deployed on Vercel
• Backend — Node.js/Express REST API, connected to MongoDB

---

Tech Stack

Frontend

• Vue 3 (Composition API)
• Vue Router
• Pinia
• Axios
• Bootstrap
• Vite

Backend

• Node.js + Express 5
• MongoDB + Mongoose
• JSON Web Token
• bcrypt
• dotenv, cors

---

Features

• Browse and search movies by title or genre
• View detailed movie pages with poster, description, and comments
• Leave and delete comments on movies
• User registration and login with JWT authentication
• Admin dashboard to add, edit, and delete movies
• Role-based UI, admins see the management table, regular users see the browse view

---

Pages & Routes

Route	Page	Access
/	Home	Public
/login	Login	Public
/register	Register	Public
/movies	Browse / Admin Dashboard	Public (view varies by role)
/movies/:id	Movie Detail & Comments	Public

---

Project Structure

Frontend (/src)

src/
├── api.js                  # Axios instance with auth interceptor
├── main.js                 # App entry point
├── App.vue
├── router/
│   └── index.js            # Route definitions
├── stores/
│   └── counter.js          # Pinia global store (user auth state)
├── pages/                  # Route-level page components
│   ├── HomePage.vue
│   ├── LoginPage.vue
│   ├── RegisterPage.vue
│   ├── MoviesPage.vue
│   └── MovieDetailsPage.vue
└── components/
    ├── Navbar.vue           # Navigation with genre links & auth controls
    ├── Login.vue            # Login form
    ├── Register.vue         # Registration form
    ├── MovieList.vue        # Movie grid (users) or table (admins)
    ├── MovieCard.vue        # Single movie card for browse view
    ├── MovieDetails.vue     # Movie info + comments section
    └── MovieTable.vue       # Admin CRUD table

Backend

├── index.js                # Entry point (routes & server setup)
├── middleware/
│   ├── verifyToken.js      # JWT validation middleware
│   └── verifyAdmin.js      # Admin role check middleware
└── models/
    ├── User.js             # User schema
    ├── Movie.js            # Movie schema (with embedded comments)
    └── Comment.js          # Comment sub-schema

---

API Reference

Auth

Method	Endpoint	Auth	Description
POST	/users/register	None	Create a new account
POST	/users/login	None	Login and receive a JWT
GET	/users/details	Token	Get current user's details

Movies

Method	Endpoint	Auth	Description
GET	/movies/getMovies	None	Fetch all movies
GET	/movies/getMovie/:id	None	Fetch a single movie
POST	/movies/addMovie	Admin	Add a new movie
PATCH	/movies/updateMovie/:id	Admin	Update a movie
DELETE	/movies/deleteMovie/:id	Admin	Delete a movie
PATCH	/movies/addComment/:id	Token	Add a comment to a movie
DELETE	/movies/deleteComment/:id/:commentId	Token	Delete a comment

Authentication

Protected routes require a Bearer token in the Authorization header:

Authorization: Bearer <your_jwt_token>

---

Sample Accounts

Use these accounts to explore the app without registering:

Role	Email	Password
Admin	admin@further.com	admin1234
User	user@further.com	user1234

The admin account has access to the Movie Management dashboard (add, edit, delete movies). The regular user account can browse movies and post comments.

---

Data Models

User

Field	Type	Notes
username	String	Required
email	String	Required
password	String	Stored as bcrypt hash
isAdmin	Boolean	Defaults to false

Movie

Field	Type	Notes
title	String	Required
director	String	Required
year	Number	Required
description	String	Required
genre	String	Required
image	String	Optional, URL to poster
comments	Array	Embedded comment documents

Comment

Field	Type	Notes
userId	ObjectId	Reference to User
comment	String	Required