SvelteFlix is a web application developed as a Web Programming II course project, designed to help users discover, track, and organize their movie-watching experience. The application allows users to search for movies, add them to personalized watchlists, categorize them by watch status, and view detailed information about each movie.
The main purpose of this application is to provide movie enthusiasts with a comprehensive tool to:
The application integrates with The Movie Database (TMDB) API to fetch movie data. Key endpoints used:
/movie/popular
- Fetches trending and popular movies/search/movie
- Searches for movies by title/movie/{id}
- Fetches detailed information about a specific movieThe TMDB API client is implemented in src/lib/server/tmdb.ts
and handles all API requests, including:
The application provides its own API endpoints to facilitate communication between the frontend and backend:
GET /api/movies/popular
- Retrieves popular movies with pagination support
page
(optional, defaults to 1)GET /api/movies/search
- Searches for movies by title
query
(required), page
(optional, defaults to 1)GET /api/movies/[id]
- Retrieves detailed information about a specific movie
id
(movie ID)GET /api/watchlist
- Retrieves the current user's watchlist
POST /api/watchlist
- Adds a movie to the user's watchlist
DELETE /api/watchlist/[id]
- Removes a movie from the user's watchlist
id
(movie ID)GET /api/watchlist/check/[id]
- Checks if a movie is in the user's watchlist
id
(movie ID)PUT /api/watchlist/status/[status]
- Updates a movie's watch status
status
(watch status)The application uses SQLite with Drizzle ORM for data persistence. The database schema includes:
User Table
id
: Primary key (text)username
: User's username (unique, text)passwordHash
: Hashed password (text)Session Table
id
: Primary key (text)userId
: Foreign key to user (text)expiresAt
: Session expiration timestamp (integer)Watchlist Table
id
: Primary key (auto-incrementing integer)movieId
: TMDB movie ID (integer)title
: Movie title (text)posterPath
: Path to movie poster (text, nullable)voteAverage
: Movie rating (integer, nullable)backdropPath
: Path to backdrop image (text, nullable)releaseDate
: Movie release date (text, nullable)overview
: Movie description (text, nullable)runtime
: Movie runtime in minutes (integer, nullable)addedAt
: When the movie was added to watchlist (text, defaults to current timestamp)status
: Watch status (text, defaults to 'planning')startedAt
: When the user started watching (text, nullable)completedAt
: When the user finished watching (text, nullable)userId
: Foreign key to user (text)The application follows SvelteKit's recommended data flow patterns:
Server-to-Client Communication:
+page.server.ts
files that fetch data and pass it to Svelte componentsClient-State Management:
$state
for UI interactionsComponent Communication:
locals
objectCopy .env.example
to .env
and add your required credentials:
# Database Configuration
DATABASE_URL=local.db
# TMDB API Configuration
TMDB_API_KEY=your_api_key
TMDB_API_URL=https://api.themoviedb.org/3
TMDB_API_READ_ACCESS_TOKEN=your_access_token
# Install dependencies
npm install
# Setup the database
npm run db:push
# Start development server
npm run dev
npm run db:push
: Apply schema changes to the databasenpm run db:migrate
: Generate migration filesnpm run db:studio
: Open Drizzle Studio to view/edit dataThe application can be deployed to any platform that supports Node.js applications. For production deployment:
npm run build
This project was created as an assignment for Web Programming II course.