Frontend Nav

WebNav: Your Modern Front-End Resource Hub & Card Generator

WebNav is a front-end navigation website designed to help developers collect and organize high-quality domestic and foreign front-end related websites. It simplifies personal resource management and uniquely allows users to capture web page information with a single click, generating visually appealing, shareable cards. Built with Next.js 13, it serves as both a practical tool and a learning project demonstrating modern web application development techniques, including authentication and API integration.

Features:

• Next.js App Directory: Utilizes the new /app directory for modern routing and layouts.
• Server and Client Components: Employs React Server and Client Components for optimized performance.
• Radix UI Components: Builds UI with accessible, unstyled primitives from Radix UI.
• Tailwind CSS Styling: Leverages utility-first Tailwind CSS for styling.
• Dark Mode Support: Features light/dark mode toggle using next-themes.
• NextAuth.js Authentication: Implements user authentication with NextAuth.js.
• Prisma ORM: Uses Prisma for type-safe database access with MySQL.
• PlanetScale Database: Connects to a MySQL database hosted on PlanetScale.
• TypeScript Development: Written in TypeScript for enhanced code quality and maintainability.
• Puppeteer Screenshots: Captures webpage screenshots using Puppeteer for card generation.
• Coze API Integration: Includes functionality to call the Coze API.
• Responsive Design: Adapts to mobile devices for a seamless user experience.
• One-Click Vercel Deploy: Offers a simple one-click deployment option to Vercel.
• Website Collection: Allows users to collect and organize high-quality front-end websites.
• Shareable Card Generation: Captures webpage information to create shareable cards.

Summary:

WebNav is a comprehensive front-end navigation tool that enables developers to curate a personal collection of valuable web resources. Beyond simple bookmarking, it offers a unique feature to capture webpage details and generate shareable cards. Built on a modern stack including Next.js, Tailwind CSS, Prisma, and NextAuth.js, it's an excellent resource for both personal productivity and as an example of contemporary web application architecture.