Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tinspham209/react-weather-app
A simple React weather app that displays weather information & Forecast 5 days
https://github.com/tinspham209/react-weather-app
forecast react-hooks redux weather-app weather-forecast
Last synced: about 8 hours ago
JSON representation
A simple React weather app that displays weather information & Forecast 5 days
- Host: GitHub
- URL: https://github.com/tinspham209/react-weather-app
- Owner: tinspham209
- Created: 2020-01-18T13:39:09.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-23T23:36:51.000Z (25 days ago)
- Last Synced: 2024-10-24T13:10:42.022Z (24 days ago)
- Topics: forecast, react-hooks, redux, weather-app, weather-forecast
- Language: JavaScript
- Homepage:
- Size: 1.07 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mini Project: Weather Application
## Date: 22 - Jan - 2020
### Functions
- A simple React weather app that displays weather information & Forecast 5 days
- Drag'n'Drop Forecast
### Screenshot
### Tech-Stack
- React Hook
- axios
- react-dnd
- redux
- react-redux
- redux-thunk
### API Used
https://openweathermap.org/
### Deploy
https://quay189.github.io/react-weather-app/
### Plan Of Action
- Add useHttpErrorHandler
- Add Backdrop component
- Add Modal component
- Add Navigation component
- Add Weather component
- Add About component
- Add Search component
- Add Toolbar component
- update AppLayout with withErrorHandler
- remove padding-top of Search Component
- Update About component with Modal
- Update Search component
- Add function updatedObject
- Redux setup
- Refactor code with React Hooks
- Refactor code with Redux Hooks
- React DnD setup
- Add react-dnd to Forecast
### After this project
I have understand about
- Fetch API
- Study React & Hooks
- Study Redux & Hooks
- Study react-dnd
### Directory Structure
```
.
├── .gitignore
├── package.json
├── README.md
├── config
├── public
├── scripts
└── src
├── assets
├── components
├── About
├── Modal
├── Layout
├── Forecast
├── ForecastPerDay
├── Search
├── Weather
├── Logo
├── Navigation
├── NavigationItems
├── NavigationItemLink
├── NavigationParagraph
├── Toolbar
├── UI
├── Backdrop
├── Input
├── Modal
├── Spinner
├── container
├── AppLayout
├── database
├── icons.json
├── recommendations.json
├── hoc
├── Layout
├── withErrorHandler
├── hooks
├── shared
├── store
├── actions
├── reducers
├── axios-order.js
├── App.js
├── index.css
└── index.js
```
### Set up
Use the cmd line to clone repo to your computer
```
git clone [github_repo_url]
```
Use the cmd line to install dependencies.
```
npm install
```
Run in cmd for start the dependencies server
```
npm start
```