Skip to main content

🚀 Week 01: The Personal Dashboard

"Your Digital Command Center"

Welcome to the first real build of AI Bootcamp 2026. This week, we aren't just coding; we are reclaiming your browser. Instead of a cluttered "New Tab" page, you’re building a lightning-fast, minimalist link organizer that lives on your machine.

The goal for this milestone is to master CRUD (Create, Read, Update, Delete) operations and understand how a frontend interface talks to a local database.

🛠️ Phase 1: The Foundation

Before you paste your prompt into an AI, you need to decide on your Tech Stack. The "best" stack is the one that lets you ship the fastest, but here are two recommended paths:

Stack Why choose it?
Next.js + Tailwind + SQLite The modern industry standard. Fast, sleek, and everything stays in one folder.
Python (Flask) + Bootstrap + TinyDB Great if you prefer a lighter, more logic-focused backend approach.

Action Item: Decide on your language. Do you want to go the JavaScript/TypeScript route or the Python route?

🤖 The Master Prompt

Once you've picked your stack, use this comprehensive prompt to generate the "v1.0" of your dashboard:

Build me a personal link dashboard that I'll use as my browser's new tab page.
[INSERT CHOSEN STACK HERE: e.g., Using Next.js and SQLite]

The app organizes links into categories. Each category has a name and contains multiple links. 
Each link has a name and a URL.

Features I need:
- Display links grouped by category in a clean grid/card layout.
- Add a new link (with name, URL, and category selection).
- Edit and Delete existing links.
- Create and delete entire categories.
- Store everything in a local database (setup instructions included).
- Run on localhost.

Design: Make it clean, dark-mode friendly, and minimal. It must load instantly.

📈 Phase 2: The "Seven Sprints" (Iterative Improvements)

Building the base is only 50% of the work. To turn this into a professional-grade tool, use these 7 follow-up prompts to refine your product:

  1. Search & Filter: "Add a global search bar at the top that filters links in real-time as I type."
  2. Favicon Fetcher: "Automatically fetch and display the favicon (icon) for each URL so I can identify links visually."
  3. Drag-and-Drop: "Implement drag-and-drop functionality so I can reorder links within a category or move them between categories."
  4. Weather Integration: "Add a small, minimal weather widget in the corner that uses a free API to show my local temperature."
  5. Quick-Key Navigation: "Add keyboard shortcuts (e.g., pressing '1' opens the first link in my 'Work' category)."
  6. Import/Export: "Create a 'Backup' feature that allows me to export my entire link database as a JSON file and import it back later."
  7. Performance Polish: "Audit the load time. Optimize the database queries and ensure all icons are SVGs for maximum speed."

Would you like me to generate the specific starter code for one of the Tech Stacks mentioned above (Next.js or Flask) to get you moving?

Back to top