A modern medical records management system built with React, TypeScript, Vite, and Tailwind CSS.
- Dashboard: Overview of patient access, file reviews, external shares, and access alerts
- Patient Management: Complete patient registry with search, filtering, and detailed profiles
- Department Management: Organize and manage medical departments (Cardiology, Oncology, Pediatrics, Laboratory)
- File Management: Upload and organize medical files with metadata
- Public Medical Folders: Share medical records externally with access controls
- Notifications: Real-time notifications for patient updates, access requests, and system alerts
- Dark/Light Mode: Toggle between dark and light themes
- Responsive Design: Works seamlessly on desktop and mobile devices
- Frontend: React 19, TypeScript, Vite
- Styling: Tailwind CSS 4, Custom CSS
- Icons: Lucide React
- Animations: Motion (Framer Motion)
- Backend: Express.js, Node.js
- Database: Better-SQLite3 (for future use)
src/
├── api/ # API calls and data fetching
├── components/
│ ├── common/ # Reusable UI components (StatCard, DefaultView)
│ ├── dashboard/ # Dashboard-specific components
│ ├── departments/ # Department views and management
│ ├── folders/ # Public folder management
│ ├── layout/ # Layout components (Sidebar, Header)
│ ├── modals/ # Modal components (upload, create, notifications)
│ └── patients/ # Patient-related components
├── constants/ # Constants and configuration
├── types/ # TypeScript interfaces and types
├── App.tsx # Main application component
├── main.tsx # Application entry point
└── index.css # Global styles
server/
└── index.ts # Express server with API endpoints
- Node.js (v18 or higher)
- npm or yarn
- Install dependencies:
npm install- Set up environment variables (optional):
cp .env.example .env.localEdit .env.local and add your Gemini API key if needed.
Run the development server:
npm run devThis will start:
- Express server on
http://localhost:3000 - Vite dev server with HMR
- API endpoints at
/api/*
The app will be available at http://localhost:3000
Build the application:
npm run buildPreview the production build:
npm run previewRun TypeScript type checking:
npm run lintGET /api/patients- Fetch all patientsGET /api/stats- Fetch dashboard statistics
npm run dev- Start development server with Express and Vitenpm run dev:vite- Start Vite dev server only (for frontend development)npm run build- Build for productionnpm run preview- Preview production buildnpm run clean- Clean build directorynpm run lint- Run TypeScript type checking
- View all patients in a searchable, filterable table
- Click on any patient to view their detailed profile
- View patient files and medical records
- Filter by status (Discharged, ICU, Admitted, Outpatient)
- Filter by department
- View all departments with patient counts and storage usage
- Click on a department to see department-specific patients and files
- Create new departments with custom settings
- Manage department permissions and access controls
- Upload medical files with drag-and-drop support
- Add metadata (title, category, date, priority, physician, tags)
- Set access controls and sensitivity levels
- Support for multiple file formats (PDF, JPG, PNG, DOCX, DICOM)
- Real-time notifications for patient updates
- Access request notifications
- External share activity tracking
- System alerts and unusual access patterns
- Customizable notification settings
This project follows industry-standard React and TypeScript conventions. When contributing:
- Keep components small and focused
- Use TypeScript interfaces for all props
- Follow the existing folder structure
- Write clean, readable code with proper comments
- Test your changes before submitting
Private - All rights reserved
For support, please contact the development team.