Commit b48e7cf8 authored by LAFORÊT Nicolas's avatar LAFORÊT Nicolas 🐇
Browse files

PWA application & 📝 README

parent eb8dbeef
\ No newline at end of file
# PWA TP Noté - Laforêt Nicolas
> Live at: [](
## App
![Application screenshot](./assets/app.png)
## Lighthouse
![Lighthouse screenshot](./assets/lighthouse.png)
\ No newline at end of file
......@@ -21,7 +21,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
<title>React App</title>
<title>PWA TP - Laforet Nicolas</title>
<noscript>You need to enable JavaScript to run this app.</noscript>
"short_name": "PWA TP",
"name": "PWA TP Noté - Laforet",
"name": "PWA TP Noté - Laforet Nicolas",
"icons": [
"src": "favicon.ico",
import React from 'react';
Pour rendre l'application production-ready,
il faut mettre l'API key dans un fichier .env à la racine du projet,
ce qui est fait ici.
import React, { useEffect, useState } from 'react';
import './App.css';
function App() {
const [state, setState] = useState({
name: 'Strasbourg',
weather: [{ main: 'Nuageux', description: 'nuageux', icon: '04n' }],
main: {
temp: 25,
feels_like: 20,
useEffect(() => {
.then(res => res.json())
.then(data => setState({
main: data.main
}, [])
return (
<div className="flex justify-center">
<div className="text-white">
<div className="w-128 max-w-lg font-sans overflow-hidden bg-gray-900 shadow-lg" >
<div className="flex items-center justify-between px-6 py-8"><div className="flex items-center">
<div className="text-6xl font-semibold">8°C</div>
<div>Feels like 2°C</div>
<div className="flex items-center justify-between px-6 py-8">
<div className="flex items-center">
<div className="text-6xl font-semibold">{state.main.temp}°C</div>
<div>Feels like {state.main.feels_like}°C</div>
<div className="mx-5">
<div className="font-semibold capitalize">{ ?[0].description : 'Not available'}</div>
<div className="mx-5">
<div className="font-semibold">Cloudy</div>
<div>Toronto, Canada</div>
{ &&
<img alt={`${[0].description} icon`} src={`${[0].icon}@2x.png`} />
<div className="text-sm bg-gray-800 overflow-hidden"> {[1, 2, 3, 4, 5].map((value, index) => (
<div className="flex items-center px-6 py-4" // className:bg-gray-700={index % 2}
<div key={index} className="flex items-center px-6 py-4" // className:bg-gray-700={index % 2}
<div className="w-1/6 text-lg text-gray-200">DOW : {value}</div>
<div className="flex items-center w-2/3 px-4">
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
......@@ -15,7 +15,7 @@ ReactDOM.render(
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment