Coronatime App

Corona worldwide statistics

Table of Contents

• Prerequisites
• Tech Stack
• Getting Started
• Project Structure
• Deployment

Prerequisites

• Node JS @16.X and up
• npm @6 and up

Tech Stack

• React @18.00.0 - front-end framework
• React Router Dom @6 - fully-featured routing library
• Tailwlind Css @3 - A utility-first CSS framework
• React Hook Form @7 - easy form validation
• React dotenv - environment variables
• React i18next - internationalization framework

Getting Started

Clone repository

1. First of all you need to clone Covid repository from github:

git clone https://github.com/ibotchori/coronatime.git

2. Next step requires install all the dependencies.

npm install

How to setup environment variables

We use environment variables heavily in our projects. It allows us to have personalized configurations, but it also makes it easy to deploy our projects without having to store sensitive values in our codebase.

A short introduction to the config file

In the root of project you find example env file looks like this:

REACT_APP_BASE_URL=https://your-url/api

Create your .env file in the root of project and copy everything from .env.example to your .env, in your terminal type:

cp .env.example .env

After you copy everything in your env file, replace dummy urls with your own

3. After installing all dependencies and env setup you can start project

 npm start

Project Structure

├─── public   # readme assets
    ├─── locales   # global languages
├─── src   # project source codes
    ├─── assets   # project images and fonts
    ├─── components   # reusable components
         -index.js   # export default component
    ├─── helpers
        ├─── schema   # form validations
    ├─── pages      # react navigation screens
         -index.js   # export default screen
    - App.tsx   # main file
    - i18nts    # global languages configuration
    - index.css
    - index.tx
- .env.example   # env example
- .gitignore
- .eslintrc.json   # eslint config file
- .prettierrc.js   # prettier config file
- package-lock.json   # dependency manager configurations
- package.json   # dependency manager configurations
- postcss.config.js   # tailwind css configuration
- README.md   # readme file
- tailwind.config.js   # tailwind css configuration
- tsconfig.json   # typescript configuration

Deployment

npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file. For more information see the production build section.