https://github.com/tutods/react-weather-app
React application using OpenWeatherMap API and Material UI to styling
https://github.com/tutods/react-weather-app
axios docker docker-compose hooks material-ui openweathermap-api react react-context react-context-api
Last synced: 2 months ago
JSON representation
React application using OpenWeatherMap API and Material UI to styling
- Host: GitHub
- URL: https://github.com/tutods/react-weather-app
- Owner: tutods
- Created: 2022-03-11T15:37:57.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-12T21:33:59.000Z (over 4 years ago)
- Last Synced: 2025-04-13T11:50:34.919Z (about 1 year ago)
- Topics: axios, docker, docker-compose, hooks, material-ui, openweathermap-api, react, react-context, react-context-api
- Language: TypeScript
- Homepage:
- Size: 4.36 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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:
> **`.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 [`assignment.md` file](./assignment.md).
📸 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
- [x] ~Make the app responsive~
- [x] Add **Docker** configuration files
- [ ] Use **Redux**
- [ ] Create tests
- [x] ~Add **ESLint**~
🧑🏻💻 About Me
[facebook]: https://facebook.com/tutods2014
[twitter]: https://twitter.com/tutods
[youtube]: https://youtube.com/tutods2014
[instagram]: https://instagram.com/dsousa_12
[linkedin]: https://www.linkedin.com/in/daniel-sousa-tutods/
[gitlab]: https://gitlab.com/jdaniel.asousa
[
][facebook] [
][twitter]
[
][linkedin] [
][instagram]
[
][youtube] [
][gitlab]
