Mosaik - Modern Dashboard Application

A beautiful and modern dashboard application built with Next.js 16, React 19, and Tailwind CSS.

Features

• 🔐 Authentication System

  • Beautiful login page
  • User registration
  • Session management with localStorage
  • Protected routes

• 📊 Dashboard

  • Modern and responsive UI
  • Statistics cards
  • Recent activity feed
  • Quick actions panel
  • User profile management

• 🎨 UI/UX

  • Gradient backgrounds
  • Dark mode support
  • Smooth transitions and animations
  • Mobile-responsive design
  • Modern glassmorphism effects

Getting Started

Prerequisites

• Node.js 18+ installed
• npm or yarn package manager

Installation

1. Navigate to the project directory:

cd ~/Mosaik

2. Install dependencies (already done):

npm install

3. Run the development server:

npm run dev

4. Open your browser and navigate to:

http://localhost:3000

Project Structure

Mosaik/
├── app/
│   ├── components/
│   │   └── AuthProvider.tsx    # Authentication context provider
│   ├── dashboard/
│   │   └── page.tsx           # Dashboard page
│   ├── login/
│   │   └── page.tsx           # Login page
│   ├── register/
│   │   └── page.tsx           # Register page
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Home page (redirects)
├── middleware.ts              # Next.js middleware
├── next.config.ts             # Next.js configuration
├── tailwind.config.ts         # Tailwind CSS configuration
└── package.json               # Project dependencies

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm start - Start production server
• npm run lint - Run ESLint

Technology Stack

• Framework: Next.js 16
• UI Library: React 19
• Styling: Tailwind CSS 4
• Language: TypeScript
• Font: Geist Sans & Geist Mono

Authentication

Currently using localStorage for demo purposes. For production:

• Replace localStorage with secure HTTP-only cookies
• Implement proper backend API
• Add JWT token authentication
• Implement refresh token mechanism
• Add password encryption

Pages

Login (/login)

• Email and password input
• Remember me option
• Forgot password link
• Social login buttons (UI only)
• Link to registration

Register (/register)

• Full name input
• Email and password fields
• Password confirmation
• Terms and conditions checkbox
• Social registration buttons (UI only)
• Link to login

Dashboard (/dashboard)

• Protected route (requires authentication)
• Statistics overview
• Recent activity feed
• Quick action buttons
• User profile display
• Logout functionality

Customization

Colors

Modify the gradient colors in each page component or update Tailwind configuration.

Branding

Replace the "M" logo with your own logo in:

• /app/login/page.tsx
• /app/register/page.tsx
• /app/dashboard/page.tsx

Features

Add new features by creating new pages in the app directory.

Security Notes

⚠️ Important: This is a demo application. For production use:

• Implement server-side authentication
• Use secure session management
• Add CSRF protection
• Implement rate limiting
• Use HTTPS only
• Add input validation
• Implement proper error handling
• Add logging and monitoring

License

This project is created for demonstration purposes.

Support

For questions or issues, please refer to the Next.js documentation:

• Next.js Documentation
• React Documentation
• Tailwind CSS Documentation