Кинопоиск на минималках (frontend)

Русский | English

Учебный проект. Цель - объединение разрозненных знаний в одном цельном проекте и закрепление навыков создания приложений на React и Express

Макет в Figma

Содержание

• Функции
• Что сделано
• Планы по доработке
• Стэк технологий
• Установка

Структура проекта

• Кинопоиск на минималках (backend)
• Кинопоиск на минималках (frontend) - вы тут

Функции

Сервис похож на кинопоиск. Пользователь регистрируется, авторизуется, ищет фильмы по базе, добавляет и избранное. По избранному тоже есть поиск. Есть фильтр по короткометражкам.

Что сделано

• Настроил инфраструктуру и создал сервер на Express;
• Подключил базу данных MongoDB, создал схемы и модели ресурсов API;
• Реализовал логирование, аутентификацию и авторизацию на сервере;
• Задеплоил бэкенд на Яндекс Облако;
• Сверстал компоненты на React, портировал разметку в JSX формат;
• Описал логику и сверстал страницы регистрации, логина, редактирования профиля, сохраненных фильмов;
• Реализовал асинхронные запросы к API;
• Проработал авторизованные и неавторизованные состояния, сохранение фильмов в профиле;
• Реализовал фильтрацию фильмов на стороне клиента;
• Тестировал АПИ в Postman;
• Аутентифицировал при помощи токенов JWT;

Планы по доработке

• Перевод проекта на TypeScript для повышения надежности;
• Перевод на Redux и SCSS для упрощения поддержки и расширения;
• Изменение логики и UI для консистентного UX.

Стэк технологий

• HTML
• CSS
• БЭМ
• JavaScript
• WebPack (CRA)
• React
• Node.js
• Express
• MongoDB
• JWT
• GitHub
• VM
• Ubuntu
• Nginx
• SSL
• Postman

В работе применены:

• ООП,
• модульный подход,
• асинхронность,
• роутинг,
• хехирование паролей,
• авторизация на токенах,
• сбор логов

Установка

• Требуется Node.js версии v18.16.0
• Склонируйте репозиторий git clone git@github.com:SergeyKardashev/movies-front.git
• Установите зависимости npm install
• Запустите сервер npm run start

Этапы работы

• Бэкэнд — 1 неделя;
• Perfect Pixel верстка на JSX и CS, — 2.5 недели;
• Функциональность и JS — 2 недели;

Результаты

Закрепил навыки создания приложений на React, Express с MongoDB

IMDB on a Budget

This is my graduation project for the Web Faculty at Yandex Practicum! 🎉

The goal is to polish skills in building applications with React and Express.

Figma layout

Table of Contents

• Project Structure
• Key Features
• Stack
• Installation
• Milestones
• Roadmap

Project Structure

• IMDB on a Budget (backend)
• IMDB on a Budget (frontend) - you are here

About

A dynamic service that allows you to search for movies on demand and save them in your personal account.

What has been done

Here's a sneak peek into what went behind the scenes:

• Laid the groundwork with robust infrastructure and brought an Express server to life.
• Established a connection to the database, sculpted API schemas, and resource models to ensure seamless data flow.
• Fortified the server with sophisticated logging, bulletproof authentication, and authorization mechanisms.
• Deployed the backend magic on Yandex Cloud, ensuring reliability and scalability.
• Breathed life into the frontend with React, transforming static markup into interactive experiences.
• Crafted the user journey with meticulous attention to registration, login, profile customization, and managing saved movies.
• Mastered asynchronous magic with requests to the API, making the app responsive.
• Delved into the nuances of user experience, fine-tuning the app to distinguish between authorized and unauthorized states and enabling users to curate their movie collections.
• Implemented client-side filtering to swiftly navigate through the ocean of movies.

Project milestones

Backend — 1 week; JSX and CSS coding, Perfect Pixel work — 2.5 weeks; Functionality and JS — 2 weeks;

Stack

• HTML
• CSS
• BEM
• JavaScript
• WebPack (CRA)
• React
• Node.js
• Express
• MongoDB
• JWT
• GitHub
• VM
• Ubuntu
• Nginx
• SSL
• Postman
• API

Installation

• Required Node.js v18.16.0
• Clone the repository git clone git@github.com:SergeyKardashev/movies-front.git
• Install the dependencies npm install
• Launch the server npm run start

Result

Solidified skills in building applications with React, Express, and MongoDB.