Resonance

Why I built this

I built Resonance because I've always loved logging and reflecting on the experiences that matter to me, from beer tastings and coffee spots to train journeys and scrobbling music. But when it came to concerts, I couldn't find an app that let me check in to live performances in a way that felt personal, social, and structured. Resonance fills that gap. It also served as the perfect opportunity to turn a personal idea into a real product as part of the final project for my Full Stack Developer course.

How it was built

Resonance was built as a full stack web application using Next.js for the frontend and Laravel for the backend. The frontend uses Tailwind CSS for styling and includes features like authentication, filtering, geolocation, and dynamic routing. The backend provides a fully documented REST API with Laravel Sanctum for secure token-based authentication and OpenAPI/Swagger for documentation. An admin dashboard was implemented using Filament to manage users, concerts, and content. The app is deployed on Vercel (frontend) and DigitalOcean (backend + database), with real-time data flow managed via API Route Handlers in Next.js, acting as a proxy to the Laravel backend.

Features

Resonance has a few features that make it unique:

• Check in to concerts
• Add concerts to your profile
• View concerts you've checked in to
• View concerts you've added to your profile
• See which artists you saw at each concert
• Upload photos and write reviews for check-ins
• Follow friends and view their timeline
• Discover upcoming concerts near you using location
• Filter concerts by genre, venue or date
• Track your top artists, venues, and genres
• View visual stats of your concert history
• Explore events and concerts in a clean, card-based UI

Timing

Building Resonance wasn't just a technical challenge, it was a time-balanced marathon of design, development, and iteration. Here's how the 97 hours broke down:

• Planning & Project Management ~7h
  Defining features, scope, and realistic milestones.
• Final Paper ~3h
  Documenting the technical and conceptual process.
• Wireframing & UI Design ~4h
  Sketching layouts, user flow, and structure.
• ERD & Database Design ~5h
  Crafting a normalized schema to support all features.
• Backend ~30h
  Laravel 12, Sanctum auth, Swagger docs, Filament dashboard.
• Frontend ~48h
  Next.js, App Router, Tailwind, ShadCN UI.
  Includes landing page and 5 functional pages with API integration.

What I learned

Through building Resonance, I gained hands-on experience with full stack development: from database design to frontend UX. I learned how to structure and document a scalable REST API using Laravel and OpenAPI, implement secure token-based authentication with Laravel Sanctum, and manage relationships through pivot tables with UUIDs for better integrity and security. On the frontend, I explored the App Router in Next.js, handled server/client interactions via API route handlers, and built dynamic interfaces with Tailwind CSS and ShadCN UI.

I also dove into advanced topics like geolocation, calculating distances with the Haversine formula, and caching responses for performance. Deploying the backend on DigitalOcean and the frontend on Vercel taught me the challenges of production environments, especially when dealing with cookies, cross-origin issues, and environment variables.

Most of all, I learned how important it is to think in iterations: deploying and testing features one at a time, debugging thoughtfully, and adapting the backend structure to meet frontend needs. This project sharpened both my technical and problem-solving skills and gave me confidence in building real-world applications from scratch.

Future Improvements

There are a few features I would like to add to Resonance in the future:

• Code cleanup and structure refinements
• Email verification for user accounts
• Push notifications for check-ins and updates
• Optimize and refactor API endpoints for better performance
• Retroactive check-ins for past concerts
• Move all filtering logic to the backend
• Enable artist search and filtering
• Import data from external APIs (e.g. Setlist.fm)
• Let users add concerts, artists, and venues themselves
• Allow users to edit their check-ins and profile info
• Tag other users in your check-in
• "I'm going" feature for upcoming concerts
• Moderation dashboard for superusers to verify user-generated content
• Add gamification elements like badges or achievements
• Implement real-time updates for new check-ins and likes