Dialogue Health - AI Health Companion 🏥

A full-stack healthcare application featuring Auth0 authentication, MongoDB database, and an interactive 3D body map chatbot interface.

🚀 Features

• Auth0 Authentication: Secure user login and registration
• Profile Management: Complete user profiles with health information
• 3D Interactive Body Map: Click body parts to indicate pain levels
• AI Health Chatbot: Real-time health assistance and guidance
• Responsive Design: Works on desktop and mobile devices

📁 Project Structure

Dialogue-Med/
├── backend/                 # Node.js/Express API
│   ├── models/             # MongoDB schemas (User)
│   ├── routes/             # API routes (userRoutes)
│   ├── db.js              # MongoDB connection
│   ├── index.js           # Server entry point
│   └── .env               # Environment variables (not in git)
│
└── frontend/
    └── dialogue_med_app/   # Next.js 16 frontend
        ├── app/
        │   ├── components/
        │   │   ├── ChatbotInterface.tsx  # 3D chatbot UI
        │   │   └── SignupForm.tsx        # Profile completion form
        │   ├── api/auth/[auth0]/        # Auth0 route handler
        │   ├── profile/complete/        # Profile completion page
        │   ├── layout.tsx               # Root layout with UserProvider
        │   └── page.tsx                 # Main entry (login/chatbot)
        ├── lib/
        │   ├── api.ts                   # Backend API helpers
        │   └── auth0.ts                 # Auth0 client config
        └── .env.local                   # Environment variables (not in git)

🛠️ Technology Stack

Backend

• Runtime: Node.js with ES Modules
• Framework: Express.js 5.2.1
• Database: MongoDB Atlas with Mongoose 9.1.5
• Authentication: Auth0 (header-based)
• CORS: Custom middleware for frontend-backend communication

Frontend

• Framework: Next.js 16.1.4 (App Router)
• React: 19.2.3
• TypeScript: 5
• Auth: @auth0/nextjs-auth0 v4.14.0
• 3D Graphics: @react-three/fiber, @react-three/drei, three.js
• Styling: Tailwind CSS 4

📋 Prerequisites

• Node.js 18+
• npm or yarn
• MongoDB Atlas account
• Auth0 account

⚙️ Installation & Setup

1. Clone the Repository

git clone <your-repo-url>
cd Dialogue-Med

2. Backend Setup

cd backend
npm install

Create .env file in the backend directory:

MONGO_URI=mongodb+srv://<username>:<password>@<cluster>.mongodb.net/?appName=Dialogue-Med
PORT=3001
NODE_ENV=development
FRONTEND_ORIGIN=http://localhost:3000

3. Frontend Setup

cd frontend/dialogue_med_app
npm install

Create .env.local file in the frontend/dialogue_med_app directory:

AUTH0_DOMAIN=your-domain.auth0.com
AUTH0_CLIENT_ID=your-client-id
AUTH0_CLIENT_SECRET=your-client-secret
AUTH0_SECRET=your-32-char-secret-key
AUTH0_BASE_URL=http://localhost:3000
NEXT_PUBLIC_API_URL=http://localhost:3001/api

4. Auth0 Configuration

1. Create an Auth0 application (Regular Web Application)
2. Set Allowed Callback URLs: http://localhost:3000/api/auth/callback
3. Set Allowed Logout URLs: http://localhost:3000
4. Copy your Domain, Client ID, and Client Secret to .env.local
5. Generate AUTH0_SECRET: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

🚀 Running the Application

Start Backend Server

cd backend
npm start
# Server runs on http://localhost:3001

You should see:

🚀 Server running on port 3001
✅ MongoDB connected successfully

Start Frontend Server

cd frontend/dialogue_med_app
npm run dev
# App runs on http://localhost:3000

Visit http://localhost:3000 in your browser.

📖 User Flow

1. Landing Page: User sees login screen with app features
2. Auth0 Login: Click "Sign In to Continue" → Auth0 login
3. Profile Check: System checks if profile is complete
4. Profile Completion (new users): Fill in required fields:
   • Full Name
   • Phone Number
   • Date of Birth
   • Address
   • Emergency Contact
5. Chatbot Interface: Access 3D body map and health chat

🔌 API Endpoints

User Routes

Method	Endpoint	Headers	Description
GET	/api/me	x-auth0-id, x-user-email	Get/create user profile
POST	/api/me	x-auth0-id, x-user-email	Update user profile
GET	/api/user/:auth0Id	None	Get user by Auth0 ID

Request Examples

Get User Profile

curl -H "x-auth0-id: auth0|123456" \
     -H "x-user-email: user@example.com" \
     http://localhost:3001/api/me

Update Profile

curl -X POST \
     -H "Content-Type: application/json" \
     -H "x-auth0-id: auth0|123456" \
     -H "x-user-email: user@example.com" \
     -d '{
       "name": "John Doe",
       "phoneNumber": "(555) 123-4567",
       "dateOfBirth": "1990-01-15",
       "address": "123 Main St, City, State 12345",
       "emergencyContact": "Jane Doe - (555) 987-6543"
     }' \
     http://localhost:3001/api/me

🗄️ Database Schema

User Model

{
  auth0Id: String (unique, required),
  email: String,
  name: String,
  phoneNumber: String,
  dateOfBirth: String,
  address: String,
  emergencyContact: String,
  profileComplete: Boolean (default: false),
  createdAt: Date (default: Date.now),
  location: String,
  healthProfile: Object
}

🎨 Key Components

ChatbotInterface.tsx

• 3D body model using Three.js Xbot model
• Interactive body part selection
• Pain intensity sliders (0-10 scale)
• Real-time chat interface
• Dark/Light mode toggle

SignupForm.tsx

• Profile completion form
• Form validation
• API integration
• Success/error handling
• Auto-redirect to chatbot

🔒 Security Features

• Auth0 Authentication: Industry-standard OAuth 2.0
• CORS Protection: Configurable allowed origins
• Environment Variables: Sensitive data in .env files
• MongoDB Encryption: Atlas provides encryption at rest
• Custom Headers: x-auth0-id for API authentication

🐛 Troubleshooting

Backend won't start

# Check MongoDB connection string
# Verify .env file exists with MONGO_URI
# Ensure port 3001 is not in use
lsof -ti:3001 | xargs kill -9

Frontend Auth0 errors

# Verify all AUTH0_* variables in .env.local
# Check Auth0 dashboard callback URLs
# Regenerate AUTH0_SECRET if needed

CORS errors

# Verify FRONTEND_ORIGIN in backend/.env
# Check NEXT_PUBLIC_API_URL in frontend/.env.local
# Ensure both servers are running

📝 Development Notes

• ES Modules: Backend uses "type": "module" in package.json
• Turbopack: Frontend uses Next.js 16 with Turbopack for faster builds
• 3D Model: Uses free Xbot.glb from threejs.org examples
• API Base URL: Configurable via NEXT_PUBLIC_API_URL

🚢 Deployment

Backend (Railway/Render/Heroku)

1. Set environment variables in platform dashboard
2. Update FRONTEND_ORIGIN to production URL
3. Deploy from main branch

Frontend (Vercel/Netlify)

1. Set all AUTH0_* environment variables
2. Set NEXT_PUBLIC_API_URL to backend URL
3. Update Auth0 callback URLs to production domain
4. Deploy from main branch

📄 License

This project is private and proprietary.

👥 Contributors

• Bill Nguyen - Full Stack Developer

📞 Support

For issues or questions, please open a GitHub issue or contact the development team.

---

Built with ❤️ using Next.js, Express, and MongoDB