Movie Recommendation App

lorrainewanjiku-ship-it

Svelte Movie Recommendation App - Capstone Project

Download

🎬 Movie Recommendation Helper

A simple, interactive web application built with Svelte that helps users discover movies to watch.

Features

Random Recommendations: Get a surprise movie suggestion with one click
Similar Movie Finder: Enter a movie you've watched and get recommendations for similar films based on genre and mood
Clean, Modern UI: Responsive design with smooth animations

Tech Stack

Svelte - Frontend framework
Vite - Build tool and development server
JavaScript - Programming language
CSS - Styling

Prerequisites

Before running this project, make sure you have:

Node.js (v20 or higher) - Download here
npm (comes with Node.js)
A modern web browser (Chrome, Firefox, Edge, etc.)

Installation & Setup

1. Clone the repository

git clone https://github.com/YOUR-USERNAME/movie-recommendation-app.git

Replace YOUR-USERNAME with your actual GitHub username.

2. Navigate to the project directory

cd movie-recommendation-app

3. Install dependencies

npm install

4. Start the development server

npm run dev

5. Open in browser

The app will be running at: http://localhost:5173/

Open this URL in your web browser to use the app.

How to Use

Random Recommendation

Click the "Surprise Me!" button
A random movie recommendation will appear

Find Similar Movies

Type a movie title in the input field (e.g., "Inception", "Parasite")
Click "Find Similar" or press Enter
The app will suggest a similar movie based on genre and mood

Project Structure

movie-recommendation-app/
├── src/
│   ├── App.svelte          # Main application component
│   ├── main.js             # Application entry point
│   └── app.css             # Global styles
├── public/                 # Static assets
├── package.json            # Project dependencies
├── vite.config.js          # Vite configuration
├── TOOLKIT.md              # Learning documentation
└── README.md               # This file

Building for Production

To create a production-ready build:

npm run build

The built files will be in the dist/ folder.

To preview the production build locally:

npm run preview

Learning Resources

For more information about the technologies used:

Capstone Project

This project was created as part of a capstone assignment to learn a new technology using AI-assisted learning. For detailed documentation about the learning process, see TOOLKIT.md.

Author

Lorraine Heho

Created: November 27, 2024

License

This project is open source and available for educational purposes.

Top categories