FlixFinder 🍿

Overview

This day and age we’re often overwhelmed by all the options at our fingertips, and FlixFinder hopes to relieve the stress of having to find something new to watch at the end of a long workday. FlixFinder generates a random movie recommendation for users based on their favorite genres and interests. It aims to simplify the movie selection process by providing personalized suggestions from vast streaming platform libraries.

Demo

Features

• Create new user
• Log in for existing users
• Set/update user's favorite genre(s)
• Be provided a random movie based on the user's favorite genres, the streaming platforms it's available on, and an AI generated summary of all user reviews
• Users can browse, create, edit and delete movie reviews
• Responsive and accessible app built using React and React Bootstrap

Technologies

Frontend

• React-Vite template
• React Bootstrap: styling of components
• Fetch API: makes HTTP requests to the backend
• Render: used to deploy FlixFinder on the web

Backend

• Express.js: A Node.js framework for setting up the server and handling HTTP requests
• Postman: API testing and development software for HTTP requests
• Node.js: JavaScript environment used to run the Express server
• Cors: Middleware to handle Cross-Origin Resource Sharing
• Dotenv: Hides sensitive environment variables
• PostgreSQL: Database management system

APIs

• Streaming Availability API
• GPT Summarization

Testing

• Jest
• React Testing Library

Installation

Pre Requisites

• Node.js (which includes npm): Download Node.js
• Git (for cloning the repository): Download Git

Steps

1. Clone the repo
   git clone https://github.com/stmcpeters/FlixFinder
cd flix-finder
2. Set up the backend

• Navigate to the server folder
• Install backend dependencies: npm install
• Create a .env file in the server directory and add your environment variables, such as database port and/or API key (see .env-sample for example)
• Import and configure dotenv in your server.js file:
  import dotenv from 'dotenv';
dotenv.config();
  

3. There are two ways to restore the DB dump file the project already contains:

A- If you have postgres set up postgres with an User:

• just run the command psql -U postgres -f db.sql. Make sure that you have your Postgres password on hand. The psql console will ask for your password.

B- If your initial configuration of postgres doesn't require a User:

• just run the command psql -f db.sql

7. Inside your server folder, open the file .env.example and copy the correct option for your configuation found there to your new .env file.

Here is what your .env might look like:

DB_URL="postgresql://localhost/flix-finder"

For this template, the name of your db should be flix-finder.

⚠️ If you don't see a flix-finder db, you can create one. From the terminal, navigate to the psql command line with psql and type create database flix-finder; - don't forget the semicolon!! ⚠️

• Start the server using: npm start

4. Set up the frontend:

• Navigate to the client folder
• Install dependencies: npm install
• Start the React development server using npm run dev

5. Sign up/log in to get your own free API key from Streaming Availability API
6. Sign up/log in to get your own free API key from GPT Summarization

API Endpoints

• GET /db/users: retrieves all user data

• POST /db/users: creates new user

• DELETE /db/users/:id: deletes a user by ID

• GET /db/reviews: fetches all reviews

• POST /db/reviews: creates new review

• PATCH /db/reviews/:id: edit review by review ID

• DELETE /db/reviews/:id: delete review by ID

• GET /db/reviews/:movieid: fetches reviews by movie ID

• GET /db/recent: fetches top 3 most recent reviews sorted using creation timestamp

• GET /genres: fetches all genres from genre table to populate genre selection dropdown

• GET /db/user-genre/:userId:: returns all genre preferences for a specific user using their user ID

• GET /movies: fetches popular/most recent movies

• GET /movies/<selected-genres>: fetches movies that match the genres the user has selected

• POST /summarize: uses GPT Summarization AI to summarize text

Stretch Goals/Nice-to-Haves

• auth0 sign in for users
• add movies to watched/favorites list
• comments on user reviews

Contributing

Contributions are welcomed to this project! If you have an idea for a new feature or a bug fix, please open an issue or a pull request.

License

This project is licensed under the MIT License.

Pitch Submission

Trello Board