Skip to content

Latest commit

 

History

History
83 lines (56 loc) · 3.68 KB

README.md

File metadata and controls

83 lines (56 loc) · 3.68 KB

Rancid Tomatillos

A 2-week pair project by Eric Wang and Eddie Krupicka

Screen Shot 2021-12-13 at 11 21 48 PM

Screen Shot 2021-12-13 at 11 15 23 PM

Screen Shot 2021-12-13 at 11 17 09 PM

Contents

  1. Overview
  2. Wins and Challenges
  3. Goals
  4. Technologies
  5. Demo

Overview

Rancid Tomatillos is a Module 3 project in Turing School of Software and Design's front-end engineering curriculum. Our goal was to build a movie ratings website in React, populated with movie data and images from a provided API. Our basic deliverable was a web application that correctly displayed all movies in the API, but we decided to go above-and-beyond and implement some stretch features such as search, sorting by genre, and a banner of randomly generated movies. In addition to React, we used Router, and Cypress for testing. To stay organized when we were coding independently, we used a GitHub project board to track and assign issues.

Design, usability, and accessibilty were important to us in this project. Our designs lived in a Figma file, and we did careful planning and prototyping in Figma before we did any coding. Below is an example of how the main page of our application evolved over several iterations:

rancid iterations

Wins and Challenges

Challenges

  • Learning React, Router, and Cypress while building this application involved a lot of self-teaching and research
  • Working with React state, props, hooks, and asynchronous JavaScript
  • Filtering movies by genre
  • Remembering to sleep and stay hydrated

Wins

  • Designing a modern, user-friendly, and accessible website
  • Working independently while keeping a consistent and clear line of communication through Slack and our project board
  • Reaching compromise respectfully when disagreements over design or code architecture arose
  • Embedding video within our site

Goals

The project's goals, listed below in an abbreviated form, are taken directly from the Turing project write-up:

- Use OOP to drive the design of the application and the code
- Work with an API to send and receive data
- Solidify the code review process
- Create a robust test suite with Cypress that thoroughly tests all functionality of a client-side application
- Special consideration around accessibility and usability on devices. Lighthouse accessibility audit is at a 100%
- Exceptionally well-factored code with little or no duplication. The business-logic code driving functionality is cleanly separated from rendering, view-related code. Excellent usage of fetch and updates DOM based on results of network requests. Handles all scenarios for error handling.

Technologies

  • React
  • Router
  • Cypress
  • JavaScript
  • HTML
  • CSS
  • Sass
  • Git
  • Figma
  • Fetch API

Demo

See our deployed application at: https://ewang0.github.io/rancid_tomatillos/

Back to the top