A comprehensive dashboard application built with Next.js 15, TypeScript, and modern web technologies. StackMatch Dashboard provides a powerful platform for managing environments, user profiles, analytics, and more.
- 🔐 Authentication & Authorization - Complete auth system with profile management
- 👥 User Management - User profiles with avatar uploads and settings
- 🏗️ Environment Management - Create, edit, and manage development environments
- 📊 Analytics Dashboard - Comprehensive analytics and insights
- 🎨 Modern UI - Built with Radix UI components and Tailwind CSS
- 🌓 Dark/Light Mode - Theme switching with system preference detection
- 📱 Responsive Design - Optimized for all device sizes
- ⚡ Performance - Optimized with Next.js 15 App Router and server components
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS with custom animations
- UI Components: Radix UI primitives
- Database: Supabase with SSR support
- Icons: Lucide React
- Animation: Motion
- Development: ESLint, PostCSS, and TypeScript compiler
- Node.js 18.x or later
- npm, yarn, pnpm, or bun package manager
- Clone the repository:
git clone <repository-url>
cd stackmatch-dashboard- Install dependencies:
npm install
# or
yarn install
# or
pnpm install
# or
bun install- Set up environment variables:
cp .env.example .env.localConfigure your Supabase credentials and other environment variables.
- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev- Open http://localhost:3000 in your browser to see the application.
src/
├── app/ # Next.js App Router pages
│ ├── auth/ # Authentication pages
│ ├── dashboard/ # Main dashboard
│ ├── environments/ # Environment management
│ ├── profile/ # User profile pages
│ ├── analytics/ # Analytics dashboard
│ └── settings/ # Application settings
├── components/ # Reusable React components
│ ├── ui/ # UI primitives (Radix-based)
│ ├── magicui/ # Custom UI components
│ └── docs/ # Documentation components
└── lib/ # Utility libraries
├── supabase/ # Supabase client configuration
└── utils.ts # Utility functions
- Secure user authentication with Supabase
- Profile completion flow
- Password reset functionality
- Session management with SSR support
- Interactive dashboard with real-time data
- Environment overview and management
- User analytics and insights
- Responsive card-based layout
- Create and configure development environments
- Environment comparison tools
- Public and private environment listings
- Environment editing and version control
- Smooth animations and transitions
- Loading states and progress indicators
- Toast notifications for user feedback
- Accessible design with keyboard navigation
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint for code quality
The easiest way to deploy is using the Vercel Platform:
- Push your code to a Git repository
- Import your project on Vercel
- Configure environment variables
- Deploy!
This application can be deployed on any platform that supports Node.js:
- Netlify: Build command
npm run build, publish directoryout - Railway: Automatic deployment from Git
- Docker: Use the provided Dockerfile (if available)
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the terms specified in the LICENSE file.
For support and questions:
- Check the documentation in the
/src/components/docsdirectory - Review the code examples in the components
- Open an issue for bug reports or feature requests
Built with ❤️ using Next.js and modern web technologies.