Table of Contents

1. What is this app?
2. Installation
3. Build
4. Tests
5. Env variables
6. Github actions
7. TODOS
8. TMDB api
9. Fullstack open

What is this app?

Kinology is a web app that helps you decide which movie you should watch. You can search for movies either through a simple title-based search, or through a detailed search based genre, year of release, actor, rating and other parameters, greatly simplifying choosing what to watch this evening.

You can also create your own account, to which you can then add movies you've already seen, your favorite movies or movies you would like to watch. And you can also comment on movies and other users' profiles.

The frontend for the app was built with React, with a lot of styling based on MUI components, and it is responsive and mobile friendly. Backend was built with Node and it utilizes MongoDB to store data.

You can check out the production version of Kinology here

Link to the timekeeping document.

Diagrams

The diagrams available in the folder .diagrams contain some preliminary mockups of what the app was going to look and function like prior to actually starting the development. While some details are different from the final result, most of the functionality was implemented.

Installation

In order to run this app on your machine, you will need to have Node, Vite and npm installed.

Then after cloning the repository, install the frontend dependencies by running:

# Change to frontend directory
cd kinology_frontend

# Install dependencies
npm install

# Run the frontend in development mode
npm run dev

Then, go back to the root of the project, and install backend dependencies by running:

# Change to backend directory
cd kinology_backend

# Install dependencies
npm install

#Run the backend in development mode
npm run dev

The above commands will start the app in development mode, and will watch out for changes in code.

Build

In order to build the application, change to kinology_backend directory cd kinology_frontend and run:

# Build the app
npm run build:ui

# Start app in production mode
npm run start

Tests

There are currently 219 tests in total. 90 Frontend unit tests, 75 backend integration tests, and 54 e2e tests.

Unit tests

Frontend components are tested using unit tests using vitest and react testing library. To run them, change to kinology_frontend directory cd kinology_frontend and run:

npm test

Integration tests

Backend apis are tested using integration tests. To run them, change to kinology_backend directory and run the following command:

npm test -- ./tests/comments_api.test.js &&
npm test -- ./tests/login_api.test.js &&
npm test -- ./tests/movies_api.test.js &&
npm test -- ./tests/users_api.test.js

or, alternatively, you can run the above commands one after the other. Unfortunately, as the tests use the database, they crash when executing them in parallel, hence why npm test is not an option here. Additionally, refrain from running backend tests and e2e tests at the same time, as due to database usage there will be conflicts. Same goes for running tests locally at the same time as github actions. A fix might be coming in the future.

E2E Tests

E2E tests were built using Playwright and the code is available in the root directory in tests folder.

You can run e2e tests by running the following command in project directory:

npm run test:e2e

If you would like to run e2e tests with ui, run the following command in project directory:

npm test -- ./tests/refactoredSpecs --ui

Github actions uses test file CI_kinology.spec.js, however, while running tests locally I recommend using the folder refactoredSpecs inside the tests directory. It contains the same tests as the CI_kinology.spec.js, but refactored into separate smaller specs. Unfortunately, at the moment of writing, refactored specs are failing in github actions, and due to the fact that my account is currently very close to limit of Github actions, I am unable to do enough trial and error to get Github actions to work with refactored e2e tests. This is the reason for this workaround. A fix is possibly coming in the future once the limits for github actions resets.

Env variables

If you want to run the project locally, you will need to create a .env file in kinology_backend directory.

Environment variables used in this project are the following:

Github actions

Kinology uses Github Actions to automate various tasks.

Workflows are available in the .github/workflows directory.

Workflows

Name	Description and Status
Deployment pipeline	Includes building, linting, tests and deployment to Render.
Healthcheck	Checks if the app is running and available on Render.

TODOS

Implement React Query for communication with backend

Login/Registration using github

Registration with confirmation

More tests

Docker

TMDB api

Kinology uses TMDB api to implement movie searching functionality. Big thanks for the awesome api and easy to understand documentation!

Fullstack open

This project is my submission for Fullstack project, worth 10 credits. I completed it as a part of the Fullstackopen course.