USA Covid-19 Tracker is a mobile-first application built with React and Redux to give precise information about the virus behavior in the United States. Great transitions and user feedback made with plain CSS.

Rafael Echart

Last update: Oct 25, 2022

Overview

React.js USA Covid-19 Tracker

This application allows the public to keep track of the stadistics of the Covid-19 Pandemic in the United Stated. You will be able to have favorite states to find them more easily using the 🔍 search filter.

More Screenshots

📋 Search Filter

Quality of screenshots is lower than the actual APP

Live Link & Video

Live Link: Netlify

Explanation Video

Built With

React js
Redux
Covid-19 API
Civil Service USA
Ant Design
React-icons
Linters: Stylelint and Eslint

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

Node js installed
Visual Studio Code (or any other code editor)
Terminal
Browser of your preference

Setup

git clone https://github.com/RafaelEchart/React_USACovid19Tracker.git
cd React_USACovid19Tracker

Install

Inside of your directory run the following commands:

npm install
npm run start

Usage

After ther 'npm run install' the browser will open with the React.js app

Run tests

Check that all the tests are correctly passed 🤝

Merge

Merge it with your main branch so we can all see your work!! 🤝

Author

👤 Rafael Echart

GitHub: @rafaelechart
Twitter: @rafaechart

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

Thanks to Nelson Sakwa for creating this amazing layout ⭐️
Rafael Echart
Microverse documentation ⭐️

📝 License

This project is MIT licensed.

Redux-todos - simple react, redux todos

Redux Todos Please star this repo if you like ⭐ It's motivates me a lot! Getting Started This project was bootstrapped with Create React App. Stack Av

Jul 29, 2022

Handle and dispatch transition states from anywhere in the application.

Transitions manager Transitions manager allows to handle and dispatch transition states from anywhere in the application. Installation npm i @cher-ami

Dec 15, 2022

Joke feedback interface that prevents unconstructive criticism

Feedback Sentiment Try it out! I always love and welcome constructive criticism, but when "feedback" becomes unconstructive and borderline insulting..

Nov 30, 2021

Built a covid-19 trcaker app using React.js implementing hooks and materail UI

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 21, 2021

Shows how React components and Redux to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications.

Feb 1, 2022

Rocket Bank is a finance mobile app built for XP Mobile Challenge.

Rocket Bank is a mobile application made with React Native. You can track your portfolio performance, make deposits and withdrawals, and buy and sell

Jul 27, 2022

Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

Jan 8, 2023

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Module SonarCloud Status ag-grid-community ag-grid-enterprise AG Grid AG Grid is a fully-featured and highly customizable JavaScript data grid. It del

Dec 30, 2022

Income Expense Tracker is a user based income-expense tracking system featuring budget planning and statistical analysis.

Income-Expense-Tracker Features Income Expense Tracker is a user based income-expense tracking system featuring budget planning and statistical analys

Oct 6, 2022

Comments

Capstone React & Redux App - Covid 19 Tracker
Milestone Review:

Explanation Video

Live Link: Netlify

Interactions

Home page

When the page loads, the web app shows the list of categories that could be filtered by name of State and the Favorite States

Along with the state's name, I displayed numeric values about the total cases of covid per State that came from the API.

When the user clicks (or taps) on a State card, the application navigates to the details page.

Details page

On the details page, the web app retrieves data from the API to show detailed data on the state page.

When the user clicks on the "Back" button (<), the user navigates to the home page.

Testing

Created unit tests for pure functions in Redux code.

Created integration tests for applications using the React Testing Library.

I mocked the access to the API so that your tests don't send actual requests.

I mocked the connection to the Redux Store.

Technical requirements

The project is a single-page application (SPA) built with React and Redux.

The data is retrieved from the API and stored in the Redux store.

Filter the data that is retrieved from the API using a Filter stateless component.

Every page (the main page and the pages for each item) should have a unique route within the SPA.

The project is deployed and accessible online (added a link to the online version of the app to the README file).
opened by RafaelEchart 1