wildcodeschool / 2022-09-js-remoteen-project-2-team-2 Goto Github PK

• #3
  #1
  #8
  #10
  #11
  #12
  #13
  • Weather API implemented to CurrentWeather branch weatherAPIcurrent Pierre
• Placing in App.jsx instead of main-container.jsx branch hoursForecastApp ALL

If not done on Sprint 2, to do in Sprint 3 :

• Desktop Version branch desktopVersion Pauline / Anna / Osvaldo
• #14 branch darkMode
  • Button Mode Anna
  • Dark mode Pauline / Russell

Definition of ok: The icon changes according to the weather and if you change from one town to another

This is a complete tutorial on how to do it, but you should only do the 1, 2 and 3 steps

To hide the API keys from GitHub, we can use environmental variables in a dot.env like we've seen in the quest (except for VITE app it's a little bit different) :

1/ Install the dotenv NPM package in the console : npm install dotenv
2/ Create a .env file in the ROOT of the directory, NOT in the src and add .env in the ROOT gitignore file
3/ In this file we put the values of the Keys we have for the 2 API's with the prefix VITE_ (ask Pierre for them) :
- VITE_CITIES_KEY_ENV=keykeykey
- VITE_WEATHER_KEY_ENV=keykeykey

DO NOT use require('dotenv').config() like they said in the quest
Just replace the actual keys by the env variables as is in api.jsx (it should already be done in your branch):
- "X-RapidAPI-Key": import.meta.env.VITE_CITIES_KEY_ENV,
- export const WEATHER_API_KEY = import.meta.env.VITE_WEATHER_KEY_ENV;

Here we use import.meta.env just because we work with a VITE app.

• Your gitignore should have already the .env file added.

• In your .env.sample you can specify help for other people to explain the process (or not touch it it's fine)

Your .env in ROOT should look like that:

And you .gitignore in ROOT:

Both CurrentWeather and Forecast API calls are coded together in App.jsx.
It's not possible for HoursContainer to be nested in main-container, so we'll have to pluck it out and place it App.jsx. It will be tricky to place it inside the elements of main-container but there will be a CSS solution i'm sure

General

• Prepare Project 2 Final Demo Presentation (23rd November, Wednesday)
• Having fun (lol)

Frontend

• A few Pixel fixes in CSS (for ex button alignment search field & David's Suggestion: Changing crescent part of Sunrise and Sunset Image to appear less white in dark mode) / branch lastfixCSS
• #17
  • Make a Form that popups when clicking on Subscribe Now (First name/Last name/Age/City/email) / save user infos in server database backend / branch backendSub
  • CSS for the form branch popup
  • Validation for the form / required on the fields branch popup
• Environmental variables to hide our 2 API keys / branch landingpage
• Merge branch landingpage (landing page to Paris + useEffect to go back to Today after changes + all the fixes done in S4)

Frontend after Project 2 ends if we want to go deeper

• Save to local storage Dark/Light Theme chosen by user / branch localstorage

• Asking user for permission to use his location and use it to display weather in his city as new landing page (might be very rough given how our search API is feeding our Weather API) / branch asklocation

Backend after Project 2 ends if we want to go deeper

• Backend /locations to save locations in server database / map, call API and display them in Saved Locations / branch locationsBackend

Making an App?

DOK: the background changes when i change the time of my phone/my computer

DOK: I can switch between the days and se the weather on an hourly basis

DOK: I can see the humidity level

DOK: I can see the preview of my fav locations

DOK: I see the today's date

DOK: I can click on the dates and it displays the weather accordingly

DOK: I can swipe and see the weather

DOK: I recieve a mail that tells me my weekly forecast after I gave my email

Sprint 3 :

• #4
  #6

  • Implementing Forecast API to forecast weather (see how to make it change from today to tomorrow) branch forecastCODE Pauline / Pierre ALSO this branch is setting up the .env file to hide API keys (see in progress and notes and thoughts)

• Desktop Version Fixes from Presentation Comments (font sizes, logo placement, too much width between humidity and temperature) branch desktopVersion Pauline ALREADY MERGED

• #14 Pauline / Russell / Osvaldo / Anna

  • Button darkMode Anna
  • Dark mode branch darkMode2CODE Pauline / Russell / Osvaldo

DOK: I can retrieve my fav locations if i reload the page

DOK: I can see the wind speed

• #4
  • Component <search /> bar + code API logic <api /> (Pierre) => branch search
• App : myCity(), myDate() ; (Osvaldo) => branch app
• Component <CurrentWeather /> (Osvaldo) => branch CurrentW
• Component <MainContainer /> (Pauline/Russell/Anna) => branch mainContainer
  • Component <HoursForecast />
• Component <SavedLocations /> (Pauline/Russell/Anna) => branch SavedLocations
  • Component <Cities />
• Component <SubButton /> (Anna) => branch subButton
• App: Logo (Osvaldo) => branch app

⚠️ATOMIC COMMITS => Make commits for every changes you make (you can also push). No MERGE until Sprint Meetings⚠️

1/ Branches to be pushed, and their associated changed files :

• branch App : App.jsx , App.css , Assets
• branch Search : App.jsx ⚠️, App.css ⚠️, api.jsx , Components/search.jsx , Components/search.css , Assets⚠️
• branch CurrentW : App.jsx ⚠️, Components/CurrentWeather.jsx , Components/CurrentWeather.css , Assets⚠️
• branch mainContainer : index.html , App.jsx⚠️ , Components/HoursForecast.jsx , Components/HoursForecast.css , Components/main-container.jsx , Components/main-container.css , Assets ⚠️
• branch SavedLocations : index.html ⚠️, App.jsx⚠️ , Components/Cities.jsx , Components/Cities.css , Components/SavedLocations.jsx , Components/SavedLocations.css , Assets ⚠️
• branch subButton : App.jsx⚠️, Components/SubcribeBtn.jsx , Components/SubcribeBtn.css

⚠️ = risk of conflicts from previous merge (the 1st merged should stay)

2/ Redo the App Component to build the skeleton, should be along those lines :

import React from "react";
import "./App.css";
import Search from "@components/search/search";
import CurrentWeather from "@components/CurrentWeather/CurrentWeather";
import MainContainer from "./components/main-container/main-container";
import SavedLocations from "./components/SavedLocations/SavedLocations";
import SubscribeBtn from "@components/subscribe/SubscribeBtn";
import logo from "./assets/logo/suni_logo.png";

function App() {
const handleOnSearchChange = (searchData) => {
const [lat, lon] = searchData.value.split(" ");
console.warn(lat);
console.warn(lon);};

return (
<div>
<Search onSearchChange={handleOnSearchChange} />
<div className="weatherMain">
<p className="myCity">Hamburg</p>
<p className="myDate">26 October, <span className="weekDay">Wednesday</span></p>
</div>
<CurrentWeather />
<MainContainer />
<SavedLocations />
<SubcribeBtn />
<div className="weatherMain">
<div className="myFooter"><img className="sunnyLogo" src={logo} alt="" /></div>
</div>
</div> ) }

export default App;

DOK: Successufull ask of location and display

As a user I see the temperature

DOK: I can see the hours of sunset and sunrise

DOK:I can see the felt temperature

Definition of ok: The location changes