BurnAway is a modern, responsive web application designed to help developers monitor their mental health, predict burnout risks, and receive personalized recovery interventions. The user interface emphasizes dynamic aesthetics, ease of use, and multi-language support.
- Framework: React 19 (Vite)
- Styling: Tailwind CSS v4 (with dark mode support)
- Routing: React Router DOM
- Data Visualization: Recharts
- Networking: Axios
- Linting & Code Quality: ESLint
Before you begin, ensure you have the following installed:
- Node.js (v18 or higher recommended)
- (Optional) Docker for containerized development
Create a .env file in the root of the frontend directory to configure external connections.
# URL for the BurnAway backend API Gateway
VITE_API_URL=http://localhost:3000/apiInstall the required dependencies using npm:
npm installnpm run devThe application will typically start at http://localhost:5173.
To create a production-ready build:
npm run buildYou can then preview the build locally:
npm run previewnpm run dev: Starts the Vite development server.npm run build: Bundles the application for production.npm run lint: Runs ESLint to check for code quality issues.npm run preview: Previews the production build locally.
BurnAway-frontend/
├── public/ # Static assets (images, icons)
├── src/
│ ├── components/ # Reusable React components (UI, charts, forms)
│ ├── contexts/ # React Context providers (AuthContext)
│ ├── hooks/ # Custom React hooks (useAuth, useLanguage)
│ ├── locales/ # Internationalization files (en.json, id.json)
│ ├── pages/ # Application views/routes (Dashboard, Profile, Login)
│ ├── services/ # API integration and Axios configuration
│ ├── utils/ # Helper functions and formatters
│ ├── App.jsx # Main application component and routing configuration
│ ├── main.jsx # React application entry point
│ └── index.css # Global styles and Tailwind configuration
├── index.html # HTML entry point
├── vite.config.js # Vite configuration file
├── package.json # Dependencies and scripts
└── eslint.config.js # ESLint configuration
- Dynamic Aesthetics: Includes glassmorphism, responsive UI elements, dark mode support, and smooth micro-animations for a premium user experience.
- Predictive Dashboard: Visualize work habits and stress levels over time using Recharts.
- Instant Recovery UI: Instantly access and render AI-generated markdown advice directly after taking a burnout test.
- Multilingual Support: Switch seamlessly between English and Indonesian natively.