NeuroEase is a healthcare application designed to assist patients and caregivers with memory therapy, session scheduling, and emergency support. This project leverages modern web technologies and a modular architecture to deliver a seamless user experience.
The original design is available at Figma - NeuroEase Healthcare App Prototype.
- Project Overview
- Features
- Project Structure
- Getting Started
- Usage
- Design System
- Contributing
- Attribution
- License
NeuroEase provides tools for memory therapy, personalized session generation, emergency reassurance, and feedback collection. It is built with scalability and maintainability in mind, using a component-based architecture and reusable UI primitives.
- Onboarding: Welcomes users and guides them through authentication and app introduction.
- Dashboard: Central hub for patient information, session statistics, and navigation.
- Patient Setup: Multi-step form for creating and managing patient profiles.
- Memory Builder: Add, edit, and manage memory entries with support for photos and voice notes.
- Session Generator: AI-powered tool for generating personalized therapy sessions.
- Scheduling: Manage and view scheduled therapy sessions.
- Playback Mode: Play back generated sessions for the patient.
- Emergency Mode: Quick-access reassurance session for moments of distress.
- Feedback: Collects session feedback, including anxiety level and notes.
- Settings: User account management and app information.
- Navigation: Top navigation bar and sidebar for easy access to all sections.
NeuroEase/
│
├── index.html # Main HTML entry point
├── package.json # Project dependencies and scripts
├── vite.config.ts # Vite configuration
├── postcss.config.mjs # PostCSS configuration
├── README.md # Project documentation
├── ATTRIBUTIONS.md # Credits and attributions
│
├── guidelines/
│ └── Guidelines.md # Design and code guidelines
│
└── src/
├── main.tsx # Application entry point
│
├── app/
│ ├── App.tsx # Root application component
│ │
│ ├── components/
│ │ ├── Dashboard.tsx # Dashboard component
│ │ ├── EmergencyMode.tsx # Emergency mode component
│ │ ├── Feedback.tsx # Feedback collection component
│ │ ├── MemoryBuilder.tsx # Memory builder component
│ │ ├── Navigation.tsx # Navigation bar component
│ │ ├── Onboarding.tsx # Onboarding flow component
│ │ ├── PatientSetup.tsx # Patient setup form component
│ │ ├── PlaybackMode.tsx # Session playback component
│ │ ├── Scheduling.tsx # Session scheduling component
│ │ ├── SessionGenerator.tsx # AI session generator component
│ │ ├── Settings.tsx # Settings component
│ │ │
│ │ ├── figma/
│ │ │ └── ImageWithFallback.tsx # Image component with fallback
│ │ │
│ │ └── ui/ # Reusable UI components (shadcn/ui)
│ │ ├── accordion.tsx
│ │ ├── alert-dialog.tsx
│ │ ├── alert.tsx
│ │ ├── aspect-ratio.tsx
│ │ ├── avatar.tsx
│ │ ├── badge.tsx
│ │ ├── breadcrumb.tsx
│ │ ├── button.tsx
│ │ ├── calendar.tsx
│ │ ├── card.tsx
│ │ ├── carousel.tsx
│ │ ├── chart.tsx
│ │ ├── checkbox.tsx
│ │ ├── collapsible.tsx
│ │ ├── command.tsx
│ │ ├── context-menu.tsx
│ │ ├── dialog.tsx
│ │ ├── drawer.tsx
│ │ ├── dropdown-menu.tsx
│ │ ├── form.tsx
│ │ ├── hover-card.tsx
│ │ ├── input-otp.tsx
│ │ ├── input.tsx
│ │ ├── label.tsx
│ │ ├── menubar.tsx
│ │ ├── navigation-menu.tsx
│ │ ├── pagination.tsx
│ │ ├── popover.tsx
│ │ ├── progress.tsx
│ │ ├── radio-group.tsx
│ │ ├── resizable.tsx
│ │ ├── scroll-area.tsx
│ │ ├── select.tsx
│ │ ├── separator.tsx
│ │ ├── sheet.tsx
│ │ ├── sidebar.tsx
│ │ ├── skeleton.tsx
│ │ ├── slider.tsx
│ │ ├── sonner.tsx
│ │ ├── switch.tsx
│ │ ├── table.tsx
│ │ ├── tabs.tsx
│ │ ├── textarea.tsx
│ │ ├── toggle-group.tsx
│ │ ├── toggle.tsx
│ │ ├── tooltip.tsx
│ │ ├── use-mobile.ts
│ │ └── utils.ts
│ │
│ └── data/
│ └── mockData.ts # Mock data for development
│
└── styles/
├── fonts.css # Font definitions
├── index.css # Main stylesheet
├── tailwind.css # Tailwind CSS imports
└── theme.css # Theme variables
-
Clone the repository:
git clone https://github.com/anish-dev09/NeuroEase.git cd NeuroEase -
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open your browser and navigate to:
http://localhost:5173
- After starting the development server, use the navigation bar to access different features such as onboarding, dashboard, memory builder, and emergency mode.
- Add patient profiles and memory entries, generate therapy sessions, and provide feedback after each session.
- Use the emergency mode for quick reassurance sessions when needed.
- React - UI library
- TypeScript - Type-safe JavaScript
- Vite - Fast build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- shadcn/ui - Accessible UI components
- PostCSS - CSS processing
- Built with shadcn/ui for consistent and accessible UI components.
- Responsive layouts using Flexbox and CSS Grid.
- Consistent color palette and typography for accessibility.
- See
guidelines/Guidelines.mdfor detailed design and code guidelines.
Contributions are welcome! Please follow the guidelines in guidelines/Guidelines.md for code style and best practices.
- Fork the repository.
- Create a new branch (
git checkout -b feature/your-feature). - Commit your changes (
git commit -am 'Add new feature'). - Push to the branch (
git push origin feature/your-feature). - Create a new Pull Request.
This project is licensed under the MIT License. See the LICENSE file for details.
Repository: anish-dev09/NeuroEase
Branch: main