MyWeatha

This project was bootstrapped with Create React App.

Table of Contents 📚

• General Info ℹ️
• Local Installation 📂
• Project goals 🏆
• Tools used 🔧
• Try it Out! ☀️

General Info

MyWeatha is a full stack website that utilizes user authentication and authorization to display the weather forecast of any location selected by the user. The user can even set a location as their default weather forecast.

This is repository is the Client side of the website. The server side can be found here.

Local Installation

1. You will need to install the client and server repositories.
2. Then you need node to install the project dependancies.
3. Follow the steps below:

$ cd your-desired-repo
$ git clone https://github.com/amimbs/react-weather-app-client.git
$ git clone https://github.com/amimbs/react-weather-app-server.git
$ cd react-weather-app-client
$ npm install
$ cd ..
$ cd react-weather-app-server
$ npm install

4. Next you'll need 2 API keys from OpenWeather to utilize in the following API calls:
   • Current Weather Data
   • 5 day weather forecast
5. Follow the instructions below:

   $ cd react-weather-app-client
   $ touch .env

6. In .env

REACT_APP_WEATHER_KEY = 'your api key'
REACT_APP_WEATHER_API_KEY = 'your api key'
REACT_APP_SERVER = `http://localhost:3001`

6. from the client directory you can now run npm start

   • Runs the app in the development mode.

   • Open 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 start

7. If you want to utilize user authentication and authorization you will need to host a PostgreSQl server.
   • I recommend ElephantSQL.
8. Enter the following commands in your console once you've created a database using your desired service. (The following steps will be for 'ElephantSQL', a 'PostgreSQL' server, and Sequelize)

$ cd react-weather-app-server
$ touch .env

9. In .env

DB_HOST='your database host'
DB_USER='your database user`
DB_PASSWORD='your database password'
DB_DATABASE='your database user'

10. From your Server directory update sequelize and run a migration

$ cd react-weather-app-server
$ npx sequelize-cli init
$ npx sequelize-cli db:migrate

• This will push your download migrations from react-weather-app-server to your database

11. Now you can run nodemon from your server directory so that any changes you make to your server.js will restart and run instantly.

$ cd react-weather-app-server
$ nodemon server.js

12. Switch to you in your client folder

$ cd ..
$ cd react-weather-app-client

13. Your application is now ready to be run locally!
14. Just a recap of how to do that from the project directory:

$ cd react-weather-app-client
$ npm start

• from a second terminal

$ cd react-weather-app-server
$ nodemon server.js

Project goals

• ✔️ Uses OpenWeather Api https://openweathermap.org/forecast5#JSON
• ✔️ Fetch Data using axios
• ✔️ 5 day forecast
• ✔️ Implement Toastify for imvalid searches
• ✔️ divide each 3 hr incremenent of a day from the api into individual day divs
• ✔️ style the cards for each 3hr increment with each parent day div using Styled Components
• ✔️ display the correct days of the week
• ✔️ optimize and styling
• ✔️ create a user table
• ✔️ add user registration forms using formik and yup
• ✔️ add user authentication
• ✔️ add user authorization
• ✔️ style the forms
• ✔️ user can add a city as their default forecast
• ✔️add current weather hook
• ✔️switch https://www.weatherapi.com/ for current weathr hook
• ✔️select a better hook for the 5 day forecast (?)
• ✔️after consideration switched back to openweatherapi
• ✔️add JWT for user authorization
• ✔️how to create authorized protected routes only for the user?
• ✔️store favorites in the backend
• ✔️front end should store userid, store a city as default, reponse should have userid and default locaiton

Tools Used

• React
• React Router Dom
• Styled Components
• Toastify
• JavaScript
• Moment
• Yup
• Formik
• Axios
• OpenWeather
• dotenv
• cors
• Express
• Sequelize
• ElephantSQL
• Nodemon
• Bcrypt

Try it Out!

• Website

MyWeatha.mp4