Skip to content

Mod 3 Group Stretch Project - Self-taught TypeScript and built this React app implementing it in just over a week

Notifications You must be signed in to change notification settings

kncaputo/covid_comparisons

 
 

Repository files navigation

Contributors:

Overview

This project was an eight-day group project in Module 3 at the Turing School of Software and Design. As a stretch technology for this project, we self-taught and implemented TypeScript in our application as well as in our integration testing. Because this project was to be completed in just over a week, our MVP was lean to allow us to focus on TypeScript and testing. This project was built in the fourth week of our program after learning React.

COVID Comparisons (COCO) is an application that allows users to compare COVID-19 statistics to other diseases and historical events. The site is meant to bring some perspective to COVID-19's impact and provide users with a visual impact.

  • Lighthouse Accessibility Score: 98% for browser & mobile view

Visit the deployed page.

Tech Stack

  • TypeScript
  • React
  • Router
  • Jest
  • Sass
  • REST API

Getting Started

Download Instructions

  • Clone the repo
  • git@github.com:kncaputo/covid_comparisons.git
  • Install NPM packages
  • npm install
  • Start the application
  • npm start

To view the test suite:

  • Run npm test in your terminal

GIFS of the Working App

Navigating the homepage

Choosing a different category

Mobile view

Possible Future Iterations

  • A form for users to input their own comparison categories and data
  • A clickable map of the United States to allow users to compare data from different states

Project Goals

  1. The main objective of this project was to gain a comprehensive understanding of TypeScript
  2. Reinforce the concepts of React, including the use of React Hooks, and testing with Jest
  3. Create an application that effectively conveyed the scale of COVID-19 and its impact

Project Wins

  • We were able to achieve our MVP and then meet some additional stretch goals such as creating dynamic visual representations of the data
  • We were able to make a fully responsive app, incorporate Sass, and achieve over 93% test coverage on our functions.

Test coverage

About

Mod 3 Group Stretch Project - Self-taught TypeScript and built this React app implementing it in just over a week

Topics

Resources

Stars

Watchers

Forks

Languages

  • TypeScript 81.1%
  • SCSS 12.7%
  • HTML 5.2%
  • CSS 1.0%