https://github.com/tutods/chakra-weather-app
This project is created after my challenge to xgeeks interview. This time I make some changes!
https://github.com/tutods/chakra-weather-app
axios chakra-ui chakraui openweathermap openweathermap-api react typescript xgeeks
Last synced: about 1 month ago
JSON representation
This project is created after my challenge to xgeeks interview. This time I make some changes!
- Host: GitHub
- URL: https://github.com/tutods/chakra-weather-app
- Owner: tutods
- Created: 2022-04-14T18:43:41.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-04-25T10:01:36.000Z (over 3 years ago)
- Last Synced: 2025-04-07T13:37:21.722Z (6 months ago)
- Topics: axios, chakra-ui, chakraui, openweathermap, openweathermap-api, react, typescript, xgeeks
- Language: TypeScript
- Homepage: https://chakra-weather-app.vercel.app
- Size: 9.15 MB
- Stars: 6
- Watchers: 1
- Forks: 4
- 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.
First Version
💡 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 [`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]
