An AI-powered platform designed to support neurodivergent individuals with communication, learning, and planning tools. Built with modern web technologies and a focus on accessibility-first design.
🌐 Live Demo: https://diverge-x-client.vercel.app
- Tone Analyzer: Understand emotional tone and social context in messages
- Message Formatter: Improve message clarity and appropriateness
- Conversation Simulator: Practice social interactions in safe scenarios
- Text Simplifier: Adapt complex content to your reading level
- Visual Summaries: Generate mind maps and structured outlines
- Key Points Extraction: Identify main concepts quickly
- Task Manager: Organize tasks with energy-level awareness
- Timeline Builder: Visual scheduling with reminders
- Executive Function Tools: Support for working memory and task initiation
- WCAG 2.1 AA compliant
- Multiple theme options (Light, Dark, High Contrast)
- Dyslexia-friendly fonts
- Adjustable text size (80%-200%)
- Reduced motion support
- Screen reader optimizations
Frontend:
- React 19 with Vite
- TailwindCSS (Modern utility-first styling)
- Zustand (Lightweight state management)
- React Router v6
- Axios (HTTP client)
Backend:
- Node.js with Express 5
- Drizzle ORM (Type-safe database queries)
- Neon Database (Serverless PostgreSQL)
- Google Gemini AI (Advanced language processing)
- JWT Authentication
- Helmet & CORS (Security)
Deployment:
- Frontend: Vercel
- Backend: Vercel Serverless Functions
- Database: Neon (Serverless PostgreSQL)
- Node.js 18+ installed
- Neon Database account
- Google Gemini API key
- Navigate to server directory:
cd server- Install dependencies (already done):
npm install- Configure environment variables:
Edit
server/.envwith your credentials:
DATABASE_URL=your_neon_database_url
JWT_SECRET=your_secret_key
GEMINI_API_KEY=your_api_key
PORT=3000
CORS_ORIGIN=http://localhost:5173- Run database migrations:
npx drizzle-kit push:pg- Start the server:
npm run devServer will run on http://localhost:3000
- Navigate to client directory:
cd client- Install dependencies:
npm install- Configure environment variables:
For production (using deployed server), edit client/.env:
VITE_API_URL=https://diverge-x-server.vercel.app/api
VITE_APP_NAME=DivergeXFor local development, create client/.env.local:
VITE_API_URL=http://localhost:3000/api
VITE_APP_NAME=DivergeXNote:
.env.localtakes precedence over.envand is git-ignored for local development.
- Start the development server:
npm run devFrontend will run on http://localhost:5173
- Register: Create a new account at
/register - Login: Access your account at
/login - Dashboard: View all available tools
- Customize: Adjust accessibility settings in
/settingsto your preferences - Explore Tools:
- Communication: Analyze tone, format messages, practice conversations
- Learning: Simplify complex text, generate visual summaries
- Planning: Manage tasks with energy-level awareness
DivergeX features a modern, clean design inspired by contemporary fintech applications:
- Soft, rounded corners (rounded-3xl) for a friendly, approachable feel
- Neutral color palette with subtle accents for reduced visual stress
- Generous spacing and clear typography for improved readability
- Minimal animations with reduced motion support
- High contrast options for better visibility
POST /api/auth/register- Create accountPOST /api/auth/login- LoginGET /api/auth/profile- Get user profilePUT /api/auth/profile- Update profile
POST /api/communication/analyze-tone- Analyze message tonePOST /api/communication/format-message- Format messagePOST /api/communication/simulate-conversation- Practice conversation
POST /api/learning/process-text- Simplify textPOST /api/learning/generate-visual-summary- Create visual summaryGET /api/learning/learning-history- Get history
GET /api/planning/tasks- Get all tasksPOST /api/planning/tasks- Create taskPUT /api/planning/tasks/:id- Update taskDELETE /api/planning/tasks/:id- Delete task
GET /api/accessibility/settings- Get settingsPUT /api/accessibility/settings- Update settings
divergex/
├── client/ # Frontend React app
│ ├── src/
│ │ ├── components/
│ │ │ ├── communication/ # Communication tool components
│ │ │ ├── learning/ # Learning tool components
│ │ │ ├── planning/ # Planning tool components
│ │ │ ├── layout/ # Header, navigation, etc.
│ │ │ └── shared/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── store/ # Zustand state stores
│ │ ├── services/ # API service layer
│ │ ├── App.jsx # Main app component
│ │ └── index.css # Global styles
│ ├── .env # Production environment variables
│ ├── .env.local # Local development variables (git-ignored)
│ └── package.json
├── server/ # Backend API
│ ├── src/
│ │ ├── db/
│ │ │ ├── schema.js # Drizzle database schema
│ │ │ └── index.js # Database connection
│ │ ├── routes/ # API route handlers
│ │ ├── services/
│ │ │ └── ai.service.js # Google Gemini AI integration
│ │ ├── middleware/ # Auth & validation middleware
│ │ └── server.js # Express server setup
│ ├── .env # Server environment variables
│ ├── vercel.json # Vercel deployment config
│ └── package.json
└── README.md
- Password Security: Bcrypt hashing with salt rounds
- Authentication: JWT token-based auth with secure storage
- Rate Limiting: Express rate limiter (100 requests per 15 minutes)
- CORS Protection: Configured for localhost and production domains
- Security Headers: Helmet middleware for HTTP security
- Input Validation: Zod schema validation on all endpoints
- Environment Variables: Sensitive data stored in .env files (git-ignored)
DivergeX follows WCAG 2.1 AA guidelines and neurodiversity-focused design principles:
Visual Accessibility:
- High contrast mode option
- Adjustable font sizes (80%-200%)
- Dyslexia-friendly font options (OpenDyslexic)
- Color contrast ratios meeting AA standards
- Multiple theme options (Light, Dark, High Contrast)
Motor Accessibility:
- Full keyboard navigation support
- Large, easy-to-click touch targets
- Reduced motion option for animations
- Focus indicators on all interactive elements
Cognitive Accessibility:
- Clear, simple language
- Consistent navigation patterns
- Visual hierarchy and spacing
- Energy-aware task planning
- Customizable reading levels
Screen Reader Support:
- Semantic HTML structure
- ARIA labels and descriptions
- Live regions for dynamic content
- Skip navigation links
Running Locally:
- Start the backend server:
cd server && npm run dev - Start the frontend:
cd client && npm run dev - Ensure
.env.localis configured for local API connection
Common Issues:
- CORS errors: Make sure your local server is running and
.env.localpoints tohttp://localhost:3000/api - Database errors: Run
npx drizzle-kit pushto sync schema changes - Build errors: Clear node_modules and reinstall dependencies
Deployment:
- Frontend and backend are deployed separately on Vercel
- Environment variables must be configured in Vercel dashboard
- CORS is configured to allow both localhost and production domains
This is a neurodiversity-focused project. Contributions that improve accessibility and user experience are welcome.
Guidelines:
- Follow existing code style and patterns
- Test accessibility features thoroughly
- Consider neurodivergent user needs in all changes
- Update documentation for new features
Built with consideration for the neurodivergent community. Special thanks to all contributors and users who provide feedback to make DivergeX more accessible and useful.