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.

To make these prompts truly effective for a coding assistant like Gemini or Codex, they need to define the input, the logic, and the expected UI change.

Here are seven precise, "pro-level" prompts for Phase 2 of your Personal Dashboard.

🛠️ Phase 2: High-Precision Iteration Prompts

Use the next prompts to enhacne your dashboard with more features. Often is less more and small iterations make it easier to get better results.

When you enable git you can also always go back and undo changes.

Also the Planing-Mode in many agents can help to layout a plan before doing any major tasks.

1. Real-Time Fuzzy Search & Filtering

"Implement a global search bar at the top of the dashboard.
As the user types, it should filter the displayed
categories and links in real-time. Use a simple fuzzy-matching
logic so 
that searching for 'git' matches 'GitHub' or
'GitLab'. If a category has no matching links, hide the
entire category heading from the view to keep the UI clean."

2. Dynamic Favicon & Metadata Fetching

3. Persistent Dark Mode & System Preference

"

Add a theme toggle component (Sun/Moon icon). Implement aThe system
thatshould checkscheck for the user's OS preference (using
'prefers-color-scheme)scheme' on the first visit but allowsallow manual
override. Store the chosen theme in localStoragelocalStorage. and applyApply
a 'dark' class to the root HTML element.element Ensureand ensure all
Tailwind/CSS transitions for background and text colors are smooth (300ms duration)."

4. Drag-and-Drop Reordering (Persistent)

"

Integrate a drag-and-drop library (like dnd-kit or react-beautiful-dnd)kit) to allow
reordering of links within a category. When a link is
dropped in a new position,dropped, send a PATCH request to the backend to update a
sort_order'sort_order' integer field in the database. Ensure the UI
updates optimistically so there is no visual lag while
the database saves the new order."

5. Data Portability: JSON Backup & Restore

"

Create a 'System' modal that allows usersdata to manage their data.management.
Include an 'Export' button that generates and downloads
a 'dashboard_backup.jsonjson' file containing all categories and links.data.
Also, include a file upload input for 'Import' that
parses athe JSON file, validates the schema, and performs
a bulk-insert into the database,database overwritingto orrestore mergingthe withsetup.
existing data."

6. Smart URL Validation & Auto-Naming

"

Improve the 'Add New Link' form. When a user pastes a URL into the input field,URL,
use a regex to validate it's a proper URL.it. If valid, use a client-side
fetch or a server-side route to attempt to scrape the
<title> tag of that websitewebsite. and automaticallyAutomatically populate the
'Link Name' field,field with this title, allowing the user to
edit it before saving."

7. Keyboard Navigation & "Quick Actions"

"

Implement global 'Hotkeys' for power users. Pressing '/'
should instantly focus the search bar; pressing n'n'
should open the 'Add New Link' modal; and pressing Esc'Esc'
should close any open modals. Add a small 'Command Palette' footer or
tooltip that visually reminds the user of these
shortcuts to improve discoverability."

💡 Implementation Tip

When using these, I recommend pasting the relevant file code (e.g., your page.tsx or api/links.js) along with the prompt. This prevents the AI from hallucinating variable names that don't exist in your project.

Would you like me to draft the SQL schema or the JSON structure that would support these features (specifically for the 'sort_order' and 'favicon' logic)?

Back to top