Skip to content

A React Native phone app about codvid-19 spread situation in detailed cases and map view. 🌎 🌏 🌍

Notifications You must be signed in to change notification settings

zhou-1/codvid-app-zhou-1

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Codvid app

My Codvid-19 app has 3 main functions.

  1. Help user know each country's current situation in confirmed, recovered, death cases; user can type in the country's name to search for it. Hint: If the country you are looking for like United States, please put '-' between 2 words like 'united-states'
  2. A partial map view for showing user BU's location and show current Codvid-19 situation in the world.
  3. A report for showing user more details about current Codvid-19 situation in the world AND a dynamic map for user to see different country's total confirmed cases.

Live Demo

There is also a working version in snack, if you wanna see the details, please contact me!
demo

Set up

Download my project

git clone https://github.com/BUEC500C1/codvid-app-zhou-1.git

Files are in finalFiles folder.
Deploy my files in local React Native environment or snack online environment.
Run App.js file to get App run.

Goals

Use CODVID-19 API (Documentation using postman) to build mobile application that displays:

  1. CODVID cases per country on a MAP
  2. CODVID cases per country Live on a MAP (changes)
  3. CODVID cases per country based on a date.
  4. Summary of total cases for the world
  5. Live Summary for the World

Stretch goal:

  1. Display data per Province
  2. User can put their address and track CODVID-19 in their neighborhood (Only in countries where regional data is provided)

Process

Step 1: Setup your REACT Native Environment [Done]

Download Expo CLI
Use npm to install the Expo CLI:

npm install -g expo-cli

I will try web version - Snack.

Step 2: Build and run Hello App on emulator and phone [Done]

It is easy, just follow this link: https://reactnative.dev/docs/getting-started
Detailed code in this project can be viewed in 1. HelloApp folder.
The result image shows like below:
demo

Step 3: Develop use case to display a map [Done]

Create a location-finder App.
The dependencies for this project while we are making this project are:

  1. expo
  2. react
  3. react-native
  4. react-native-maps

Last, integrating React Native Maps in my React Native App which means that import MapView in React Native app.
Detailed code in this project can be viewed in 2. DisplayMapApp folder.
The result image shows like below:
demo

Step 4: On separate branch, exercise the CODVID-19 API (Documentation using postman) and display the data in your application as text. Be fancy! Style your results. [Done]

Version 3 is what I have done for step 4.
Firstly, my app will get today's date automatically. Then it allows user to do below 2 things:
First, user can see current global data about CODVID-19.
Second, user can type in country's name and my app will show them the report about current CODVID-19's spread situation like confirmed, deaths, recovered cases.

Current Version - version 3

Gif for version 3 result looks like below:
gif3

Previous Versions
Gif for version 2 result looks like below: Gif for version 1 result looks like below:
gif2 gif1

Step 5: Overlay the data on the maps. [Done]

Show Total Confirmed case in target place's country and updated world's virus information.
Final version for displaying multiple countries across the world look like below:
dataonmap2

Previous Versions
Gif for version 2 result looks like below: Gif for version 1 result looks like below:
dataonmap2 dataonmap

About

A React Native phone app about codvid-19 spread situation in detailed cases and map view. 🌎 🌏 🌍

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%