A modern, evidence-based web application that bridges the communication gap between educators and students during live instruction. VibeCheck provides anonymous, real-time feedback channels that help instructors gauge understanding and adjust their teaching dynamically.
In traditional classroom settings, students often hesitate to interrupt or ask questions due to social pressure, fear of judgment, or cultural norms. VibeCheck solves this by providing:
- Anonymous feedback channels that remove social barriers
- Real-time insights for instructors to adjust teaching dynamically
- Minimal disruption to the learning flow
- Universal accessibility across devices and technical skill levels
- One-click session creation with unique class codes
- Real-time dashboard with live visualization of student responses
- QR code sharing for instant student access
- Session management with pause/resume functionality
- Anonymous insights to gauge class understanding and energy
- Effortless joining via QR code scanning or direct links
- Three simple responses: 👍 I understand, 🤔 I need help, 😴 I need a break
- Complete anonymity with no registration required
- Immediate feedback with visual confirmation
- Framework: Next.js 15 with App Router
- Language: TypeScript (strict mode)
- Styling: Tailwind CSS v4
- Package Manager: Yarn Berry (v4.9.2)
- Real-time: Polling-based updates (2-second intervals)
- QR Codes: qrcode & qr-scanner libraries
- Icons: Lucide React
- Logging: Winston for structured logging
src/
├── app/ # Next.js App Router
│ ├── page.tsx # Landing page
│ ├── scan/ # QR scanner interface
│ ├── session/ # Student & educator interfaces
│ └── api/ # Backend endpoints
├── components/ # Reusable React components
├── lib/ # Shared utilities and business logic
└── types/ # TypeScript definitions
- Educator creates class → Gets unique session ID
- Students scan QR code/click link → Join class
- Students submit feedback → Real-time dashboard updates
- Educator monitors engagement → Adjusts teaching accordingly
VibeCheck is built on 11 evidence-based UI/UX design principles that ensure exceptional user experience:
- Simple and Natural Dialogue - Intuitive workflows that match mental models
- Use Users' Language - Educational terminology, not technical jargon
- Maintain Consistency - Unified design system across all interactions
- Reduce Memory Load - Recognition over recall through visual symbols
- Direct Attention - Clear visual hierarchy guiding user focus
- Meaningful Feedback - Immediate, contextual response to all actions
- Offer Shortcuts - Keyboard shortcuts for power users
- Clearly Mark Exits - Multiple escape paths from every interaction
- Minimize Error Risk - Error prevention through smart interface design
- Constructive Error Handling - Plain language with specific solutions
- Adequate Help - Contextual assistance when and where needed
These principles result in:
- Zero learning curve for both educators and students
- Enhanced accessibility across diverse user groups
- Improved reliability through error prevention and recovery
- Greater efficiency via shortcuts and streamlined workflows
- Node.js 18 or later
- Yarn 4
git clone <repository-url>
cd vibecheck
yarn install
yarn devOpen http://localhost:3000 to start using VibeCheck.
For Educators:
- Click "Start Class Check-in"
- Share the QR code with students
- Monitor real-time engagement visualization
For Students:
- Scan the class QR code
- Express how you're feeling
- Continue providing feedback throughout class
The project includes comprehensive documentation in two focused documents:
- VibeCheck Overview - Detailed feature descriptions, architecture, use cases, and technical implementation
- Design Principles - Complete guide to the 11 UI/UX principles and their implementation in the application
yarn build
# Deploy to Vercel platformdocker build -t vibecheck .
docker run -p 3000:3000 vibecheckNEXT_PUBLIC_BASE_URL=https://your-domain.com- WebSocket integration for true real-time updates
- Redis backend for persistent session storage
- Class analytics and export features
- Custom response options for specialized use cases
- LMS integrations for seamless workflow
- Mobile applications for enhanced mobile experience
- Advanced analytics for learning insights
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit changes:
git commit -m 'Add amazing feature' - Push to branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow the established design principles
- Maintain TypeScript strict mode compliance
- Use Tailwind CSS for all styling
- Ensure accessibility standards (WCAG 2.1 AA)
- Test across different devices and browsers
- Document new features and API changes
- Response Time: <100ms for feedback submission
- Update Frequency: 2-second polling intervals
- Concurrent Users: Optimized for typical classroom sizes (5-50 students)
- Accessibility: Full keyboard navigation, screen reader support
- Mobile First: Responsive design with touch-friendly interactions
- No personal data collection - completely anonymous feedback
- Session isolation - data not shared between classes
- Automatic cleanup - session data expires appropriately
- Secure session IDs - cryptographically secure identifiers
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with Next.js, React, and TypeScript
- Icons by Lucide React
- Inspired by the need for better classroom engagement tools
- Guided by evidence-based UI/UX design principles
Ready to transform your classroom engagement? Start with VibeCheck today and create more responsive, inclusive learning environments where every student's voice can be heard.