Project
Roulette

Your First DB App

The objective of Your First DB App is to provide a gentle introduction to database concepts and learning one use case for databases in a frontend app.

BeginnerWeb appSocial4–11hAI-buildable 3/5needs backendworth shipping

Understanding database concepts and how to use them in your applications is knowledge all developers need to acquire. The objective of Your First DB App is to provide a gentle introduction to database concepts and learning one use case for databases in a frontend app. So, did you know that modern browsers have a database management system built into them? IndexedDB is built into most modern browsers and provides developers with basic database features, transaction support, and client-side cross-session persistance. ### Requirements & Constraints - The primary use case for a browser based…

UI
Logic
Useful

Hosting · Free tier, sleeps when idle

Deploys free on Vercel Hobby + Supabase free or Cloudflare Pages + Turso free.

Free database tiers pause or expire when a project sits idle, so this one needs occasional attention to stay up.

Deploy it and share a link.

Core features · 12

  • User can see a web page containing a control panel containing three
  • User can see a notification panel where status messages will be posted.
  • User can see a scrollable log panel where execution details describing
  • User can see a running history of notification panel messages in the log
  • User can see a scrollable query results area where retrieved customer
  • User can click the 'Load DB' button to populate the database with data.
  • User can see a message displayed in the notification panel when the
  • User can click the 'Query DB' button to list all customers in the query
  • User can see a message in the notification panel when the query starts
  • User can see a message in the query results area if there are no rows
  • User can click on the 'Clear DB' button to remove all rows from the
  • User can see a message in the notification panel when the clear

Once it works

  • User can see buttons enabled and disabled according to the following
  • User can see additional Customer data fields added to those included
  • Developer should conduct a retrospection on this project:
  • What use cases can you see for using IndexedDB in your frontend apps?
  • What advantages and disadvantages can you see over using a file or
  • In general, what criteria might you use to determine if IndexedDB is right

Suggested stack

reacttypescripttailwindthree.jsfuse.jstanstack-querylocalstoragesupabase

Track it