Portfolio Project

DrHue is a full-stack clinic management system designed for healthcare professionals to streamline patient care, appointment scheduling, and medical record management. Originally built as a cross-platform desktop application using Electron, this portfolio version demonstrates the core functionality through a web-based interface.

Live Preview: View Demo | Credentials: demo / demo123


Key Features

Patient Management
  • Complete patient registration and profile management
  • Medical history tracking with photo documentation
  • Advanced search and filtering capabilities
  • Patient data export and reporting
Clinical Operations
  • Doctor profiles and specialization management
  • Treatment catalog with pricing
  • Prescription management system
  • Visit tracking and billing integration
Administrative Tools
  • Multi-user authentication with role-based access
  • Comprehensive settings management
  • Payment method configuration
  • Drug inventory and instruction management


Technical Architecture

Backend Stack
  • Node.js & Express.js: RESTful API server with session management
  • MongoDB Atlas: Cloud database with connection fallback
  • Authentication: Secure session-based auth with user validation
  • Network Access: Configured for LAN deployment (0.0.0.0 binding)
Frontend Stack
  • React 19 + TypeScript: Modern, type-safe UI development
  • Tailwind CSS: Utility-first styling with custom components
  • Radix UI: Accessible component library
  • Framer Motion: Smooth animations and transitions
  • React Router: Client-side routing with protected routes


Code Examples

Express Server Setup with MongoDB Fallback
async function startServer() {
    try {
        const { MongoClient } = await import('mongodb');
        const testClient = new MongoClient(process.env.MONGO_URI);
        await testClient.connect();
        await testClient.close();
        console.log('✅ MongoDB Atlas connection successful');
    } catch (error) {
        console.log('⚠️ MongoDB connection failed, using mock data');
    }
    const app = express();
    // CORS configuration for cross-origin requests
    const corsOptions = {
        origin: ['http://localhost:6675', 'https://drhue.luckygene.net'],
        credentials: true,
    };
    app.use(cors(corsOptions));
    // Session middleware for authentication
    app.use(session({
        secret: 'drhue-demo-secret',
        resave: false,
        saveUninitialized: true,
        cookie: { secure: false, maxAge: 24 * 60 * 60 * 1000 }
    }));
    // Network-accessible server binding
    app.listen(6675, '0.0.0.0', () => {
        console.log('Server running on port 6675');
        console.log('Network: http://0.0.0.0:6675');
    });
}

React Authentication Hook
export const useAuth = () => {
    const [user, setUser] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const login = async (credentials) => {
        const response = await fetch('/api/auth/login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(credentials),
            credentials: 'include'
        });
        if (response.ok) {
            const userData = await response.json();
            setUser({
                userId: userData.userId,
                username: userData.username,
                name: userData.name,
                sysInfo: { level: userData.level || 'user' }
            });
            return true;
        }
        return false;
    };
    return { user, login, isLoading };
};

Dynamic API Route Generation
// Generic CRUD endpoint factory
function createGetEndpoint(dataKey) {
    return async (req, res) => {
        const sessionId = req.sessionID || 'default';
        try {
            const database = await initDB();
            const collection = database.collection(dataKey);
            const dbData = await collection.find({}).toArray();
            // Merge database data with session data
            const sessionStore = sessionData.get(sessionId) || {};
            const sessionItems = sessionStore[dataKey] || [];
            const combinedData = [...dbData, ...sessionItems];
            res.status(200).json(combinedData);
        } catch (error) {
            // Fallback to mock data
            const mockItems = mockData[dataKey] || [];
            res.status(200).json(mockItems);
        }
    };
}


Technical Highlights

Scalable API Design
  • RESTful endpoints with consistent error handling
  • Generic CRUD operations with dynamic route generation
  • Session-based data persistence for demo environment
  • Graceful database connection fallback
Modern React Patterns
  • Custom hooks for state management (useAuth, useSearch, useTodo)
  • Context providers for global state
  • Protected routes with authentication guards
  • Responsive design with mobile-first approach
Production-Ready Features
  • Comprehensive logging system
  • CORS configuration for cross-origin requests
  • Environment-based configuration
  • Error boundaries and graceful error handling

Project Metrics

  • Lines of Code: ~15,000+ (Full-stack implementation)
  • Components: 50+ React components
  • API Endpoints: 25+ RESTful routes
  • Database Collections: 13 data models
  • Authentication: Multi-level user management
  • Responsive Design: Mobile, tablet, and desktop optimized


Business Impact

Healthcare Efficiency
  • Streamlined patient registration and management
  • Automated prescription generation
  • Integrated billing and payment tracking
  • Comprehensive reporting capabilities
Technical Innovation
  • Modern web technologies for healthcare
  • Cross-platform compatibility
  • Network-based multi-user access
  • Scalable architecture for clinic growth


Security Features

  • Session-based authentication
  • Input validation and sanitization
  • CORS protection
  • Environment variable security
  • User role-based access control

Project Gallery