Link-in-bio page builder
intermediate3 weeksNext.jsTypeScript
Users create a public page of links with a custom handle, themes and click counts.
Why build it
Public dynamic routes, SEO metadata, auth and analytics in one product, with a visible result you can share.
Features
- Sign in and claim a handle
- Drag to reorder links
- Theme choices
- Public page at /handle with metadata
- Click counts per link
Roadmap
- p1
Auth and data
- Set up Auth.js with GitHub login
- Postgres schema for users, pages and links
- Reserve handles and validate format
- p2
Editor
- Link CRUD with server actions
- Drag-and-drop ordering
- Live preview
- p3
Public page
- Dynamic route with static rendering and revalidation
- OpenGraph image per page
- Handle 404s and banned handles
- p4
Analytics and launch
- Count clicks through a redirect route
- Rate limit the redirect
- Deploy with environment variables documented
Common pitfalls
- Letting users pick handles that collide with your own routes
- Rendering user-provided URLs without checking the protocol
Skills you will practise
- Auth
- Dynamic routing
- Server actions
- SEO metadata