Redux Eval

README.md

@@ -1,6 +1,121 @@
 ## Weather Project
 
+This project is a simple weather dashboard that allows users to search for a city's 5-day forecast and view key weather metrics in a visual format. The application is built using React and Redux, leveraging React Sparklines for the charting functionality.
+
+## Features
+
+1. **City Search:**
+
+   - Users can input a city name and click the search button to retrieve weather data for that city.
+
+2. **Visualized Weather Data:**
+
+   - The dashboard displays three separate charts:
+     - **Temperature (in °F)**
+     - **Pressure**
+     - **Humidity**
+
+3. **5-Day Forecast:**
+
+   - Each chart represents the 5-day weather forecast for the selected city.
+
+4. **Average Reference Line:**
+   - Each chart includes a reference line that shows the average value for the respective data metric.
+
+## Technologies Used
+
+- **React:** Front-end library for building the user interface.
+- **Redux:** State management for handling city searches and weather data.
+- **React Sparklines:** Library for rendering simple and elegant charts.
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (version 14 or above)
+- npm or yarn
+
+### Installation
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/acl13/rtk-weather.git
+   cd rtk-weather
+   ```
+
+2. Install dependencies:
+
+   ```bash
+   npm install
+   # or
+   yarn install
+   ```
+
+3. Obtain an API key from [OpenWeatherMap](https://openweathermap.org/api).
+
+   - Sign up for a free account if you don’t already have one.
+   - Use the API key in the application.
+
+4. Create a `.env` file in the project root:
+   ```bash
+   NEXT_PUBLIC_API_KEY=your_openweathermap_api_key
+   ```
+
+### Running the Application
+
+1. Start the development server:
+
+   ```bash
+   npm start
+   # or
+   yarn start
+   ```
+
+2. Open your browser and navigate to `http://localhost:3000` to use the app.
+
+## Project Structure
+
+```
+rtk-weather/
+├── app/
+   ├── components/         # Reusable UI components
+   ├── store/              # Redux slices and related logic
+   ├── page.js             # Main app component
+   ├── layout.js           # Entry point of the app
+```
+
+## Key Components
+
+### SearchBar
+
+- Input field to enter a city name and trigger a search.
+- Dispatches actions to update the Redux store with the selected city.
+
+### WeatherDataChart
+
+- Displays the weather data for a specific metric (e.g., temperature, pressure, humidity).
+- Utilizes React Sparklines for rendering.
+- Includes a reference line showing the average value.
+
+## API Integration
+
+- Weather data is fetched from the OpenWeatherMap API using the 5-day forecast endpoint.
+- Example API call:
+  ```
+  https://api.openweathermap.org/data/2.5/forecast?q={city}&appid={API_KEY}&units=imperial
+  ```
+
+## State Management
+
+- The Redux store manages:
+  - The cities searched by the user
+  - The fetched weather data
+
+## Customization
+
+- To modify the chart styles or add new features, refer to the [React Sparklines documentation](https://github.com/borisyankov/react-sparklines).
+
 This project has been created by a student at Parsity, an online software engineering course. The work in this repository is wholly of the student based on a sample starter project that can be accessed by looking at the repository that this project forks.
 
 If you have any questions about this project or the program in general, visit [parsity.io](https://parsity.io/) or email hello@parsity.io.
-

app/components/HeadingsRow.jsx

@@ -0,0 +1,12 @@
+const HeadingsRow = () => {
+  return (
+    <div className="row p-3 border-top">
+    <div className="col-sm text-center fw-bold">City</div>
+    <div className="col-sm text-center fw-bold">Temperature (F)</div>
+    <div className="col-sm text-center fw-bold">Pressure (hPa)</div>
+    <div className="col-sm text-center fw-bold">Humidity (%)</div>
+  </div>
+  )
+}
+
+export default HeadingsRow;

app/components/SearchBar.jsx

@@ -0,0 +1,16 @@
+import { useSelector } from "react-redux"
+
+const SearchBar = ({city, onChange, onSearch}) => {
+  const isLoading = useSelector((state) => state.weather.isLoading);
+  return (
+<form className="mt-5 p-2">
+  <div className="form-group d-flex">
+      <input type='text' onChange={onChange} value={city} placeholder="Get a five day forecast in your favorite cities" className="form-control"></input>
+      {isLoading ? <button type='button'  className="btn btn-primary">Loading</button> : <button type='button' onClick={onSearch} className="btn btn-primary">Search</button>}
+  </div>
+
+</form>
+  )
+}
+
+export default SearchBar

app/components/WeatherDataChart.jsx

@@ -0,0 +1,15 @@
+import { Sparklines, SparklinesCurve, SparklinesReferenceLine } from "react-sparklines";
+
+const WeatherDataChart = ({ data, color, text }) => {
+ return (
+  <div className="col-sm">
+  <Sparklines data={data}>
+    <SparklinesCurve color={color} />
+    <SparklinesReferenceLine type="avg"></SparklinesReferenceLine>
+  </Sparklines>
+  <p className="text-center">{text}</p>
+</div>
+ )
+}
+
+export default WeatherDataChart;

app/globals.css

@@ -1,107 +1 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
-    'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
-    'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
 
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}

app/layout.js

@@ -1,17 +1,18 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
+"use client";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./globals.css";
+import { Inter } from "next/font/google";
+import { Provider } from "react-redux";
+import store from "./store/configureStore";
 
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+const inter = Inter({ subsets: ["latin"] });
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Provider store={store}>{children}</Provider>
+      </body>
     </html>
-  )
+  );
 }