A modern Blockful's portal built with Next.js 15, React 19, TypeScript, and Tailwind CSS 4, providing essential internal management features for companies.
- Dashboard: Overview with statistics and quick actions
- Reimbursement System: Complete form with validation and file upload
- OOO (Out of Office) Status: Absence configuration with personalized messages
- Internal Messaging: Chat system between employees
- Blockful News Portal: News feed with filters and categories
- Calendar: Event visualization with Google Calendar integration
- Responsive Header: Adaptive navigation for desktop and mobile
- Dark/Light Theme: Theme switching with smooth transitions
- Sound Effects: Interactive audio feedback using Howler.js
- Authentication: NextAuth.js integration with GitHub OAuth
- Next.js 15: React framework with App Router
- React 19: UI library with latest features
- TypeScript: Static typing for JavaScript
- Tailwind CSS 4: Utility-first CSS framework
- React Hook Form: Form management with validation
- Zod: Schema validation
- Lucide React: Modern icon library
- date-fns: Date manipulation utilities
- Howler.js: Audio library for sound effects
- NextAuth.js: Authentication solution
- Next Themes: Theme management
- Clone the repository
git clone <repository-url>
cd portal- Install dependencies
npm install
# or
yarn install
# or
pnpm install- Run the development server
npm run dev
# or
yarn dev
# or
pnpm dev- Access the application Open http://localhost:3000 in your browser.
portal/
├── src/
│ ├── app/
│ │ ├── page.tsx # Main dashboard
│ │ ├── reimbursement/
│ │ │ └── page.tsx # Reimbursement form
│ │ ├── ooo/
│ │ │ └── page.tsx # OOO status configuration
│ │ ├── messages/
│ │ │ └── page.tsx # Internal messaging system
│ │ ├── news/
│ │ │ └── page.tsx # Blockful news portal
│ │ ├── calendar/
│ │ │ └── page.tsx # Event calendar
│ │ ├── api/
│ │ │ └── auth/
│ │ │ └── [...nextauth]/
│ │ │ └── route.ts # NextAuth API routes
│ │ ├── shared/
│ │ │ ├── libs/
│ │ │ │ └── cn.ts # Utility functions
│ │ │ └── server/
│ │ │ └── auth.ts # Server-side auth utilities
│ │ ├── globals.css # Global styles
│ │ └── layout.tsx # Root layout
│ └── components/
│ ├── Header.tsx # Responsive header component
│ ├── ThemeSwitch.tsx # Theme toggle component
│ └── ui/ # Reusable UI components
├── public/
│ └── sounds/ # Audio files for interactions
├── package.json
└── README.md
- Overview statistics and metrics
- Quick action cards for main features
- Recent activity display
- Responsive grid layout
- Dark/light theme support
- Complete form with Zod validation
- File upload for receipts and documents
- Expense categorization
- Real-time form validation
- Responsive design with accessibility features
- Absence period configuration
- Customizable absence messages
- Emergency contact information
- Active/inactive status toggle
- Date range validation
- Real-time chat interface
- Contact list with online status
- Message search functionality
- Unread message indicators
- Responsive chat layout
- News feed with categories
- Search and filtering options
- Important news highlighting
- Tag-based categorization
- Read/unread status tracking
- Monthly event visualization
- Event details and descriptions
- Color-coded event categories
- Navigation between months
- Google Calendar integration ready
- Seamless dark/light theme switching
- Persistent theme preferences
- Smooth color transitions
- Consistent design language
- Interactive audio feedback
- Gaming-inspired sound design
- Configurable audio settings
- Enhanced user experience
- Mobile-first approach
- Adaptive navigation
- Touch-friendly interfaces
- Cross-device compatibility
Create a .env.local file in the root directory:
# NextAuth Configuration
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key
# GitHub OAuth (for authentication)
GITHUB_ID=your-github-client-id
GITHUB_SECRET=your-github-client-secret
# Google Calendar (for future integration)
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret-
Create a GitHub OAuth App
- Go to GitHub Settings > Developer settings > OAuth Apps
- Set callback URL to
http://localhost:3000/api/auth/callback/github
-
Configure NextAuth
- Update environment variables with your GitHub credentials
- Customize authentication providers as needed
Get your token from: https://github.com/settings/tokens
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License. See the LICENSE file for details.
For questions or support:
- Open an issue on GitHub
- Contact the development team
- Check the documentation
Built with ❤️ to enhance employee experience and productivity