Giter Club home page Giter Club logo

better-flix's Introduction

BetterFlix

Table of Contents

Available Scripts

This project was bootstrapped with Create React App.

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Test Coverage

Test Coverage

Description

This project is a movie app that allows the user to see now playing, popular, and currently top rated movies. The user can also select a genre to see all of the recommended movies in that genre. Once the user is logged in to their account and viewing movies, they can select a movie to see more information about the movie or favorite the movie. All of their favorite movies will be stored and are viewable upon re-login. If the user does not see a movie they are looking for, they can search for a specific movie. This project was completed in a week.

Project Successes

This project required 1-2 api calls, however the modular code was build to run up to 20 different fetch calls to the moviedb to grab different sets of movie data. This increases the pleasure felt during the user experience as the user can select from a variety of movie genres. The developers implemented thunks for the first time and over half of the app has passing test coverage.

Project Challenges

Writing modular code required careful planning and strategic architecture. Creating a flat redux store also proved to be a challenge. Working through merge conflicts was tedious mostly due to text editor formatting differences. The app stlying was up to the developers whereas other projects have had a style comp, so extra effort went into creating a cleanly styled app. Lastly, keeping track of local state vs the store was a conceptual hurdle.

Project Extensions/Issues

  • Only at 72% Test Coverage
  • User Favorites need to be saved to store
  • Redesign the store
  • Change all fetchs to thunks

Project Tech Emphasis

  • HTML
  • SCSS
  • JavaScript
  • React
  • React Router
  • Redux
  • Jest
  • Enzyme
  • PropTypes
  • ES6 Classes
  • API fetches
  • Thunks Middleware
  • NPM

Project Management

The team used a project management tool, Trello, and GitHub issues to manage workflow, along with Slack to manage remote communication.

Trello Board

Trello

Project Comps:

Home Page

Home Page

Search

Search

Genres

Genres

Genre Page

Genres

Movie Card

Movie Card

Favorites

Favorites

Favorites Error

Favorites Error

Sign In

Sign In

Create Account

Create Account

404 Page

404 Page

GIFS

GIF

GIF

Developers

Patrick Goulding Katherine Lewis Jev Forsberg

Licensing

All credit goes to Turing School of Software for providing the project specifications.

better-flix's People

Contributors

pgoulding avatar kalex19 avatar baldm0mma avatar

Watchers

 avatar

better-flix's Issues

Styling

Card image sizes on home page
Condense header spacing

Favorites

Put counter on favorites so show adding favorite

createAccount

Is action in use or can we dispose of createAccount action?

Store

Needs to be flatter.
movies: {}{}{}
vs
popular: {}
now playing {}
top-rated {}
or
movies [all movies and when cleaning add genre id]
favorites[all movie ids]

Loading

Create loading component, when loading currently is false, but needs to be true

Search Button

Fix search button style & allow for search on 'enter'

Create Account

Goes right to error - I should be able to make an account

Home Page

After creating an account it should send you to the home page

Alert

Change alert on favorites to route to log in

Log in

Once they can't log in - route to create account

Favorites

Be able to delete from inside favorites page

App

Red } after component

Movie Card

Cannot click on more info and get movie card.

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.