A professional HR management system with real-time feedback, absence management, and employee directory. Now featuring a production-grade backend API with SQLite database and JWT authentication.
- Authentication System - JWT-based secure authentication with role-based access control
- Feedback Management - Give and receive feedback with AI-powered text polishing (Hugging Face Transformers)
- Absence Requests - Submit, approve, and track vacation/sick leave
- Employee Directory - View team members and organizational structure
- Real Database Persistence - SQLite with Drizzle ORM for production-ready data storage
- React 18 + TypeScript + Vite
- Tailwind CSS for styling
- TanStack Query for data fetching
- React Router for navigation
- Hugging Face Transformers (WebGPU) for AI features
- Hono - Ultra-fast web framework
- Drizzle ORM - TypeScript-first ORM
- SQLite - Zero-config database
- JWT Authentication
- RESTful API with role-based access
📖 Complete API Documentation →
- Node.js 18+ and npm (recommended: install via nvm)
- Git for version control
# Clone the repository
git clone <YOUR_GIT_URL>
cd <YOUR_PROJECT_NAME>
# Install dependencies
npm install
# Initialize database with seed data
npm run db:setup
# Start development servers (API + Frontend)
npm run devnpm run dev # Run both API and frontend concurrently
npm run dev:api # Run backend API only (port 3001)
npm run dev:frontend # Run frontend only (port 8080/8081)
npm run build # Production build
npm run db:seed # Reseed database (clears existing data)
npm run db:push # Push schema changes to databaseAll demo accounts use the password: password123
| Role | Access Level | |
|---|---|---|
| Manager | john.manager@rabbithr.com | Full team management & approval |
| Employee | alice.johnson@rabbithr.com | Personal profile & feedback |
| Employee | bob.smith@rabbithr.com | Personal profile & feedback |
- Frontend: http://localhost:8081 (fallback: 8080)
- Backend API: http://localhost:3001
- Health Check: http://localhost:3001/health
This project demonstrates enterprise-grade code organization principles:
All magic strings, API endpoints, and configuration values are centralized to ensure:
- Single Source of Truth: Change API URLs or labels in one place
- Type Safety: TypeScript const assertions for compile-time validation
- Maintainability: Easy to locate and update configuration
- Consistency: Prevents typos and duplicate string literals across codebase
Reusable helper functions organized by domain (auth, date, storage, validation):
- DRY Principle: Zero code duplication - shared logic lives in utilities
- Testability: Pure functions are easily unit-testable
- Barrel Exports: Clean imports (
import { isManager, formatDate } from '@/utils') - Performance: Avoid recreating common logic patterns
- JWT-based authentication with httpOnly cookie strategy (production-ready)
- Role-based access control (RBAC) enforced at both API and UI layers
- bcrypt password hashing (10 salt rounds)
- Domain validation: Email addresses restricted to
@rabbithr.com(enforced frontend + backend) - Auth middleware validates tokens on protected routes
- SQLite with WAL mode for concurrent read/write performance
- Drizzle ORM for type-safe database queries with zero runtime overhead
- Relational integrity: Foreign key constraints for manager-employee relationships
- Migration-first: Schema changes tracked via Drizzle migrations
- Seed data isolation: Development data doesn't pollute production
- Component Composition: Layout wrapper pattern for authenticated pages
- Smart Data Fetching: TanStack Query for caching, invalidation, and optimistic updates
- Type-Safe API Layer: Centralized API service with TypeScript interfaces
- Separation of Concerns: Pages → Components → UI primitives
- Path Aliases (
@/): Cleaner imports, easier refactoring
- WebGPU-accelerated AI: Client-side text generation with Hugging Face Transformers
- Lazy Loading: AI models loaded on-demand (not on initial bundle)
- Query Caching: TanStack Query reduces redundant API calls
- Database Indexing: Indexed foreign keys for faster joins
- Optimistic UI Updates: Instant feedback before server confirmation
| Technology | Why Chosen |
|---|---|
| Hono | Ultra-fast edge runtime, 3.5x faster than Express |
| Drizzle ORM | Type-safe SQL, zero runtime overhead, best-in-class DX |
| SQLite | Zero-config, serverless, perfect for MVP → production scale |
| Tailwind CSS | Utility-first approach, rapid development, small bundle size |
| TanStack Query | Industry standard for async state, built-in caching |
| Vite | Lightning-fast HMR, optimized production builds |
Given more development time, I would enhance:
- Unit Tests: Vitest for utilities, hooks, and pure functions
- Integration Tests: API route testing with supertest
- E2E Tests: Playwright for critical user flows (auth, feedback submission)
- Test Coverage: Aim for 80%+ coverage on business logic
- Error Tracking: Sentry integration for production error monitoring
- Performance Metrics: Web Vitals tracking (LCP, FID, CLS)
- API Analytics: Request timing, slow query detection
- User Analytics: Posthog or Mixpanel for product insights
- Rate Limiting: Prevent brute-force attacks on login endpoints
- CSRF Protection: Additional token validation for state-changing operations
- SQL Injection Prevention: Parameterized queries (already implemented, but add validation layer)
- XSS Sanitization: Content Security Policy headers
- Audit Logging: Track sensitive operations (role changes, approvals)
- Database Migration to PostgreSQL: For larger teams (1000+ employees)
- Redis Caching: Cache frequently accessed data (team members, feedback counts)
- Background Jobs: Bull/BullMQ for email notifications, report generation
- Horizontal Scaling: Stateless API design already supports load balancing
- CDN Integration: Static asset delivery via Cloudflare/CloudFront
- Real-time Notifications: WebSocket or SSE for instant feedback alerts
- Advanced Reporting: Export feedback trends, absence analytics to PDF/Excel
- Calendar Integration: Google Calendar sync for absence requests
- Mobile App: React Native version sharing API backend
- Multi-language Support: i18n for global teams
- Performance Review Cycles: Quarterly review templates, 360-degree feedback
- Org Chart Visualization: D3.js interactive organizational hierarchy
- Storybook: Component library documentation
- API Documentation: OpenAPI/Swagger auto-generated docs
- Docker Compose: One-command local development environment
- CI/CD Pipeline: GitHub Actions for automated testing and deployment
- Pre-commit Hooks: Husky + lint-staged for code quality gates
- Sentiment Analysis: Analyze feedback tone (positive/constructive detection)
- Smart Suggestions: AI-powered feedback templates based on context
- Predictive Analytics: Identify employees needing support based on feedback patterns
- Language Translation: Auto-translate feedback for multilingual teams
This project is built with:
- Vite
- TypeScript
- React
- Tailwind CSS
- Hono (Backend)
- Drizzle ORM + SQLite
This project can be deployed to any Node.js hosting platform that supports:
- Node.js 18+
- SQLite database
- Environment variables for configuration
Recommended platforms: Vercel, Railway, Render, or any VPS with Node.js support.