Giter Club home page Giter Club logo

movie-tracker's Introduction

Movie Tracker

Movie Tracker is a React-Redux App allows a user to sign in, see the latest movies, and favorite them for later.

Focuses

  • Write squeaky clean, well refactored code using ES6 syntax.

  • Make informed design decisions to create a user-friendly application.

  • Become comfortable with different network requests like GET, POST, & DELETE.

  • Solidify concepts with React to create clean and re-useable components.

  • Become comfortable with Redux’s lifecycle, creating actions, reducers, and connecting them to React components.

  • Understand and solidify concepts with React component, asynchronous code, and Redux testing.

  • Get more practice doing network requests with a backend.

Screenshots

Data Map

  • To begin, the overall data flow and necessary components are mapped out.

Movie Tracker homepage

InVision Prototype

  • Home Page: Next, a design is implemented and basic user flow is considered.

Movie Tracker prototype all movies

Movie Tracker prototype movie

Homepage

  • A user can scroll through movies on the home page and click to view more detailed movie info by clicking on a movie, but if a user wants to favorite a movie, they will be prompted to login or sign up.

Movie Tracker home page

Movie Tracker movie page

Sign Up Page

  • A user can sign up to create an account that will allow favorites to be saved.

Movie Tracker sign up

  • If the user does not fill in all inputs, an error will appear and they will not be routed to their account homepage.

Movie Tracker sign up error

  • If the user already had an account, they can login.

Movie Tracker Login

User Logged In Home Page

  • Now a user is welcomed and the favoriting functionality is enabled.

Movie Tracker User Login Home Page

Favorite Page

  • A user can favorite movies by clicking on the star on each movie. Those movies will then appear on a separate favorites page.

Movie Tracker Favorites

  • A user can logout at any time and be returned to the main homepage.

Tech

  • This project was bootstrapped with Create React App utilizing Redux.

  • Tested with Jest/Enzyme.

  • Links using React Router.

Team

Set Up

Clone repo.

git clone https://github.com/dawnlunacy/movie-tracker.git

Install dependencies.

npm install

Run browser.

npm start

movie-tracker's People

Contributors

dawnlunacy avatar jmevans0211 avatar qfarenwald avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

Forkers

qfarenwald

movie-tracker's Issues

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.