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