GithubHelp home page GithubHelp logo

movies-explorer-frontend's Introduction

Movies Explorer

Сервис, в котором можно найти фильмы по запросу и сохранить в личном кабинете. Проект был реализован в рамках дипломной работы на платформе Яндекс.Практикум.

Tech Stack

HTML  CSS  JavaScript  React  React-router  Webpack  Git 

Demo

Стартовая страница, содержащая краткую информацию о проекте, технологиях и авторе.

start-page.gif

Основной функционал проекта вкдючает в себя возможность поиска фильмов со стороннего API и сохранение/удаление найденных фильмов к себе в аккаунт.

main-functionality.gif

При нажатии на кнопку «Регистрация» в шапке сайта на главной странице происходит переход на страницу регистрации по маршруту /signup.

registration.gif

При нажатии на кнопку «Войти» в шапке сайта на главной странице происходит переход на страницу авторизации по маршруту /signin.

login918484a1fc094a08.gif

У авторизованного пользователя в шапке сайта отображается кнопка «Аккаунт». При клике происходит переход на страницу редактирования профиля. На ней пользователь может изменить свои данные.

edit-profile.gif

При клике на кнопку «Выйти из аккаунта» происходит редирект на главную страницу и удаление JWT из локального хранилища или куки. Чтобы войти на сайт заново, пользователю потребуется повторно авторизоваться.

sign-out.gif

Backend

Backend часть проекта располагается на Github.

Installation

Клонировать репозиторий:

  gh repo clone bevuxyna/movies-explorer-frontend

Установить зависимости:

  npm install

Запустить сервер:

  npm run start

Запустить сервер с hot-reload:

  npm run dev

Guidelines for the project

Чек лист для проверки дипломного проекта.

Сторонний API BeatfilmMoviesApi

Макет проекта в Figma

movies-explorer-frontend's People

Contributors

bevuxyna 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.