FilmPulse

A full-stack movie and TV show discovery platform with authentication and a personalized watchlist.

Live Demo: https://film-pulse.netlify.app/

Frontend: https://github.com/gitmarah/filmpulse

Backend: https://github.com/gitmarah/filmpulseserver

---

Preview

Home

Search

Movie & TV Show Details

Authentication

Watchlist

Features

Movie & TV Show Discovery

• Search for movies and TV shows
• Browse movies and TV shows
• View detailed information about titles
• View descriptions, posters, ratings, release dates, budgets, status, and other metadata
• TMDB API integration

User Accounts

• User registration
• User login
• User logout
• Email verification
• Profile editing
• Profile image upload

Favorites / Watchlist

Authenticated users can:

• Save movies and TV shows
• View their saved titles
• Mark saved titles as watched
• Remove titles from their favorites

Each favorite belongs to the authenticated user.

Authentication & Security

FilmPulse uses JWT-based authentication.

The authentication system includes:

• Access tokens
• Refresh tokens
• HTTP-only refresh-token cookies
• Protected API routes
• Password hashing with bcrypt
• JWT verification middleware
• User-specific authorization

---

Tech Stack

Category	Technologies
Frontend	React, TypeScript, Vite
State Management	Redux Toolkit, RTK Query
Routing	React Router
Styling	Tailwind CSS, Styled Components
Backend	Node.js, Express
Database	MongoDB, Mongoose
Authentication	JWT, bcrypt
Email	Nodemailer
File Upload	Multer
Image Processing	Sharp
Cloud Storage	AWS S3
External API	TMDB API
Deployment	Netlify

---

Architecture

FilmPulse consists of a React frontend, a Node.js/Express backend, MongoDB for application data, AWS S3 for profile images, and the TMDB API for movie and TV show information.

                         ┌──────────────────┐
                         │     TMDB API     │
                         │ Movies & TV Shows│
                         └────────▲─────────┘
                                  │
                                  │
┌─────────────────────┐           │
│     FilmPulse       │           │
│      Frontend       │───────────┘
│                     │
│ React + TypeScript  │
│ Redux Toolkit       │
│ RTK Query            │
└──────────┬──────────┘
           │
           │ REST API
           ▼
┌─────────────────────┐
│   FilmPulse Server  │
│                     │
│ Node.js + Express   │
│ JWT Authentication  │
└──────────┬──────────┘
           │
      ┌────┴─────┐
      ▼          ▼
┌──────────┐  ┌──────────┐
│ MongoDB  │  │  AWS S3  │
│          │  │          │
│ Users    │  │ Profile  │
│ Favorites│  │ Images   │
└──────────┘  └──────────┘

---

Authentication

FilmPulse uses JSON Web Tokens for authentication.

Authentication Flow

1. User submits their email and password.
2. The backend verifies the credentials.
3. The server generates an access token.
4. The server generates a refresh token.
5. The refresh token is stored in an HTTP-only cookie.
6. The access token is used for protected API requests.
7. The backend verifies the JWT before processing protected requests.

User
  │
  │ Sign In
  ▼
FilmPulse API
  │
  ├── Verify credentials
  │
  ├── Generate access token
  │
  └── Generate refresh token
  │
  ▼
Authenticated User
  │
  │ Protected Requests
  ▼
JWT Verification Middleware
  │
  ▼
Protected Resource

---

Favorites

FilmPulse allows authenticated users to maintain a personal collection of movies and TV shows.

Favorite Operations

Operation	Description
Add	Save a movie or TV show
View	Retrieve the user's saved titles
Check	Mark a saved title as watched
Delete	Remove a title from the favorites

The backend uses the authenticated user's identity from the verified JWT rather than trusting a user ID supplied by the client.

This ensures that users can only access and modify their own favorite items.

---

TMDB API Integration

FilmPulse uses the TMDB API as its external source for movie and TV show data.

The application retrieves information such as:

• Titles
• Descriptions
• Posters
• Release dates
• Ratings
• Genres
• Budgets
• Status
• Other available metadata

The TMDB API key is stored in an environment variable and is not committed to the repository.

---

User Profiles

Users can manage their personal profiles.

Profile functionality includes:

• First name
• Last name
• Email
• Profile image
• Profile editing
• Email verification

Profile images are processed using Sharp and stored using AWS S3.

---

Project Structure

Frontend

The frontend is built with React and TypeScript.

Main areas include:

• Components
• Pages
• Redux state
• RTK Query API services
• Assets

Backend

The backend is maintained in a separate repository and contains:

• Controllers
• Models
• Routes
• Middleware
• Authentication
• Database configuration
• Services

---

Getting Started

Prerequisites

You will need:

• Node.js
• npm
• TMDB API key
• FilmPulse backend

Installation

Clone the repository:

git clone https://github.com/gitmarah/filmpulse.git
cd filmpulse

Install dependencies:

npm install

Environment Variables

Create a .env.local file in the project root:

VITE_TMDB_API_KEY=your_tmdb_api_key

Never commit .env.local or any file containing secrets.

Run the Application

npm run dev

---

Deployment

FilmPulse is deployed on Netlify.

Live Application:
https://film-pulse.netlify.app/

---

Related Repository

FilmPulse Server

The backend API responsible for:

• Authentication
• User management
• Favorites
• Protected API operations
• Database operations
• Profile image handling

https://github.com/gitmarah/filmpulseserver

---

Author

Abubakarr Marah

Full-Stack Developer

• GitHub: https://github.com/gitmarah
• LinkedIn: https://www.linkedin.com/in/abubakarr-marah-638648377/
• Portfolio: https://bokari.netlify.app/

---

Project Status

FilmPulse is a deployed full-stack project demonstrating practical experience with:

• React
• TypeScript
• Redux Toolkit
• RTK Query
• Node.js
• Express
• MongoDB
• JWT authentication
• REST APIs
• External API integration
• AWS S3
• User authorization
• Cloud deployment

---

License

This project was created as a personal full-stack development project.