🎬 Filmore

A full-stack movie & TV show streaming platform, inspired by Netflix.

Built with Spring Boot (REST API) and Angular (SPA), Filmore lets users browse a video library, search and filter content, manage a personal watchlist, and — for admins — manage videos and users through a dedicated admin panel.

---

📖 Table of Contents

• About
• Features
• Tech Stack
• Project Structure
• The Database Scheme
• Getting Started
  • Prerequisites
  • Backend Setup
  • Frontend Setup
• Environment Variables
• API Overview
• Screens
• Contributing

---

📌 About

Filmore is a full-stack web application for browsing, discovering, and organizing movies and TV shows. It's composed of two independent projects living in the same repository:

Folder	Description
filmore	Spring Boot REST API — authentication, video catalog, watchlist, user management
filmorefe	Angular single-page application — public site + admin dashboard

The project was built to practice designing a production-style architecture: secured REST endpoints, role-based access control, paginated/searchable resources, and a responsive Angular client consuming it all.

---

✨ Features

🙋 For Viewers

• Browse a searchable, paginated video library (movies & TV shows)
• View video details (title, description, poster, etc.)
• Add / remove videos from a personal watchlist ("Favorites")
• Search the catalog and the watchlist by title or description
• Secure sign-up / sign-in with email verification

🛠️ For Admins

• Dedicated Filmore Admin dashboard
• Full video library management (upload, edit, organize content)
• User management — view and manage registered users
• Role-based access separating USER and ADMIN capabilities

🔐 Platform-wide

• JWT-based authentication & authorization
• Role-based route/endpoint protection (Spring Security)
• RESTful, paginated, and searchable API design
• Clean separation between public site and admin panel in the Angular app

---

🧰 Tech Stack

Backend (filmore)

• Java 17+
• Spring Boot 3.x
• Spring Security + JWT
• Spring Data JPA / Hibernate
• MySQL / PostgreSQL (relational database)
• Maven

Frontend (filmorefe)

• Angular 21 (standalone components)
• TypeScript
• Angular Material (dialogs, snackbars, etc.)
• RxJS
• SCSS / CSS

---

🗄 The Database Scheme

---

📁 Project Structure

Filmore/
├── filmore/                  # Spring Boot backend
│   ├── src/main/java/com/azim/filmore/
│   │   ├── controller/       # REST controllers (Video, Watchlist, User, Auth...)
│   │   ├── dao/              # Spring Data JPA repositories
│   │   ├── dto/
│   │   │   ├── request/
│   │   │   └── response/     # MessageResponse, PageResponse, VideoResponse...
│   │   ├── entity/            # User, Video, Role, ...
│   │   ├── enums/             # Role, etc.
│   │   ├── security/           # JWT filters, auth config
│   │   ├── service/            # Service interfaces
│   │   ├── serviceImpl/        # Service implementations
│   │   └── util/               # PaginationUtils, ServiceUtils, ...
│   └── pom.xml
│
├── filmorefe/                # Angular frontend
│   ├── src/app/
│   │   ├── admin/             # Filmore Admin dashboard (video & user management)
│   │   ├── core/              # Services (video, watchlist, auth, error-handler...)
│   │   ├── features/          # Public-facing pages (home, watchlist, auth...)
│   │   ├── shared/             # Shared components, models, pipes
│   │   └── environments/
│   ├── angular.json
│   └── package.json
│
└── README.md

Folder names above reflect the current package layout observed in the repo; adjust as the project evolves.

---

🚀 Getting Started

Prerequisites

Make sure you have the following installed:

• Java 17+ and Maven
• Node.js 18+ and npm
• MySQL (or your configured relational database)
• Angular CLI (npm install -g @angular/cli)

---

Backend Setup (filmore)

1. Clone the repository

   git clone https://github.com/ma7moud3zim/Filmore.git
   cd Filmore/filmore

2. Configure the database

   Create a database (e.g. filmore_db) and update src/main/resources/application.properties (or application.yml):

   spring.datasource.url=jdbc:mysql://localhost:3306/filmore_db
   spring.datasource.username=your_db_username
   spring.datasource.password=your_db_password
   
   spring.jpa.hibernate.ddl-auto=update
   spring.jpa.show-sql=true
   
   # JWT
   app.jwt.secret=your_jwt_secret
   app.jwt.expiration-ms=86400000

3. Run the backend

   ./mvnw spring-boot:run

   The API will start at http://localhost:8080.

---

Frontend Setup (filmorefe)

1. Navigate to the frontend folder

   cd ../filmorefe

2. Install dependencies

   npm install

3. Configure the API URL

   Update src/environments/environment.development.ts:

   export const environment = {
     production: false,
     apiUrl: 'http://localhost:8080/api'
   };

4. Run the frontend

   ng serve

   The app will be available at http://localhost:4200.

---

🔑 Environment Variables

Variable	Location	Description
spring.datasource.url	application.properties	Database connection string
spring.datasource.username	application.properties	Database username
spring.datasource.password	application.properties	Database password
app.jwt.secret	application.properties	Secret key used to sign JWTs
apiUrl	environment.development.ts	Base URL the Angular app calls

---

📡 API Overview

All endpoints are prefixed with /api. Most endpoints require a valid JWT in the Authorization: Bearer <token> header.

Method	Endpoint	Description	Auth required
POST	/api/auth/register	Register a new user	❌
POST	/api/auth/login	Authenticate and receive a JWT	❌
GET	/api/videos	Get paginated / searchable video list	✅
GET	/api/videos/{id}	Get a single video's details	✅
POST	/api/videos	Upload/create a video (admin)	✅ (Admin)
GET	/api/watchlist	Get current user's watchlist	✅
POST	/api/watchlist/{videoId}	Add a video to the watchlist	✅
DELETE	/api/watchlist/{videoId}	Remove a video from the watchlist	✅
GET	/api/users	List users (admin)	✅ (Admin)

---

Screens

Landing Page: The page that comes to unlogged user in the first visit for the site.

Sign In Page: The user must use it to sign in.

Sign Up Page: If the user have no account, He/She can use this page to create a new account.

Manage Videos by Admin Page: The Admin is using this page to upload, remove, edit videos.

Upload new Video Dialog: After clicking on upload new videos this dialog will pop up allowing you to upload new video.

The dialog: The left data of the dialog.

Manage Users by Admin: In this page the Admin can browse all the users signed up in the application.

Adding user Dialog: The Admin can add a new user manually using this page.

Editing Existing User: The Admin can Edit existed user main data and assign its role to Admin but of course cannot manage the password and credential data.

User Menu: A menu that used to logout and convert to user, change password, or go to my favorites.

Logout pop up: When you click logout it gives you a logout confimation.

The home page of user: The page of videos that user got after signing in.

My favorites Page: The page of favorite movies of the user.

The video player of the movie: After playing a movie from anywhere it gets you to this video player with some options you can manage video from.

Change password: The page of changing the user password and data.

---

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

If you found this project interesting, consider giving it a ⭐!