Designed with multi-screen viewing in mind, this is a variation of the project set forth by Turing School of Software and Design. See rubric here.
Users can interact with a selection movies uploaded from a RESTful API by scrolling through images and titles of said movies. They then can click a movie to view further details and either use the back button or the provided home button to navigate to the landing page.
As a team, we decided to polish off our work to create an MVP that meets Iteration 4 requirements. We decided to deploy this site to gh pages as our stretch and reaffirm our knowledge in React, Router, & Cypress-- the three new technologies we learned and utilized in this project.
To view please:
- please visit here to interact and view
- has desktop & mobile features
Upon navigating to our landing page, users see the available movies.
Example of Mobile Experience
A user can scroll through our movies and select a movie to gain further details on that film.
Example of Mobile Experience
Example of Desktop Experience
Note: hovering abilities exist on desktop & not on mobile.
Once a user is done reading the film's details, they then can click the home icon to return the the landing page.
Example of Mobile Experience
Example of Desktop Experience
Note: hovering abilities exist on desktop & not on mobile.
If a problem with the API or perhaps the user wishes to navigate to a movie by using the url and makes a mistake, an error message will load so the user can become aware that there is a problem.
Example of Mobile Experience
Example of Cypress Experience
- React
- Router
- Cypress for Testing
- CSS
- HTML
- Flat Icon for home icon
- WAVE for accessibility auditing
- Lighthouse for accessibility auditing
- Webpack
More specifics about future work or refactoring can be found in this projects GH issues, particularly, issue #28.
Discussion about applying SCSS principals occurred at the beginning of our project. However, rather than get ahead of ourselves, we reoriented ourselves to keep the MVP in mind. A future iteration could include SCSS refactoring.
Thank you Casey Dallavalle, Justin Corbin, and Leta Keane for your guidance and advice.
If you'd like to contribute to the code, please complete the following steps:
- clone this repo locally:
git clone [email protected]:gaj23/rancid.git <renameHere> - API documentation & endpoints are here
- from there please create a new branch following this pattern:
git checkout -b initials/feature-fix/focus-of-branch - cd into your local copy and run
npm install - Have Cypress for testing
- check that the following key-value pair in
scriptsis in yourpackage.json "cypress": "cypress open"- if not please download Cypress with
npm i -D cypressand add the above toscripts. - contribute as you'd like and push up your work for review Thank you.
| Gabrielle Joyce GH | Richard Tyler GH |
 |
 |