codex-lv3-may-2025

Week 4 Assignment: React Hackathon - Data-Driven App

Overview

Build a multi-screen React application that uses a dataset in a meaningful way. You’ll work with a partner to design, prototype, and develop an app that demonstrates list traversal methods (map, reduce, or filter) and incorporates real data.

Learning Objectives

By the end of this assignment, you’ll be able to:

Resources

Project Requirements

App Requirements

Your app must include:

✅ At least three screens

✅ Easy navigation

✅ Dataset integration

✅ List traversal

✅ Programming constructs

✅ Documentation

✅ Code quality

Submission Requirements

You will submit:

  1. ✅ Your final React app (GitHub repository link)
  2. ✅ Completed project-planning guide (from Hackathon Planning Sheet)
  3. ✅ A written response explaining:
    • Your app’s purpose
    • How you used the dataset
    • Which list traversal method(s) you used and why
    • Challenges you faced and how you solved them

Steps to Complete

Step 1: Choose Your Dataset (30 minutes)

With Your Partner:

  1. Browse available datasets on Code.org or find your own
  2. Discuss what kind of app would be meaningful for this data
  3. Consider questions like:
    • What story does this data tell?
    • What would users want to learn from this data?
    • What comparisons or calculations would be useful?

Popular Dataset Ideas:

💡 Inspiration: Check out the Cereal Nutritional Data App to see how nutrition data can be used to compare cereals, find healthy options, and display data in multiple ways.

Step 2: Decide on Your App Concept (30 minutes)

Brainstorm together:

  1. What is the main purpose of your app?
  2. What will users be able to do?
  3. How will you traverse the list?

List Traversal Brainstorm

Choose at least one traversal method to use in your app:

MAP (do one thing to every item in the list)

Examples:

// Example: Display all items with formatted data
const formattedItems = data.map((item) => {
  return {
    ...item,
    displayName: `${item.name} (${item.year})`
  };
});

REDUCE (summarize something about this list into a single number or string)

Examples:

// Example: Calculate total using a for loop
let total = 0;
for (let i = 0; i < data.length; i++) {
  total = total + data[i].value;
}
// Now 'total' contains the sum of all values

FILTER (select only a few elements out of a list)

Examples:

// Example: Filter items by criteria using a for loop
const filtered = [];
for (let i = 0; i < data.length; i++) {
  if (data[i].category === "Rock") {
    filtered.push(data[i]);
  }
}
// Now 'filtered' contains only items with category "Rock"

Step 3: Create a Paper Prototype (45 minutes)

Design Phase - With Your Partner

Create a paper prototype that shows:

Tips:

example design

Take a photo of your paper prototype and include it in your planning guide!

Step 4: Set Up Your React Project (30 minutes)

  1. Initialize your React app: 
    npm create vite@latest hackathon-app -- --template react
cd hackathon-app
npm install
  2. Import your dataset:
    • Follow the HOWTO guide to export data from Code.org
    • Convert to JSON using TableConvert
    • Place the JSON file in your src folder
    • Import in your component: 
      import data from './data.json';
  3. Set up folder structure: 
    src/
├── components/
│   ├── Navbar.jsx
│   ├── Home.jsx
│   ├── DataList.jsx
│   └── Details.jsx
├── data.json
├── App.jsx
└── main.jsx

Step 5: Divide Roles and Build

Designer:

Programmer:

Pair Programming Tips:

Step 6: Implement Core Features

Use React Router or state-based navigation:

// Simple state-based navigation example
function App() {
  const [currentScreen, setCurrentScreen] = useState('home');
  
  return (
    <>
      {currentScreen === 'home' && <Home goTo={setCurrentScreen} />}
      {currentScreen === 'list' && <DataList goTo={setCurrentScreen} />}
      {currentScreen === 'details' && <Details goTo={setCurrentScreen} />}
    </>
  );
}

Display Data Using Map

function DataList({ data }) {
  return (
    <div>
      <h2>All Items</h2>
      {/* MAP: Transform and display every item */}
      {data.map((item, index) => (
        <div key={index} className="item-card">
          <h3>{item.name}</h3>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}

Calculate Summary Using Reduce

function Summary({ data }) {
  // REDUCE: Calculate total from all items using a for loop
  let total = 0;
  for (let i = 0; i < data.length; i++) {
    total = total + data[i].value;
  }
  
  return (
    <div>
      <h3>Total: {total}</h3>
    </div>
  );
}

Filter Data Based on Criteria

function FilteredList({ data, category }) {
  // FILTER: Show only items matching criteria using a for loop
  const filtered = [];
  for (let i = 0; i < data.length; i++) {
    if (data[i].category === category) {
      filtered.push(data[i]);
    }
  }
  
  return (
    <div>
      <h2>{category} Items</h2>
      <p>Found {filtered.length} items</p>
      {filtered.map((item, index) => (
        <div key={index}>{item.name}</div>
      ))}
    </div>
  );
}

Step 7: Add Comments and Documentation

Add comments to all functions explaining:

/**
 * Calculates the average rating from an array of movies
 * @param {Array} movies - Array of movie objects with rating property
 * @returns {Number} - The average rating rounded to 2 decimal places
 */
function calculateAverageRating(movies) {
  // REDUCE: Sum all ratings using a for loop
  let total = 0;
  for (let i = 0; i < movies.length; i++) {
    total = total + movies[i].rating;
  }
  // Calculate average
  const average = total / movies.length;
  return average.toFixed(2);
}

Step 8: Test and Debug

Testing Checklist:

Step 9: Complete Documentation

Fill out the Hackathon Planning Sheet with:

Step 10: Write Your Reflection

Write a response (300-500 words) addressing:

  1. App Purpose: What problem does your app solve or what information does it provide?

  2. Dataset Usage: How did you use the dataset? Why did you choose this data?

  3. List Traversal: Which method(s) did you use (map/reduce/filter)? Explain specifically where in your code and why it was appropriate.

  4. Collaboration: How did you and your partner divide the work? What worked well?

  5. Challenges: What was difficult? How did you overcome obstacles?

  6. Learning: What did you learn from this project?

Rubric

Criteria Points Description
Three+ Screens 15 App has at least three distinct screens
Navigation 10 Easy navigation between all screens via UI
Dataset Integration 20 Dataset used meaningfully toward app’s purpose
List Traversal 25 Map/reduce/filter used correctly and meaningfully (commented)
Programming Constructs 10 Uses variables, functions, conditionals, lists, loops
Comments 10 All functions have clear explanatory comments
No Errors 5 Code runs without errors
Planning Document 10 Complete planning sheet with prototype photos
Written Reflection 10 Thoughtful response addressing all prompts
Total 115 Extra credit available for exceptional work

Submission Instructions

  1. Push to GitHub: 
    git init
git add .
git commit -m "Complete Week 4 Hackathon project"
git branch -M main
git remote add origin [your-repo-url]
git push -u origin main
  2. Submit on Moodle:
    • Link to GitHub repository
    • Link to completed Planning Sheet (Google Doc)
    • Written reflection (in Moodle text box or uploaded document)
    • (Optional) Link to deployed app on Netlify

Example Projects

Example 1: Music Playlist Analyzer

Example 2: State Demographics Explorer

Example 3: Movie Rating App

Common Issues and Solutions

Issue: Data not loading

Solution: Check your import statement and file path. Make sure the JSON file is in the src folder.

Issue: Map/filter/reduce not working

Solution: Console.log your data first to see its structure. Make sure you’re accessing the correct property names.

Issue: Navigation not working

Solution: Check your state management or routing setup. Make sure onClick handlers are correctly passing screen names.

Issue: Comments unclear

Solution: Explain what the function does in plain English first, then what each main step does.

Tips for Success

Partnership Tips:

Technical Tips:

Time Management:

Learning Outcomes

After completing this hackathon, you will:

Additional Resources

Documentation:

Video Tutorials:

Good luck with your hackathon! Remember: plan well, communicate often, and test frequently. You’ve got this! 🚀