Local Sounds Case Study

IT338 front-end development project: a React app showcasing local artists and events, built with reusable components, client-side routing, and accessible design principles.

Course: IT 338   •   Role: Front-end Developer & UX Designer   •   Stack: React, React Router, useState/useEffect, CSS (index.css)

Project Overview & Goals

The goal was to build a responsive React application that highlights local artists and music events through modular, reusable components. The app needed at least 12 total components (five as full pages) while maintaining accessibility, responsive layout, and consistent structure.

Features & Structure

• Pages include Home, Artists Directory, Artist Profile, Events, and Contact — each containing original content per rubric.
• Key components: ArtistCard, ArtistGrid, EventList, PlayerWidget, NavBar, Footer, ContactForm, and more.
• Implements useState and useEffect hooks for dynamic updates and React Router for client-side navigation.

UX, Accessibility & Design

The app uses semantic HTML, alt text for images, accessible audio controls, and keyboard-friendly navigation. Layout and typography were designed with mobile-first responsiveness and readability in mind.

Sample Code (Filtering Logic)

// ArtistGrid.jsx (excerpt)
const [artists, setArtists] = useState(initialArtists);
const [query, setQuery] = useState('');

useEffect(() => {
  setArtists(initialArtists.filter(a => 
    a.name.toLowerCase().includes(query.toLowerCase())
  ));
}, [query, initialArtists]);
    

Lessons Learned & Next Steps

This project improved my understanding of React component composition, props, and state management. Future plans include connecting the app to a headless CMS or external API for dynamic content, and optimizing the audio player for low-bandwidth users.