🔗 Live Demo: https://heartfelt-otter-7af208.netlify.app/
Nexus is a production-grade SaaS web application template built to demonstrate enterprise-level architecture, modern UI/UX standards, and scalable front-end engineering patterns.
This project simulates a real-world SaaS product including:
- Marketing website
- Authentication system
- Onboarding flow
- Interactive dashboard
- Team & billing management
- Dark/Light mode
- Full EN / AR internationalization with RTL support
Authentication and API layers are simulated.
- Next.js 15 App Router layout segmentation
- Middleware-based route protection
- Centralized validation layer (Zod)
- Simulated API abstraction layer
- Custom async state management hook
- Security headers via
next.config.ts - Environment variable segregation (.env public/private)
- ESLint + Prettier strict enforcement
This architecture is structured to be easily connected to a real backend (Node, Laravel, Django, etc.).
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS v4
- Components: shadcn/ui
- Icons: Lucide React
- Forms & Validation: React Hook Form + Zod
- Charts: Recharts
- Theming: next-themes (Dark/Light/System)
- High-converting landing page
- 3-tier pricing system
- Documentation layout with sticky navigation
- Accessible FAQ component
- Sign In / Sign Up with Zod validation
- Mock OAuth UI styling
- 3-step onboarding wizard
- Progress indicators and shared state layout
- KPI metric cards
- Activity feed simulation
- Recharts area chart
- Projects table with filtering, search, loading skeletons, empty states
- Team management with role badges
- Settings panel with tab system
- Billing overview with usage meters and invoices table
- English / Arabic full translation
- RTL / LTR switching with dynamic dir handling
- Persistent theme preference via localStorage
- System theme sync support
- Simulated latency (200--800ms)
- Randomized error states (10%)
- Async UI recovery patterns
Add screenshots inside:
/public/screenshots/landing.png
/public/screenshots/dashboard.png
/public/screenshots/projects.png
Install dependencies:
npm install
Create environment file:
cp .env.example .env.local
Run development server:
npm run dev
Visit: http://localhost:3000
npm run build
npm start
- Replace mock-api.ts with a real backend integration before production.
- Ensure .env secrets are securely injected via CI/CD (Vercel, Netlify, etc.).
- Never commit private environment variables.
- Review CSP headers if deploying under custom domains.
MIT License --- Free to use and adapt with attribution.
Built & Designed by Mostafa Al-Rouby
https://alroubyds.com