Let’s build a notes app to demonstrate database concepts:
Copy
Create a notes app where users can:- View a list of their notes- Tap a note to see full content- Create new notes with title and content- Edit existing notes- Delete notesStore notes in the database so they persist.Each user should only see their own notes.
When you request data persistence, Specular automatically creates the necessary database tables and API endpoints.
The AI analyzes your request and creates an appropriate schema:
Copy
-- Example generated table for notesCREATE TABLE notes ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id TEXT NOT NULL, title TEXT NOT NULL, content TEXT, created_at TIMESTAMP DEFAULT NOW(), updated_at TIMESTAMP DEFAULT NOW());
Create a recipes feature with this data structure:Recipes table:- id (unique identifier)- title (required, text)- description (optional, text)- prep_time (number, in minutes)- cook_time (number, in minutes)- servings (number)- image_url (optional, text)- created_at (timestamp)- user_id (link to user)Ingredients table (linked to recipes):- id (unique)- recipe_id (link to recipe)- name (required, text)- quantity (text, like "2 cups")- order (number, for sorting)Each user can only see their own recipes.
When the user submits the new recipe form:1. Validate all required fields are filled2. Save the recipe to the database3. Navigate back to the recipe list4. Show a success toast: "Recipe saved!"
On the recipes list screen:1. Fetch all recipes for the current user2. Order by created_at, newest first3. Show a loading spinner while fetching4. Show "No recipes yet" if empty
Add an edit button on the recipe detail screen:1. Tapping it shows the recipe form with existing data2. User can modify any field3. On save, update the recipe in the database4. Show success toast and return to detail view
Add delete functionality:1. Long press on a recipe shows delete option2. Show confirmation dialog: "Delete this recipe?"3. On confirm, delete from database4. Remove from list with animation
Add category filtering:- Each recipe has a category (breakfast, lunch, dinner, dessert)- Add filter chips at the top of the list- Tapping a chip shows only that category
For better UX, update the UI before the server responds:
Copy
When marking a task complete:1. Immediately show it as complete (optimistic update)2. Send the update to the server in background3. If the server request fails, revert the change4. Show an error toast if it fails
Handle database errors gracefully:- If save fails, show error message and keep form data- If fetch fails, show retry button- If delete fails, show error and keep item in list- Always show user-friendly error messages