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

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 a system that checks for the user's OS preference (prefers-color-scheme) on the first visit but allows manual override. Store the chosen theme in localStorage and apply a 'dark' class to the root HTML element. 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) to allow reordering of links within a category. When a link is dropped in a new position, send a PATCH request to the backend to update a sort_order integer field in the database. Ensure the UI updates optimistically so there is no lag while the database saves the new order."

5. Data Portability: JSON Backup & Restore

"Create a 'System' modal that allows users to manage their data. Include an 'Export' button that generates and downloads a dashboard_backup.json file containing all categories and links. Also, include a file upload input for 'Import' that parses a JSON file, validates the schema, and performs a bulk-insert into the database, overwriting or merging with existing data."

6. Smart URL Validation & Auto-Naming

"Improve the 'Add New Link' form. When a user pastes a URL into the input field, use a regex to validate it's a proper URL. If valid, use a client-side fetch or a server-side route to attempt to scrape the <title> tag of that website and automatically populate the 'Link Name' field, 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 should open the 'Add New Link' modal; and pressing 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