dev.ly — Frontend

The modern dashboard and landing page for dev.ly, a high-performance URL shortener & analytics platform. Built with Next.js 16, React 19, and Tailwind CSS 4.

---

Features

• Landing Page — Animated hero with 3D product showcase and feature highlights
• Authentication — JWT-based login & registration with protected routes
• Dashboard — Real-time overview of all shortened URLs with visit counts
• Analytics Detail — Per-URL analytics: clicks over time, browsers, OS, devices, geo, referrers, UTM tracking
• URL Management — Create, copy, and delete short URLs
• Theming — Custom theme engine with dark mode support
• Responsive — Mobile-first design with Framer Motion animations

---

ech Stack

Technology	Purpose
Next.js 16	React framework (App Router)
React 19	UI library
Tailwind CSS 4	Utility-first styling
Recharts	Data visualization (line charts, bar charts, pie charts)
Framer Motion	Animations & transitions
Lucide React	Icon library
Axios	HTTP client
React Hook Form	Form management
React Hot Toast	Notifications

---

📁 Project Structure

frontend/
├── src/
│   ├── app/                    # Next.js App Router
│   │   ├── page.tsx            # Landing page
│   │   ├── layout.tsx          # Root layout
│   │   ├── globals.css         # Global styles & theme tokens
│   │   ├── auth/               # Login & Register pages
│   │   └── dashboard/          # Dashboard & Analytics pages
│   ├── components/             # Reusable UI components
│   ├── context/                # React context (Auth)
│   ├── hooks/                  # Custom hooks (useProfileStats, etc.)
│   ├── services/               # API service layer (Axios)
│   ├── types/                  # TypeScript type definitions
│   └── lib/                    # Config & utilities
├── public/                     # Static assets
├── package.json
├── tsconfig.json
└── next.config.ts

---

Getting Started

Prerequisites

• Node.js 18+
• Backend service running on :5001
• Analytics service running on :5002

Install & Run

npm install
npm run dev

The app starts on http://localhost:3000.

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_API_URL=http://localhost:5001
NEXT_PUBLIC_ANALYTICS_URL=http://localhost:5002

---

Pages

Route	Description
/	Landing page with hero & feature showcase
/auth/login	User login
/auth/register	User registration
/dashboard	URL management dashboard
/dashboard/analytics/:id	Detailed analytics for a specific URL

---

🔗 Related Repos

Repo	Description
dev.ly	Main repo (system design & orchestration)
dev.ly-backend	URL shortener API
dev.ly-analytics	Analytics microservice