Local Hangouts.
Small plans, fully connected.
A responsive event-discovery application connecting a considered interface to a real API, user accounts and a PostgreSQL database.
- Project
- Independent portfolio application
- Author
- Mohamad Rizal Rahmadi
- Stack
- React · TypeScript · FastAPI · PostgreSQL
Built with AI assistance across planning, implementation, imagery and testing. This is a self-initiated demonstration, with no commissioning client or claimed commercial results.
A simple plan.
A complete journey.
The project brief was to make small local gatherings easy to discover and join. The challenge was to carry that idea through the whole application: finding an event, understanding its details, saving it, reserving a place and managing it as an organizer.
The scope stays deliberately focused: one city, free events and one place per account. This leaves room to demonstrate dependable interactions rather than adding payments, maps or a social feed.
A private demo also lets reviewers switch between participant and organizer roles in an isolated workspace, without using a real event catalogue.
Quiet design.
Clear decisions.
Give each gathering its own identity.
The initial direction felt too repetitive. The approved revision uses a photographic lead, distinct category images and prominent dates. Warm paper, near-black text and restrained oxblood keep the interface calm; a small amount of serif italic gives it an editorial voice.
Recompose for the phone.
Desktop uses a lead story and supporting grid. On phones, compact event rows put titles and dates beside square thumbnails. Event details bring availability and the RSVP action ahead of the long description, so joining does not depend on scrolling through the whole page.
Carry the same language into the working screens.
Saved events, My plans, accounts and organizer tools use the same type, photographs and controls. Organizer screens favor aligned rows and readable forms over a second visual theme.
The interface is
only half the work.
Connect the UI to authoritative data.
React and TypeScript consume a FastAPI REST API backed by PostgreSQL. Search, category filters, date filters and pagination run on the server. Filter state stays in the URL so refresh and back navigation retain context. Attendance counts come from reservation records rather than hard-coded interface values.
Make account and reservation state consistent.
The application supports signup, login, profile and password changes, email verification, password recovery and persistent favorites. RSVP and cancellation update My plans. Capacity checks and account permissions are enforced by the backend, including concurrent reservation tests.
Account for the edges.
Loading, empty results, failed requests, missing events, full gatherings and cancelled events have explicit feedback. Organizer actions include creating drafts, publishing, editing, cancelling and viewing attendees. Austin calendar dates and daylight-saving transitions receive dedicated handling.
One integration fix came from checking the complete flow: saving an event in My plans needed to refresh that screen’s data immediately. The final browser journey checks both Save and Unsave feedback.
Evidence,
with its limits.
The project is available as a public portfolio demo. The checks below describe an earlier local rollout with participant and organizer journeys connected to a database. The evidence below describes implementation checks, not user research or business performance.
| Check | What the evidence shows |
|---|---|
| Backend | 77 tests passed in the recorded PostgreSQL run, including account, permissions, workspace isolation and concurrency cases. |
| Browser journeys | Discovery, accounts, recovery, favorites, RSVP and organizer flows passed their recorded browser checks. |
| Responsive layout | Eleven surfaces captured at 1440, 768, 390 and 360px. No page-level horizontal overflow or browser exceptions recorded in that rollout journey. |
| Visual review | Desktop and phone captures compared with the approved editorial reference. Remaining raw action glyphs were replaced with shared SVG icons. |
| Build | TypeScript checks and the production build passed. Austin time helpers have dedicated transition checks. |
Limits of the evidence
The recorded rollout used a local test inbox for email verification and recovery. External email delivery and current production behavior have not been verified here. The app has not been validated on physical phones or certified through a comprehensive accessibility or security audit.
No real bookings, event notifications, payments, testimonials or adoption metrics are claimed.
What this project
demonstrates.
A complete example of responsive frontend work, REST API integration and stateful workflows: translating response data into the right fields, keeping user actions in sync with stored data, and treating loading and failure states as part of the product.
The main implementation lesson is practical: a convincing screenshot is only the beginning. The same visual quality has to hold when a user signs in, changes a filter, cancels a reservation or encounters an error.
See the flows for yourself.
Explore the published portfolio demo. Events and venues are fictional.