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.
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>I used Node.js witch Express Fraemwork and MongoDB database to process and save data.
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/"
}You can run both use:
npm i && npm run start
