Linkify is presented as "The Link Management Platform for Businesses"—a robust tool to build, brand, track, and organize links. This project demonstrates a production-quality Next.js App Router architecture with a highly polished design system, cutting-edge UI animations, and a fully wired set of marketing surfaces.
The platform is divided into three primary surfaces: an expansive marketing site, authentication screens, and an authenticated dashboard shell, all harmoniously composed using modern Next.js paradigms.
Linkify marketing preview — the public site positions the product as a branded link, QR, and analytics platform.
Portfolio angle
Linkify is not just a landing page. It is a complete product shell for a link management SaaS: public education pages, auth entry points, dashboard navigation, and a design system prepared for real analytics and branded-link workflows.
Core Features & Functionality
A comprehensive suite of static and animated pages designed for conversion.
- Dynamic Pages: Includes detailed feature pages (Shortening, Analytics, QR Codes), tiered pricing, enterprise solutions, and a fully functional blog setup.
- Visually Striking: Employs animated hero sections, dashboard previews, bento-grid features, and continuous marquee reviews.
- Trust & Legal: Ships with structured help centers, changelogs, privacy policies, and terms of service.
Dedicated authentication routes (/auth/sign-in, /auth/sign-up) stripped of marketing navigation.
- Forms governed by react-hook-form.
- Strict schema validation via Zod.
- Optimized for seamless onboarding experiences with smooth state transitions.
The application core (/dashboard) reserved for authenticated users.
- Protected layout leveraging the
(main)route group. - Features a collapsible sidebar navigation and top-level dashboard navbar.
- Pre-scaffolded UI primitives ready to connect with backend analytics logic.
Technology Stack
Built for maximum performance, maintainability, and visual fidelity.
Next.js 14 & React 18
App Router, nested layouts, localized loading states, and advanced routing paradigms.
Tailwind CSS & shadcn/ui
Utility-first styling merged with unstyled, highly accessible Radix UI primitives.
Framer Motion & Visuals
Delivering smooth page transitions, element unveils, and custom magic effects like grids and beams.
TanStack Query & Forms
Client-side data orchestration alongside react-hook-form + zod for bulletproof form states.
Architecture & Implementation Details
Application Routing Geometry Linkify elegantly uses route groups to
apply localized layouts without muddying the URL structure: * (marketing):
Shared Navbar and Footer for all public-facing pages like /pricing or
feature breakdowns. * auth: Clean slate layout prioritizing form focus
without distractions. * (main): The authenticated app grouping for
/dashboard and internal tools.
Advanced Visual Primitives The UI folder extends standard components by
introducing specialized visual layout tools specifically aimed at SaaS
marketing: * BorderBeam & AnimatedBeam for vivid gradient strokes. *
BentoGrid, Lamp, and MagicCard for structured, glowing feature
presentations. * RetroGrid & Particles for dynamic background effects.
Utilities & Content Constants Maintaining a clean separation of
concerns, the utils directory splits functions from constants: * Constant
structures like nav-links.ts, pricing.ts, and blogs.json keep the
component tree purely compositional. * Standalone utilities like
generateMetadata() dynamically construct rich SEO and OpenGraph outputs
for marketing leverage.
Folder Structure
A standardized look at the Linkify directory architecture:
Additional Modules
The dashboard shell establishes the authenticated product workspace: persistent sidebar navigation, top-level app chrome, and empty states ready for analytics data.
Pricing & Onboarding
The pricing page turns the marketing promise into a plan comparison flow, keeping tiers and feature lists in the constants layer.
Sign in flow — a focused route outside the marketing shell.
Sign up flow — prepared for account creation and later backend integration.
Live Demo
Explore the marketing landing site, interactive visual primitives, and dashboard UI. Visit Linkify Live
