H4I Bootcamp

Welcome to the Hack4Impact Bootcamp! In this session, you will be working on a "Live Pulse Poll" application. This is a simple full-stack Next.js application where users can vote for their favorite food, and results are updated in real-time.

Prerequisites

Before getting started, ensure you have Node.js installed on your machine.

Installing Node.js

Windows

1. Download the LTS (Long Term Support) version from the official Node.js website.
2. Run the installer and follow the prompts.
3. Restart your terminal (Command Prompt or PowerShell).
4. Verify installation by running: node -v and npm -v.

macOS

Option 1: Using the Installer

1. Download the LTS package from nodejs.org.
2. Run the installer.

Option 2: Using Homebrew (Recommended)

1. Open Terminal.
2. If you don't have Homebrew, install it from brew.sh.
3. Run: brew install node
4. Verify: node -v and npm -v.

Linux (Ubuntu/Debian)

1. Open your terminal.
2. Update your package list: sudo apt update
3. Install Node.js and npm: sudo apt install nodejs npm
4. Verify: node -v and npm -v.

Getting Started

1. Navigate to the project directory:

   cd h4i-bootcamp

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open the app: Visit http://localhost:3000 in your browser.

Your Tasks

Search for TODO comments in the codebase to find where you need to write code.

Task 1: specific UI Feedback (Frontend)

• File: app/page.tsx
• Goal: Improve the user experience when a vote is cast.
• Action: When a user clicks a button, disable the buttons or show a loading state so they know something is happening.

Task 2: Connect to the API (Frontend)

• File: app/page.tsx
• Goal: Send the user's choice to the server.
• Action: Implement the fetch() call inside handleVote. It needs to send a POST request to /api/vote with the selected option in the body.

Task 3: Implement Vote Logic (Backend)

• File: app/api/vote/route.ts
• Goal: Actually count the votes!
• Action: In the POST function, write the logic to increment the vote count in the votes object for the received option.

Task 5: Real-Time Updates (Frontend)

• File: app/page.tsx
• Goal: See other people's votes without refreshing the page.
• Action: Use the useEffect hook and setInterval to "poll" the server (fetch data repeatedly) every 5 seconds to update the results.
• Concept: This demonstrates "Polling" vs "Push" (WebSockets).