Prototype

Stories Mailbox - Supabase Connection

Type: Backend Development Context: The initial website used sample stories stored directly inside the code, so I connected the archive to Supabase in order to receive, preserve and retrieve genuine public submissions.

Objective

Hard-coded stories were enough for demonstrating the interface, but they did not make the website a real archive. Any new entry would have required manually changing the website files. The objective of this stage was to create persistent online storage that could receive submissions, retain their categories and return approved stories to the public interface.

Process Breakdown

Structuring the Story Data

I first identified which information needed to be stored with every contribution. This included the story itself, language, family-closeness category, narrative focus, emotional tone, connected prompt and publication status.

Connecting the Submission Page

The submission interface was then connected to the database so that completed postcards could be saved as new records. Each new story enters the system with a pending status rather than appearing publicly immediately.

Loading Approved Stories

The gallery and story-matching interactions retrieve approved entries from Supabase. This means the same database can support multiple archive experiences without duplicating content across different website files.

Supporting Filtering

Because the visual choices made during submission are saved as structured categories, the archive can later query stories according to family closeness, narrative focus, tone and language.

Designing Additional Interface States

Connecting the live database also required several states that did not exist in the static prototype. The website needed to communicate when data was loading, when a submission had succeeded, when no matching story was available and when the connection had failed.

Key Takeaways

  • The Supabase connection transformed the website from a visual archive mock-up into a functioning collection and retrieval system.
  • Designing the database made it necessary to balance expressive story categories with the consistency required for filtering and moderation.

Reflection

  • This was the point where the archive began to feel like a living platform rather than a designed website demonstration.
  • The technical connection also introduced responsibilities relating to maintenance, privacy and long-term stewardship.
  • I realised that collecting stories is much easier than responsibly managing what happens to them afterwards.