# Local Hangouts — Small plans, fully connected

**Author:** Mohamad Rizal Rahmadi  
**Project:** Independent portfolio application  
**Stack:** React, TypeScript, FastAPI, PostgreSQL  
**Contribution:** Project direction and development with AI assistance across planning, implementation, imagery and testing.

This self-initiated project has no commissioning client. All events, venues, hosts and attendees are fictional. Event-cover photographs are AI-generated conceptual artwork. No commercial outcomes or real bookings are claimed.

## The brief

Build a responsive application where people can discover small gatherings, review event details, save favorites and reserve a place. Demonstrate the complete workflow, including account management and an organizer workspace, rather than a disconnected set of polished screens.

The scope stays focused: Austin, free single-session events, and one place per account. Payments, maps and a social feed are outside this implementation.

## The solution

The working local application connects a React interface to a FastAPI REST API and PostgreSQL. Participants can search and filter events, create an account, save gatherings, RSVP, cancel and review My plans. Organizers can create drafts, publish, edit, cancel and view attendees. An isolated private demo lets reviewers try both roles with fictional data.

## Design decisions

The earlier direction was too repetitive. The approved editorial revision gives each gathering more identity through a photographic lead, distinct category imagery and prominent dates. Warm paper, near-black text, a restrained oxblood accent, Instrument Sans and sparse DM Serif italic keep the experience coherent.

Responsive design changes the composition. Desktop uses a lead and supporting grid. Phone event rows combine readable titles and dates with square thumbnails. Event detail places availability and RSVP before the long description on phones. Accounts, Saved, My plans and organizer screens follow the same visual language.

## Implementation decisions

- **Server-side discovery:** Search, category/date filtering and pagination run through the API. URL state preserves context through refresh and browser navigation.
- **Authoritative attendance:** Counts come from stored reservation records. Backend rules enforce capacity, event status and permissions; concurrent reservation behavior has dedicated tests.
- **Persistent account state:** Signup, login, profile/password updates, email verification, password recovery and favorites are implemented. Email delivery currently uses a local test inbox.
- **Complete feedback:** Loading, empty results, request failures, missing events, full gatherings and cancellation states have explicit interfaces.
- **Calendar correctness:** Event dates follow America/Chicago, including explicit handling of skipped and repeated daylight-saving times.
- **Immediate mutation feedback:** An integration fix refreshes My plans after Save/Unsave so the displayed favorite state matches stored data. Browser checks cover both directions.

## Evidence

The editorial rollout recorded 77 passing PostgreSQL backend tests, including account, permission, workspace-isolation and concurrency cases. Browser journeys checked discovery, accounts, recovery, favorites, RSVP and organizer workflows. Eleven surfaces were captured at 1440, 768, 390 and 360px, without recorded page-level horizontal overflow or browser exceptions in that rollout journey.

Actual desktop and phone screenshots were compared against the approved editorial reference. TypeScript and the production build passed; Austin time helpers have dedicated transition checks. These results describe a particular verified local build, not a guarantee of zero bugs, production capacity or physical-device compatibility.

The repository contains the evidence under `verification/editorial-rollout/`, including `backend-results.xml`, `browser-results.json` and `REVIEW.md`. A visual comparison is available at `/design-review/index.html` when the app is running.

## What this demonstrates

Responsive frontend implementation, REST API integration, database-backed state and end-to-end participant/organizer workflows. A central lesson is that visual quality needs to survive real interactions: changing a filter, signing in, saving a favorite, cancelling a reservation and recovering from a failed request.

## Remaining work

Public deployment, domain configuration and external email delivery remain incomplete. Physical-phone checks and comprehensive accessibility/security audits have not been performed. No real event notification system, payments, adoption metrics or testimonials are included.

## Review the application

When running locally, open `/` for Explore, `/demo` for an isolated participant/organizer demo, or `/case-study/index.html` for the illustrated case study. These relative routes become public links only after deployment.