AppShell

A modern, responsive dashboard application built with Next.js 15, TypeScript, Tailwind CSS, and shadcn/ui components.

🚀 Features

• App Shell Layout: Structured layout with sidebar navigation and top navigation (header/footer support), making it ideal as a scaffold for admin panels and internal tools.
• Modern UI: Clean visual design, built to accommodate light mode seamlessly.
• Responsive Across All Devices: Optimized UI for desktop, tablet, and mobile.
• Performance Optimized: Leveraging Next.js 15 and Turbopack for fast builds and smooth runtime performance.
• Component-Driven: Built with composable components from shadcn/ui (powered by accessible Radix UI primitives).
• Type-First Development: Full TypeScript integration ensures robust typing and cleaner developer experience.
• Demo Data Sections Included:
  • Dashboard Overview: Key metrics (Active Users, New Signups, Conversion Rate, Monthly Recurring Revenue).
  • User Activity Trends: Line/area chart tracking daily users and signups.
  • Traffic Sources: Donut/pie chart breakdown of acquisition channels.
  • Recent Activity Feed: Logs of user/system events (e.g., onboarding completions, plan upgrades, failed logins).
  • Projects & Tasks Panel: Visual progress tracking for projects like Website Redesign, Mobile App, API Integration.

Pages

This website has a main dashboard and placeholders for user and settings management. Here is a description of each section accessible from the main navigation:

• Dashboard (/): This is the main landing page of the application, offering a comprehensive overview of key metrics and recent activity. The dashboard includes:

  • Dashboard Overview: A top-level summary of key performance indicators (KPIs) like Active Users, New Signups, Conversion Rate, and Monthly Recurring Revenue.
  • User Activity Trends: A graph that visualizes daily active users and new signups over time, showing trends and growth metrics.
  • Traffic Sources: A donut chart that breaks down the sources of user acquisition, categorizing them into Direct, Organic, Paid, and Social channels.
  • Recent Activity: A feed that displays the latest user actions and system events, such as completed onboarding, plan upgrades, and failed login attempts.
  • Projects & Tasks: A section that tracks the progress of current projects, including Website Redesign, Mobile App, and API Integration, with completion percentages for each.

• Users (/users): While the direct URL could not be browsed, the navigation menu clearly indicates a "Users" page. Based on the dashboard's content, this page would likely provide more detailed information about the users, such as a list of all users, their activity, and tools for user management.

• Settings (/settings): Similar to the "Users" page, a "Settings" page is included in the navigation. This page is expected to contain options for configuring the application, managing user profiles, and setting preferences.

🛠️ Technologies Used

Core Framework

• Next.js 15.3.5: React framework with App Router and Turbopack
• React 19: Latest React version with concurrent features
• TypeScript: Type-safe development

Styling & UI

• Tailwind CSS 4: Utility-first CSS framework
• shadcn/ui: Beautifully designed components
• Radix UI: Unstyled, accessible component primitives
• Tailwind Merge: Utility for combining Tailwind classes
• Tailwind Animate: CSS animations for Tailwind

UI Components & Libraries

• @radix-ui/react-*: Component primitives (AlertDialog, Avatar, Checkbox, Dialog, Dropdown, etc.)
• Lucide React: Beautiful & consistent icon toolkit
• Framer Motion: Production-ready motion library for React
• React Hook Form: Performant, flexible forms with easy-to-use validation
• Zod: TypeScript-first schema validation
• Sonner: Beautiful toast notifications
• Recharts: Composable charting library built on React

Form Handling

• React Hook Form: Efficient form management
• Zod: Schema validation
• @hookform/resolvers: Zod integration for React Hook Form

Date & Time

• Date-fns: Modern JavaScript date utility library
• React Day Picker: Flexible date picker components

Utilities

• clsx: Tiny utility for constructing className strings
• class-variance-authority: TypeScript utility for creating variants
• next-themes: Perfect dark mode in Next.js