Movies explorer

Check Online

About

This movie search web application is my last final project in the course. It contains a frontend and backend. It's possible register users, find movies and save them in your favorites.

The most dificl parts of this project it was sorting films according to the specified parameters in the search with a switch to short films and saving the state of the search when reloading the page or switching to another page.

Frontend

The project is written in HTML, CSS, JSX using React Fraemwork. Data came from the backend and was sent to it through a class components using RestAPI.

One of the goals of this project was to do form validation with React. I used react hook form library:

import { useForm } from "react-hook-form";

When you can connect register, watch, errors methods and handleSubmit function.

const {
  register,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm({
  mode: "onBlur",
});

const [registrationName, registrationEmail, registrationPassword] = watch([
  "registrationName",
  "registrationEmail",
  "registrationPassword",
]);

function onSubmit() {
  handleRegister(registrationName, registrationEmail, registrationPassword);
}

They monitor the text input fields and if they do not match the pattern, they will give an error

<input
  {...register("registrationEmail", {
    required: "Enter e-mail",
    pattern: {
      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
      message: "Email must be with @",
    },
  })}
  className="register__input"
  type="text"
  placeholder="E-mail"
/>
<span className="register__errors">
  {errors?.registrationEmail?.message}
</span>

Backend

I used Node.js witch Express Fraemwork and MongoDB database to process and save data.

Deploy

The project was build on the AWS cloud using Nginx and PM2 to resume work in crash case.

  scripts: {
      "deploy": "npm run build && scp -r ./build/* ubuntu@ec2-3-72-147-222.eu-central-1.compute.amazonaws.com:/home/ubuntu/diplom/movies-explorer-frontend/"
  }

Running

You can run both use:

npm i && npm run start