Neatflix is a movie review web application that pulls in data from a movie API and displays the results to the user. The target user ranges from cinephile to casual movie watcher wanting to find a movie to watch based on its ratings and reviews. The user flow first shows all movies on the main page, where the user may search for a specific title. Once that title is found, the movie poster can be clicked on to view more details (depending on source data) about the film, including rating, budget, release date, and the option to view the trailer.
This paired project was created as the first React project in the third module (of four) of the Turing front-end software engineering program. This project is the culmination of gained experience and knowledge listed under the Technologies heading below.
Developed Design:
Miro Board Logic Flow:
First Draft
Agile/Scrum project board created and managed via GitHub Projects:
- Wins
- Successfully using React to create our first application
- Using Router to make a dynamic webpage that re-directs the URL path
- Learning to effectively implement Cypress to test all user views
- Challenges
- Error handling for bad URL paths
- Refactoring the project for implementing Router gave us some hang-ups
- Know what to test using Cypress, and how to test asynchronous events
- Gain competency with React fundamentals
- Learn how to test React components & asynchronous JS
- Practice refactoring
- Create a multi-page UX using Router
- React
- React Router
- Cypress Testing Framework
- CSS
- HTML
- Fetch API
- Git/GitHub
- GitHub project board
- Miro flowchart
- Excalidraw
- Effectively implement React/React Router to create an interactive web application
- Thoughfully structure React components
- User story acceptance testing
- Error handling
- Use Fetch API to make network requests to retrieve data
- Create a user interface that is easy to use and clearly displays information
- Write modular, reusable code that follows SRP (Single Responsibility Principle)
- Implement acceptance criteria testing to ensure consistent user experience
- Demonstrate DRY principles
- Utilize Agile/Scrum project management
- Fork this repository.
- Clone your new, forked repository to your local machine.
cdinto the API repository on your local machine and runnpm install, thennpm startto launch the application.- The application will automatically load and be visiible in your web browser.