);
}
```
When we run app, we encounter the following issues:
```
// Some code
AppAQIRealTime.jsx:46
GET https://corsproxy.io/?https://api.openaq.org/v2/latest?limit=10 410 (Gone)
fetchData @ AppAQIRealTime.jsx:46
(anonymous) @ AppAQIRealTime.jsx:65
(anonymous) @ main.jsx:12
```
```
// Some code
AppAQIRealTime.jsx:60
AxiosError {message: 'Request failed with status code 410', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {β¦}, request: XMLHttpRequest, β¦}
fetchData @ AppAQIRealTime.jsx:60
await in fetchData
(anonymous) @ AppAQIRealTime.jsx:65
(anonymous) @ main.jsx:12
```
### Solution: Create Your Own Local Backend Proxy (Best Practice)
If you want to practice **backend/frontend separation** (good for your portfolio), do this:
#### Step 1: Create a simple Express server
In your project root, run:
```bash
npm install express cors axios
```
Create a new file at root directory: server.js
```bash
touch server.js
```
```javascript
// server.js
import express from 'express'
import cors from 'cors'
import axios from 'axios'
const app = express()
app.use(cors())
app.get('/api/airquality', async (req, res) => {
try {
const response = await axios.get('https://api.openaq.org/v2/locations', {
params: {
limit: 20,
page: 1,
sort: 'desc',
order_by: 'lastUpdated',
},
headers: {
Accept: 'application/json',
'User-Agent': 'air-quality-monitoring-app',
},
})
res.json(response.data)
} catch (error) {
res.status(500).json({ error: error.message })
}
})
const PORT = 4000
app.listen(PORT, () =>
console.log(`Server running on http://localhost:${PORT}`),
)
```
### Step 2: Update your React App.jsx
Change:
```jsx
// old App.jsx
const response = await axios.get('https://api.openaq.org/v2/latest?limit=10');
```
To:
```jsx
// updated App.jsx
const response = await axios.get('http://localhost:4000/api/airquality');
```
### Step 3: Run your backend and frontend
In one terminal, run:
```bash
node serverMock.js
```
In another terminal, run your React app:
```bash
npm run dev
```
### Solution 2: Local Mock Data (For Safe Classroom Project)
We're **already simulating AQI**, and to avoid unstable external APIs, letβs **mock the data locally**.
#### Step 1: Update your `serverMock.js` like this:
```jsx
// serverMock.js
import express from 'express'
import cors from 'cors'
import axios from 'axios'
const app = express()
app.use(cors())
app.get('/api/airquality', (req, res) => {
// Local mock data
const mockData = {
results: [
{
city: 'New York',
country: 'USA',
coordinates: { latitude: 40.7128, longitude: -74.006 },
},
{
city: 'Los Angeles',
country: 'USA',
coordinates: { latitude: 34.0522, longitude: -118.2437 },
},
{
city: 'London',
country: 'UK',
coordinates: { latitude: 51.5074, longitude: -0.1278 },
},
{
city: 'Tokyo',
country: 'Japan',
coordinates: { latitude: 35.6895, longitude: 139.6917 },
},
{
city: 'Paris',
country: 'France',
coordinates: { latitude: 48.8566, longitude: 2.3522 },
},
],
}
res.json(mockData)
})
const PORT = 4000
app.listen(PORT, () =>
console.log(`β Backend server running at http://localhost:${PORT}`),
)
```
### Switch map mode between Dark Mode and Light Mode
We will:
1. Add a toggle button to switch between dark and light map styles.
2. Update your `` component to dynamically use the selected mode.
#### Step 1: Add State for Map Mode
In your `App.jsx`, at the top inside your component, **add state for map mode:**
```jsx
// App.jsx snippet
const [mapMode, setMapMode] = useState('dark');
```
#### Step 2: Add Toggle Button
Above your map (maybe below filters), **add a button** to switch modes:
```jsx
// App.jsx snippet
{/* Add New toggle button */}
```
#### Step 3: Update TileLayer to Use Dynamic Map Style
Now go to your `` component and **replace the static URL** with a dynamic one:
```jsx
// App.jsx snippet
```
Now when you click the button:
* π Dark mode: CartoDB dark tiles.
* π Light mode: OpenStreetMap standard tiles.
* β Seamless switch!
* β Works even while map is active.
Output:
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://reactjs.koida.tech/final-term-project/level-1-team-project-2.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.