Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sisay2405/weather-forecaster-app

🌤️ Seven Day Weather Forecast app with weatherbit API.
https://github.com/sisay2405/weather-forecaster-app

react redux redux-toolkit styledcomponents testing weatherbit-api

Last synced: about 2 months ago
JSON representation

🌤️ Seven Day Weather Forecast app with weatherbit API.

Awesome Lists containing this project

README

        

https://user-images.githubusercontent.com/82465149/178811602-ab766af5-6090-41ce-814f-dc97dad78cd5.mp4

### ![Figma](https://user-images.githubusercontent.com/82465149/171688172-a95ef2bb-d6bc-4555-8ff0-ab8ade73fa4b.png)

### https://trello.com/b/Rl4VFwzy/weather-app

# Getting Started with Create React App

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

##Project Title: Weather Forcaster App
This app build with existing knowledge of the React basics (components, JSX, props, event handling, using forms, making API calls, basic hooks) and allow you to practice with React best practices like an ErrorBoundaries, PropTypes, ESLint (to enforce code style consistency), and writing component and unit tests.

This project build in Bitwise React Byteme collaborate with Tyler(tdavis0828) and Javi(javiguerra777) Bytes discuss strategy, debug issues, review code, etc.

A demo of Weather Forecaster app, that initially loads WeatherBit forecast data for a hardcoded location (Jacksonville, Fl), and displays this information to the user via seven individual card components, one for each day of the week. The user can then click on an individual forecast day to view detailed forecast information, or choose instead to search for weather in a new location and uses the WeatherBit API, geocoding API.. Demo-weather-app-detail.mp4

###Getting Started
The App build out with simple wireframes using Figma.

###Prerequisites / Installing
The app has the following devDependencies installed: eslint eslint-config-airbnb eslint-config-node eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier and also contain .eslintignore, .eslintrc.json, and .prettierrc , Pull data from external APIs fetch.

-- Each component's props should be destructured for component readibility.
-- By using search bar , the app should render weather forecast data for the new location.
-- set up to use ESLint with the Airbnb style guide and Prettier.
A step by step series of examples that tell you how to get a development env running

###Running the tests
Npm Test

### Deployment
netlify : https://sisay-weather-forecaster-app.netlify.app/
https://user-images.githubusercontent.com/82465149/178811602-ab766af5-6090-41ce-814f-dc97dad78cd5.mp4
### Authors
Sisay Areaya - Initial work
the list of contributors who participated in this project. All Byteme: Sarah Cullen(my lead Bitwise React ) , Tyler(tdavis0828), Javi(javiguerra777) and Frankie.
### Support & Feedback
If you are having technical issues or want to raise a bug/issue with the app, the preferred way is through GitHub issues. In order to contact with me for any other request please send an email to: [email protected]

### License
Distributed under the MIT License. See LICENSE for more information.