React Weather App

This repository contain a React project using the Open Weather Map API.

This project are created to a xgeeks challenge.

? What you will found?

You can found the folders below:

├── public
└── src
    ├── assets
    │   ├── styles
    │   └── media
    ├── components
    ├── contexts
    ├── pages
    │   └── Main
    └── shared
        ├── @types
        ├── hooks
        ├── services
        └── utils

? Details

public: files you want each user can access, like images, favicon, etc.

src/assets: on this folder I save my global styles (global.scss) and project media (SVG files, images, …)

src/components: all the components to this project

src/contexts: in some applications I use contexts, so this folder is for them

src/pages: usually I use react-router-dom package, and for that, the Main/index.tsx is the file with all routes, and to each page I create another folder and respective files in src/pages

src/shared/@types: you can imagine that is the folder to storage all the types created for this project (yes, I use Typescript!)

src/shared/hooks: folder to storage custom hooks

src/shared/services: folder to storage external services, usually with axios package

src/shared/utils: common functions, regex’s, etc.

? Files

In this boilerplate you can found this initial files:

.webpack.config.js: Webpack config to run the web server and build the project

.dockerignore, Dockerfile and docker-compose.yml: files related with Docker (if you want create a container) In this case, I create only the image to run a dev server (not a build server)

.prettierrc and .prettierignore: Prettier configuration files;

tsconfig.json: My configurations to TypeScript (I use baseUrl option to clean the imports)

⚔️ Original Challenge

If you have interest on details about the original challenge you can see the file.

? Final Result



Add a new City

add city

Remove one City

remove city

View City Weather for the next 7 days


View more details about specific day

day details

? To Do / Improvements

  • Make the app responsive
  • Add Docker configuration files
  • Use Redux
  • Create tests
  • Add ESLint

??‍? About Me

Daniel Sousa @TutoDS Daniel Sousa @TutoDS

Facebook Twitter

LinkedIn Instagram