Index

• Title
• Demo
• Hosting
• Motivation
• Development phase
• Remarks
• Tech Stack / Dependencies
• Features
• Run locally
• Authors

Kinowiki

A single page movie database, lets users search and view movies and actors information. Supports Russian and English languages. Built with next.js and the MovieDB API.

Demo

KinoWIKI

Hosting

This web app is hosted on Vercel

Motivation

This is my first full fledged project since I started learning front-end development.

It is made as a potfolio project to showcase to recruiters.

Development phase

This was not a particularily difficult project to create.

I used a combination of SSG, SSR and ISR to create the different pages and components, also used SWR which is a great tool to fetch and cache data in NextJS applications.

The most time consuming aspect of the project was figuring out the file structure, maintinaining component re-usability and applying styling/responsiveness.

Concerning the app's functionality and logic, it was pretty straight-forward in implementation. By leveraging the SSR, SSG and ISR and the MovieDB API coupled with SWR's automatic request caching, it was an overall pleasant experience and I enjoyed my time working on it.

Remarks

Some API endpoints and queries do not provide localized responses, this is why some movie titles and descriptions display in English regardless of chosen locale.

Tech Stack / Dependencies

• next.js
• react
• sass
• axios
• swr
• uuid
• svgr

Features

• Light/dark modes, persisted on page reloads
• Display language toggle with locale persistance on page reloads
• Search functionality (movies, actors)
• Pagination for movie search results (the link to the paginated results page is at the bottom of to the search result list)
• Custom 404 page
• Movies slider (top 10 trending movies)
• Responsive design (grid, flexbox)
• Sorting movies by year, genre, popularity and alphabetically

Run Locally

To run the project locally you have to provide your own MovieDB API key.

Clone the project

  git clone https://github.com/SamyZog/kinowiki

Go to the project directory

  cd kinowiki

Create .env.local file and run these commands replacing <<your_api_key>> with your own MovieDB API key:

  echo "TMDB_API_KEY=<<your_api_key>>" > .env.local

  echo "NEXT_PUBLIC_TMDB_API_KEY=<<your_api_key>>" >> .env.local"

Install dependencies

  npm install

Start the server

  npm run dev

Authors

• @SamyZog