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 usereact-router-dom
package, and for that, theMain/index.tsx
is the file with all routes, and to each page I create another folder and respective files insrc/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 withaxios
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
anddocker-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 usebaseUrl
option to clean the imports)
โ๏ธ Original Challenge
If you have interest on details about the original challenge you can see the assignment.md
file.
๐ธ Final Result
Homepage
Add a new City
Remove one City
View City Weather for the next 7 days
View more details about specific day
๐งพ To Do / Improvements
-
Make the app responsive -
Add Docker configuration files - Use Redux
- Create tests
-
Add ESLint