Frontend Nav

Built with Next.js 13, TypeScript, Radix UI components, Tailwind CSS, NextAuth.js for authentication, Prisma ORM with MySQL on PlanetScale, and Puppeteer for automated screenshot generation, this project demonstrates modern web application development while solving a real problem: the overwhelming fragmentation of frontend resources across the internet. The platform features automated webpage information capture using Puppeteer to extract metadata, titles, and descriptions, shareable website cards with screenshots for visual recognition, user authentication allowing developers to save their personal collections, organized categorization of resources by topic, framework, or use case, dark mode support for comfortable browsing in different environments, and one-click deployment to Vercel for easy hosting. Inspired by the Taxonomy project, Frontend Nav emphasizes clean data presentation, intuitive navigation, and rapid resource discovery.

The application uses MySQL hosted on PlanetScale for scalable database management, Prisma for type-safe database queries, and NextAuth.js for flexible authentication supporting multiple providers. This project is valuable for developers building resource directories or curated link collections, learning modern full-stack Next.js development patterns, studying how to implement web scraping with Puppeteer for metadata extraction, creating personal knowledge bases or bookmark managers, and understanding how to build CRUD applications with authentication and database integration. Frontend Nav serves both as a practical tool for organizing frontend resources and as an educational codebase demonstrating production-ready Next.js architecture.