A comprehensive, modern intranet dashboard built with React, TypeScript, and Tailwind CSS. Nexus provides a centralized hub for team collaboration, employee engagement, and organizational information.
This project is configured for deployment on Vercel.
- Responsive Design: Fully responsive across mobile, tablet, and desktop
- Dark/Light Mode: Complete theming system with user preference persistence
- Focus Mode: Distraction-free mode for improved productivity
- Drag & Drop: Customizable card layout with persistent preferences
- Kudos & Shout-Outs: Peer recognition system with real-time feed
- Employee Directory: Searchable directory with department filtering
- Organization Chart: Interactive hierarchical organization structure
- Profile Management: User profiles with avatar and preferences
- Team Calendar: Event management with birthdays, anniversaries, and meetings
- Company Announcements: Priority-based announcement system
- Quick Links: Customizable bookmarks with drag-and-drop reordering
- For You Feed: Personalized content and updates
- Global Search: Cmd/Ctrl+K shortcut for quick access
- Advanced Filtering: Multi-criteria filtering across all modules
- Smart Navigation: Breadcrumb navigation and quick actions
- Welcome Checklist: Interactive onboarding for new users
- Accessible Design: WCAG compliant with keyboard navigation
- Loading States: Smooth transitions and loading indicators
- Mobile-First: Optimized for touch interfaces
- React 19 - Latest React with concurrent features
- TypeScript - Type-safe development
- Vite - Lightning-fast build tool and dev server
- React Router DOM - Client-side routing
- Tailwind CSS v4 - Utility-first CSS with latest features
- Radix UI - Accessible, unstyled UI primitives
- shadcn/ui - Beautiful, reusable UI components
- Lucide React - Beautiful, customizable icons
- React Context API - Global state management
- localStorage - Persistent user preferences
- Custom Hooks - Reusable stateful logic
- react-organizational-chart - Interactive org chart visualization
- Sonner - Toast notifications
- class-variance-authority - Component variant management
nexus/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # shadcn/ui base components
│ │ ├── CompanyAnnouncements.tsx
│ │ ├── EmployeeDirectory.tsx
│ │ ├── Header.tsx
│ │ ├── KudosFeed.tsx
│ │ ├── OrganizationChart.tsx
│ │ ├── QuickLinks.tsx
│ │ ├── TeamCalendar.tsx
│ │ └── ...
│ ├── pages/ # Page components
│ │ ├── Dashboard.tsx
│ │ ├── CalendarPage.tsx
│ │ ├── EmployeeDirectoryPage.tsx
│ │ └── ...
│ ├── contexts/ # React contexts
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ ├── types/ # TypeScript type definitions
│ └── data/ # Mock data and constants
├── public/ # Static assets
└── dist/ # Build output
- Node.js 18+
- npm 9+ or yarn 1.22+
-
Clone the repository
git clone https://github.com/praveen-sripati/nexus.git cd nexus -
Install dependencies
npm install
-
Start development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
# Build the project
npm run build
# Preview the build
npm run preview-
Install Vercel CLI
npm i -g vercel
-
Deploy
vercel
The project includes a vercel.json configuration file for optimal deployment.
The build output in /dist can be deployed to any static hosting service:
- Netlify: Drag and drop the
distfolder - GitHub Pages: Use GitHub Actions with the build
- AWS S3: Upload the
distfolder contents
| Component | Description | Features |
|---|---|---|
| For You Feed | Personalized content | • Document updates • Task notifications • News items |
| Company Announcements | Official communications | • Priority levels • Search & filter • Rich content |
| Employee Directory | Team member lookup | • Department filtering • Contact information • Search functionality |
| Kudos Feed | Peer recognition | • Give/receive kudos • Real-time updates • Social interaction |
| Team Calendar | Event management | • Birthdays & anniversaries • Company events • Visual indicators |
| Quick Links | Bookmark management | • Drag & drop sorting • Add/remove links • Quick access |
- 🎯 Focus Mode: Hide distractions for deep work
- 🌙 Dark Mode: Eye-friendly dark theme
- 📱 Mobile Responsive: Optimized for all screen sizes
- ⌨️ Keyboard Shortcuts: Quick navigation (Cmd+K)
- 🔄 Drag & Drop: Customizable layout
- 💾 Persistence: Saves user preferences locally
The project uses Tailwind CSS v4 with a custom theme configuration. Modify colors and styling in:
/* src/index.css */
@theme {
--color-primary: /* your primary color */;
--color-secondary: /* your secondary color */;
}- Create component in
src/components/ - Add types to
src/types/ - Update routing in
src/App.tsx - Add to dashboard in
src/pages/Dashboard.tsx
npm run dev # Start development server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint- ESLint: Configured for React and TypeScript
- Prettier: Automatic code formatting
- TypeScript: Strict type checking enabled
- Fork the repository
- Create a feature branch:
git checkout -b feature-name - Commit changes:
git commit -am 'Add feature' - Push to branch:
git push origin feature-name - Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
- Radix UI for accessible component primitives
- shadcn/ui for the beautiful component library
- Tailwind CSS for the utility-first styling approach
- Lucide for the comprehensive icon library
Made with ❤️ by Praveen Sripati
If you find this project helpful, consider buying me a coffee - it helps fuel more projects like this!