Code Monkey home page Code Monkey logo

nyt-movie-reviews's Introduction

NYT-Movie-Reviews

This application allows users to search for Movie Reviews published by the New York Times (some dating all the way back to the early 20th century!)

Setup Instructions

  • Run git clone https://github.com/MTCawthray/nyt-movie-reviews.git into the terminal of your local machine.
  • Run npm install to install dependencies
  • Run npm start to open page in the browser

Using the App

When the page first loads, the user will notice three things:

  • a header that includes a search bar
  • a list of 'Critic's Picks' articles on the left side bar
  • a New York Times watermarked logo in the display area

If a user clicks on any of the articles listed in the side bar, the display area will populate with more details about the chosen article, as well as a link to the full article on the New York Times website.

A user can search for a query with the searchbar located in the header of the App. When submitted, the results of their search appear in the side bar and a user can click on a chosen article to see the details appear in the display area, just like the aforementioned 'Critic's Picks'.

  • full screen view:

ezgif com-gif-maker

  • mobile view:

ezgif com-gif-maker copy

Future Features

  • Make the article list display a dropdown menu from the header. This will help with UI/UX, especially in mobile view.

  • End to end cypress testing for all user flows. I ran out of time for the scope of this project, but would like to add flows for searching a query, clicking on an article, and viewing the critic's picks.

Contributing

Mark Cawthray

nyt-movie-reviews's People

Contributors

mtcawthray avatar

Watchers

avatar

nyt-movie-reviews's Issues

Create search component and connect to API

make a controlled form in the search component, and use the value of the search to dynamically add a query to the api fetch.

Set state of 'reviews' in App component to hold the returned data from the fetch.

render list of articles to display area component

Once we have our reviews array set in the App state we can then render our list of review titles to the display area component.

Send reviews array as a prop to display area where it can be mapped over and create an array of list items in an unordered list.

Deploy app!

Deploy to either Heroku, or Surge

It could be cool to do surge, since I've not done it yet.

Setup react structure

Set up a react repo with the following components:

  • header
  • display area
  • card
  • search

Flesh out the basic jsx layout and how they will render and connect to github repo

style the display area list

layout the list of articles in a clean and intuitive way. Start to think about how to display this for mobile view! (maybe as a dropdown from the header?)

Target review in display area to render Card component

When a user clicks a list item in the display area, it will find the full review object from the reviews array and render that info in the Card component

create a method to find the review based on the event.target and use the headline to match to review. Set up method in APP component and send to display area component as a prop.

Once review is found, set state of selected review to the found review, and pass it as a prop to Card component

Add media query for mobile view

Create a mobile view for this app that accounts for users accessing this app on their phone. You may have to get creative with how the display area renders. Perhaps set it as a dropdown from the header?

Style card display

Access the properties of the review prop and layout in the card's return.

Create a nice and simple UI that mimics the actual article in the link

Test user flows in cypress!

Test for the following user flows:

  • As a user, I can type in a query in the search bar and be presented with a list of reviews that match my query.
  • As a user, I can click on a list item and be shown details about that review.

Add content to landing page

before a user searches for reviews, they see a header then a ton of blank space.

Create some content (instructions, facts page, featured review, etc.) that displays on page load and fills out the space.

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.