Elevate Your Posture. Boost Your Productivity.

Posturelytics.AI is an AI-powered productivity companion that monitors your posture and attention in real time using webcam-based pose estimation, and provides personalized feedback and session insights — helping you stay healthy, focused, and efficient.

Watch the demo on DevPost
Youtube Video

• Real-Time Webcam Tracking (Pose + Face detection)
• Posture Classification — good vs slouching
• Focus Detection — attentive vs distracted
• Interactive Dashboard — bar, line, pie charts & heatmap
• AI-Powered Feedback — GPT-generated summary
• SVG Heatmap Anatomy View for ergonomic risks
• JWT Auth for login/signup and session history
• No video is stored — privacy-safe by design

1. User starts a session and sets a timer.
2. Webcam feed is processed in-browser using MediaPipe:
   • Pose tracks body keypoints to detect slouching.
   • FaceMesh analyzes gaze and head orientation for distraction.
3. Results are buffered and analyzed in real time.
4. Session logs (attention + posture frames) are saved with timestamps.
5. AI feedback is generated from logs and shown to the user.

• Users can register/login with email and password.
• JWT-based secure token system is used for all session storage APIs.
• Sessions are user-specific and stored in MongoDB.

Posturelytics.AI/
│
├── backend/                        # FastAPI backend
│   ├── main.py                     # FastAPI app entry point
│   ├── requirements.txt            # Backend dependencies
│   ├── db/
│   │   └── connection.py           # MongoDB Atlas connection logic
│   ├── routes/
│   │   ├── session.py              # Session endpoints
│   │   └── users.py                # Auth endpoints
│   ├── models/
│   │   ├── user_model.py           # User Pydantic models
│   │   └── session_model.py        # Session Pydantic models
│   ├── auth/
│   │   ├── jwt_handler.py          # JWT encoding/decoding
│   │   └── bcrypt_utils.py         # Password hashing & verification
│   └── utils/
│       └── gpt_feedback.py         # GPT-based session feedback logic
│
├── frontend/                       # Vue.js 3 frontend
│   ├── index.html                  # App shell
│   ├── vite.config.js              # Vite bundler config
│   ├── package.json                # Frontend dependencies
│   ├── public/
│   │   └── favicon.ico             # Public assets
│   ├── src/
│   │   ├── assets/
│   │   │   ├── illustrations/      # PNGs, SVGs for landing/hero
│   │   │   └── body-outline.svg    # Anatomy heatmap base
│   │   ├── components/             # Reusable Vue components
│   │   │   ├── PoseTracker.vue
│   │   │   ├── PostureHeatmap.vue
│   │   │   ├── PostureLineChart.vue
│   │   │   ├── PieChartD3.vue
│   │   │   ├── PostureScoreChart.vue
│   │   │   ├── SessionDurationChart.vue
│   │   │   └── FocusTimeChart.vue
│   │   ├── views/                  # Page-level views
│   │   │   ├── Home.vue
│   │   │   ├── Login.vue
│   │   │   ├── Signup.vue
│   │   │   ├── FocusSession.vue
│   │   │   └── Dashboard.vue
│   │   ├── router/
│   │   │   └── index.js            # Vue Router configuration
│   │   ├── stores/
│   │   │   └── severityStore.js    # Global posture severity store
│   │   ├── utils/
│   │   │   └── camera_utils.js     # MediaPipe camera utility
│   │   └── App.vue                 # Root component
│   └── main.js                     # Mount Vue app
│
├── README.md                       # Project overview
├── .env                            # Environment variables (API keys, secrets)
├── .gitignore
└── LICENSE

1. Clone the Repository

   git clone https://github.com/your-username/posturelytics-ai.git
   cd posturelytics-ai
   
   

2. Set Up the Backend (FastAPI) Create and activate a virtual environment:

   cd backend
   python -m venv venv
   source venv/bin/activate  # On Windows: venv\Scripts\activate
   

   Install backend dependencies:

    pip install -r requirements.txt
   

   Add Environment Variables: Create a .env file in the backend directory with the following contents:

   MONGODB_URI=<your MongoDB Atlas connection string>
   JWT_SECRET=<your JWT secret key>
   
   

   Run the backend server:

   uvicorn main:app --reload
   
   

3. Set Up the Frontend (Vue 3 + Vite)

   cd ../frontend
   npm install
   
   

   Start the frontend:

    npm run dev
   
   

4. Using the App

   • Visit http://localhost:5173
   • Sign up or log in
   • Go to the Focus Session tab to start a real-time posture and attention session
   • Once complete, click View Analytics to explore insights, heatmaps, and GPT-based AI feedback

• Integrating MediaPipe for real-time pose & face tracking with Vue 3
• Using D3 and Observable Plot to create insightful, responsive charts
• Designing a clean UX around productivity + health
• Combining AI (OpenAI) with health analytics
• Building a full-stack app with FastAPI + MongoDB + JWT auth
• Handling CORS, token expiration, and visual responsiveness

• Add mobile support with webcam fallback
• Support longer-term session summaries and comparisons
• Adaptive alerts and AI voice assistant integration
• Add posture-correcting animations

Srushti Samant — Frontend (Vue, Charts, Design)
Himanshu Garud — Backend (FastAPI, MongoDB, AI logic)