Movie Search Engine

https://mmoovviieess.netlify.app/

About:

🎥 This is a MERN full-stack application that pulls movie data from downstreamThe Movie Database API API, displays trending movies, and allows users to search movies by name, up-vote, and down-vote movies.

❗ This application has two separate GitHub repositories Front-End | UI and Back-End | Server, but readme file contains the same information and links for simplicity pusrposes.

Completed MVP User Stories:

• A user should be able to search movie by title and see all results mattching the search input.
• A user should be able to click through pages if more than 20 results match search input, trending movies or voted movies.
• A user should be able to see total amount of pages and total amount of found movies.
• A user should be able to click on any movie and see additional info about.
• A user should be able to up-vote or down-vote a movie and all movies that has any votes should be stored to the database.
• A user should be able to see all movies that has any votes by clicking 'voted movies' button.

Goals Achieved:

• BE server is deployed to Heroku and FE is deployed to Netlify.
• BE Express server created and connected to MongoDB.
• BE API endpoints are tested.
• FE unit tests added to all components and some integrations tests.
• Redux reducers and action creators tested.

Future User Stories and goals:

• A user should be able to filter movies by language, genre, release date, etc.
• A user should be able to login, only see personal voted movies and only be able to vote once for one movie.
• A user should be able to sort movies by date.

Future Goals:

• Implement user login and authentication.
• Implement PWA features, make app downloadable.
• Make application fully responsive, check all breaking points and fix issues.
• Add more front end integration tests and async tests, mock API calls

FE Tech Stack:

• Javascript | ES6
• React | React Hooks
• Redux | Redux Thunk
• Axios
• Jest | React Testing Library
• CSS
• Netlify CI

BE Tech Stack:

• Node | Express
• MongoDB | Mongoose | MongoDB Could Atlas
• Node Fetch
• Jest | Supertest | Nock
• Heroku

File Structure:

BE SERVER repo | Deployed API

Server

• Server Setup
• Express App Setup
• Routes
• Controllers
• Downstream API Network Calls

Database

• Mongoose Connection
• Movie Model

API Tests

• API Endpoint Tests

FE UI repo | Deployed UI

API Calls

• API Calls to Server

Redux Setup

• Reducers
  • Movies Reducer
  • Session Reducer
  • Database Reducer
• Action Creators
  • Movies Action Creator
  • Session Action Creator
  • Database Action Creator
• Action Types

Page Components

• Movies Page

Container Components

• Form Component
• Movies Component
• Movie Component
• Pagination Component
• Header Component

UI Components

• Layout Component
• Modal Component
• Loading Spinner Component

Redux Testing

• ❗ Working on tests right now, tests will be finished before Nov 27th

React Components Testing

• ❗ Working on tests right now, tests will be finished before Nov 27th

FE Development Instructions:

• clone FE repo
• run npm i
• run npm start
• open http://localhost:3000

Running FE Test Files

• run npm test ❗ Working on tests right now, tests will be finished before Nov 27th

BE Development Instructions:

• clone BE repo
• run npm i
• create .env file and add your MongoDB connection string ATLAS_URI and TMDB_KEY Get your unique TMDB key here
• run npm start
• open http://localhost:5000

Running BE Test Files

• first make sure you have MongoDB installed locally
• run brew services start mongodb-community
• run mongo
• run use movies to switch to new movies database
• run npm test

Contributors:

• Edita Ignot