Preface
Hello everyone! I’m a newbie programmer who recently completed a personal navigation site project with the help of AI. This is my first time trying to share something, so please go easy on me! ![]()
Project Overview
A modern navigation site featuring a card-based layout and glassmorphism design style, fully deployed using Cloudflare’s free services.
Main Features
Glassmorphism Effect – Modern glass-style design
Responsive Layout – Perfectly adapts to all devices
Real-Time Search – Quickly find sites
Category Management – Organize navigation with multi-level categories
Logo Auto-fetching – Supports one-click logo fetch via Google/toolb.cn dual API
Admin Panel – Full-featured CRUD operations
One-Click Deployment – GitHub Actions automatic deployment
Tech Stack
- Cloudflare Workers – Serverless backend
- Cloudflare D1 – SQLite edge database
- Cloudflare KV – Key-value storage (for images)
- Vanilla JavaScript – No framework dependencies
Deployment Steps
- Fork the repository
- Configure 4 GitHub Secrets (API Token, Account ID, D1 ID, KV ID)
- Run Initialize Database to set up the database (first time only)
- Run Deploy to Cloudflare to go live
Default admin password: admin123
Project Link
GitHub: GitHub - debbide/nav-dashboard · GitHub
Final Words
This was my first time using AI to help with a project, and it took me just a few days from start to finish. I stepped on quite a few landmines along the way, but I also learned a lot.
The code is probably still far from perfect—feel free to open an Issue or give it a Star ![]()
If you have any questions, let’s chat in the comments! I’ll do my best to reply when I see them~
