MedJournal AI is an advanced, AI-powered front-end platform designed to revolutionize digital health tracking, personal genomics, and smart patient communication. Built with bleeding-edge tools like Next.js 15, Framer Motion, and Mermaid.js, this project stands as a testament to innovation at the intersection of software engineering, artificial intelligence, and personalized healthcare.
🏆 Context: This project exemplifies extraordinary achievement in UI/UX innovation and intelligent healthcare system design. It contributes novel, impactful features that bridge complex data architecture and user-centered AI interaction — worthy of global recognition.
-
🧬 Intelligent Architecture Designer
Dynamically generates software architecture diagrams with Mermaid.js, tailored for healthcare systems — visual, interpretable, and export-ready. -
📈 DNA-Driven Medication Profiling
Integrates DNA methylation insights (via external APIs) to personalize medication tracking and optimize treatment plans. -
🤖 Smart Conversational Interface
Built-in chatbot workflows with pre-trained LLM endpoints for medication reminders, patient feedback, and cognitive behavior monitoring. -
🩺 Patient Review + Risk Insights Engine
Collects patient-generated feedback and renders AI-scored risk evaluations, visualized via animated parallax transitions and interactive charts. -
📊 Modular Design + SDLC Integration
Each UI card maps to a corresponding backend component in a modular, CI/CD-ready SDLC pipeline. Encourages scalable deployment across medical practices. -
🌌 Interactive UI Experience
Featuring animated 3D Spline scenes, dynamic particle systems, and subtle motion transitions that elevate user experience while preserving accessibility.
| Technology | Role in the Stack |
|---|---|
| Next.js 15 | App Router-based fullstack React framework |
| Framer Motion | Smooth, physics-driven animations |
| TailwindCSS 4 | Utility-first design system w/ dark mode |
| @shadcn/ui | Elegant UI primitives for accessibility & theme |
| Mermaid.js | Real-time diagram generation (UML, flowcharts) |
| React TSParticles | Custom particle effects for backgrounds |
| Radix UI | Accessible, headless component behavior |
| React Parallax | Parallax motion for testimonial & diagram scroll |
- Follows HIPAA-safe front-end design principles (no PII exposed in UI layer)
- Architecture supports future integration with encrypted EHR backends
- Dark mode accessibility + motion reduction preferences honored
MedJournal AI addresses the global challenge of overwhelming clinical data and lack of visual interpretability for patients and medical staff. By automating architecture documentation, AI-assisted insights, and patient interaction via intelligent UIs, this system:
- Supports scalable digital health deployment in underserved regions
- Encourages inclusive, patient-centric care through intuitive design
- Demonstrates U.S. leadership in ethical AI healthcare tooling
# Install dependencies
npm install
# Start dev server (Turbopack enabled)
npm run dev/app → Next.js App Router pages and routes
/components → Reusable UI components (Tabs, Cards, Inputs)
/animations → Spline & Parallax scenes
/utils → Mermaid parsing, DNA logic, schema validators
/public/screens → Architecture screenshot assets
This is an academic-grade, EB-1A–level portfolio project and not intended for clinical use without appropriate regulatory approvals.
Brandon Atonte
Senior Software Engineer · AI Healthcare Architect
GitHub: @Fangmbeng
Dev.to: @BrandonAtonte
Would you like me to generate the file or update your project with this README.md content now?
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.