README.md

Horror Films Frontend v1.0.2

The idea of making this web app was creating fancy looking custom styled React App using Horror Films Backend API for learning purpose.

Live

Live: https://horror-films.airm.ct8.pl/

Horror Films Backend Resources

Github: https://github.com/airfortech/horror-films-backend

Screenshot

Tech Stack

Additional Main Packages

@tippyjs/react https://www.npmjs.com/package/@tippyjs/react

@vime/react https://www.npmjs.com/package/@vime/react

gsap https://www.npmjs.com/package/gsap

react-headless-pagination https://www.npmjs.com/package/react-headless-pagination

react-image-lightbox https://www.npmjs.com/package/react-image-lightbox

swiper https://www.npmjs.com/package/swiper

Project Structure

src
├───assets
│   ├───images
│   └───music
├───components
│   ├───FilmDetails
│   │   ├───Gallery
│   │   │   ├───Modal
│   │   │   └───Picture
│   │   ├───Header
│   │   ├───People
│   │   ├───PersonInfo
│   │   └───VideoPlayer
│   ├───FilmsList
│   │   ├───Pagination
│   │   └───Slider
│   │       └───Card
│   ├───Footer
│   ├───Header
│   │   ├───LanguageSwitcher
│   │   └───Search
│   │       ├───Switcher
│   │       └───SwitcherIcon
│   ├───HOCs
│   │   └───FadeOutEdges
│   ├───MusicPlayer
│   └───Tooltip
├───context
│   └───LanguageContext
├───effects
│   ├───bats
│   └───Fog
├───languages
├───tools
└───views
    ├───FilmsView
    ├───FilmView
    ├───NoResultsView
    ├───NotFoundView
    └───ServerErrorView

Install Packages

npm install

Configure Project

/src/variables.js file. Important variables:

API Url:

export const apiDomain = "http://localhost:3001/api";

Default search params:

export const getFilmsUrlParams =
  "title=&page=1&sort_type=descending&sort_by=release_date";

Number of items you want to get:

export const getFilmUrlParams = {
  backdrops: 20,
  posters: 6,
  cast: 14,
};

Play music in background at start (true not supported in some browsers)

export const musicPlayerDefaultState = true;

Run Project

Development mode:

npm start

Build Production app:

npm run build