Hi there! Just a weather forecast by an octopus 🐙
See it in action here 🔥
- React (Hooks)
- TypeScript
- TailwindCSS
- Axios
- OpenWeatherMap API
- usePosition
- Jest
- React Testing Library
- Firebase
To run the project locally you will need to set environment variables, which will be secrets ignored by git like API KEYS or related.
For this, create a .env file in the root of the project with the following:
// OpenWeather API KEY:
REACT_APP_OPENWEATHER_API_KEY = YourApiKeyHere
Just replace YourApiKeyHere with your real API KEY (if you don't have any real API KEY, you will have to contact the project owner to get the secret).
This file is already set to be ignored by git in .gitignore, and will be also the place to store and hide any new secret that should not be commited. Just remember to add any new secret here in the above .env file reference to keep the list of required enviroment variables up to date.
The project is hosted in firebase, for deploy you will have to install Firebase Cli.
With the Firebase Cli installed, and the correct access to the project in the Firebase Console, you just will need to run yarn build to generate a production build folder, and after that, firebase deploy to deploy the build.
The project will be deployed in https://weather-octopus.web.app/ and https://weather-octopus.firebaseapp.com/.
weather-octopus
│
│ -> public (index.html, manifest.json, etc)
│
│ .env <-- (To hide secrets. It's required to run the project locally.
│ Please read the "Environment Variables" section of the README)
│
│ .gitattributes
│ .gitignore
│ .firebase
│ .firebaserc
│ firebase.json
│ postcss.config.js
│ tailwind.config.js
│ tsconfig.json
│ packgae.json
│ yarn.lock
│ README.md
│
└────> src
│ -> tests
│ index.tsx
│ App.tsx
│
└───> components (All stateless and presentational React Functional Components)
│ -> tests
│
└───> containers (All stateful React Components intended as independent modules)
│ -> tests
│
└───> helpers
│ └───> constants
│ └───> methods
│ │ types.ts
│
└───> providers (All state providers builded with React API Context and Hooks)
│ -> tests
│
└───> services (All external services, as OpenWeather)
│
│
└───> images
│ └───> gallery (All images files as .svg or .jpg)
│ │ index.ts (Exports one only images object)
│
└───> styles
│ main.css (All css generated by tailwind, it should not be edited)
│ tailwind.css (A place to put custom classes if it's necesary)