Code Monkey home page Code Monkey logo

my-top-100-movies's Introduction

MyTop100Movies

Описание

Описание предметной области

  • Иформационный портал просмотра описаний фильмов
  • Пользователи могут авторзовываться, регистрироваться, редактировать свой профиль
  • Пользователи делятся на два типа администратор и пользователь
    • Администратор может редактировать контент портала
    • Пользователь только просмотр, оценка фильмов, добавление в любимые
  • Страница просмотра фильма, где отображается общая информация фильма и список атёров
    • На этой странице можно оценивать фильмы и лайкать
  • Страница просмотра актёров
  • Страница добавления/редактирования фильма
    • Редактирование общей информации фильма
    • Добавление/удаление актёров
  • Страница добавления/редактирования астёра

Особенности реализации

  • В качестве языка реализации был выбран TypeScript
  • Для хранения данных используется MongoDB
  • Для обмена данных между клиентом и сервером используется GraphQL
  • Реализована аутентификация через токены (хранится в Cookie)
  • Для реализации фронтенда были использованы следующие фреймворки:
    • React
    • Material UI (Styled Components)
    • ApolloClient

Реализация

Сущности
- Movie
    id: ObjectId;
    name: string;
    type: EMovieType;
    genres: Array<EMovieGenre>;
    year: number;
    totalScore?: number;
    duration?: number;
    description?: string;
    posterUrl?: string;

- Person
    id: ObjectId;
    name: string;
    gender: EGender;
    biography?: string,
    birthdate?: Date;
    birthplace?: string;
    photoUrl?: string;

 - Actor
    id: ObjectId;
    movieId: ObjectId;
    personId: ObjectId;
    role: string;

 - User
    id: string;
    login: string;
    type: EUserType,
    password: string;
    status: EUserStatus;
    email?: string;
    description?: string;

- Rate
    id: ObjectId;
    userId: ObjectId;
    movieId: ObjectId;
    rate: number;

 - Favorite
    id: ObjectId;
    userId: ObjectId;
    movieId: ObjectId;

Use Cases
 - Регистрация пользователя
 - Логин
 - Редактирование пользователя
 Под пользователем
  - Просмотр мильмов
  - Просмотр деталей фильма
  - Лайк фильма
  - Добавление оценки
  - Просмотр актёров (деталей актёров)
 Под администратором
  - Тоже самое что и пользователь
  - Создание/редактирование фильмов
  - Удаление фильмов
  - Созданеи/редактирование атёров
  - Добавление/удаление астёров в/из фильм(а)

Roadmap
 - бэкенд
   + сделать скелект проекта
   - подключить Apollo Server
   + завести фильмы
   + завести актёров
   + завести пользователей
   + связать пользователей, фильмы и астёров
   + подключить GraphQL
   + сделать аутентификацию/авторизацию через токены
   + сделать логаут
   + сделать регистрацию
   + чтение профиля
   + редактирование пользователя
   + чтение фильмов
   + чтение деталей фильма
   + добавление/удаление фильма в любимые
   + оценка фильма
   + чтение актёров фильма
   + чтение деталей актёра
   + чтение фильмов актёра
   + создание фильма
   + редактирование фильма
   + удаление фильма
   + создание актёра
   + редактирование актёра
   + удаление актёра
   + добавление актёра в фильм
   + удаление актёра из фильма
   + фильтр фильмов по строке поиска
   - перерасчёт и вывод оценки фильма
   - чтение статистики пользователя
   - добавление индексов (уникальные поля)
   - добавить сессии
   - деплой в энвайрмент
   - добавить unit-тесты
 - фронтенд
   + сделать скелект проекта
   + подключить Material UI для React
   + подключить Apollo Client
   + сделать аутентификацию/авторизацию через токены
   + сделать логаут
   + форма регистрации
   + форма редактирования профиля
   + главная страница
   + страница деталей фильма
   + попап добавление/удаление фильма в любимые
   + попап оценки фильма
   + карусель актёров фильма
   + страница деталей актёра
   + карусель фильмов актёра
   + форма создания/редактирования фильма
   + форма создания/ редактирования актёра
   + таба добавления/редактирования актёров фильма
   + фильтр фильмов по строке поиска
   - значок оценки фильма
   - статистика пользователя
   - адаптивная верстка
   - подключить стейт менеджмент (Redux)
   - добавить тесты

## Followups

К сожалению в связи с ограниченностью времени не были сделаны следующие пункты:
 - Подключение Apollo Server к бекенду
 - Добавление механизма миграций к серверу
 - Добавление индексов к бд
 - Добавление инструмента для работы с логами
 - Покрытие тестами бекенд и фронтенд части
 - Реализовать pipeline CI к GitHub с прогонами линтера и тестов
 - Деплой приложений
 - Реализовать CD по кнопке для деплоя приложения
 - Сессии пользователя
 - Перенести MongoDB в облако

Запуск проекта

Бекенд

cd server
npm run build
npm run start

фронтенд

cd client
npm run start

my-top-100-movies's People

Contributors

widewise avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.