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