Stateful is a modern, full-stack Computer Science education platform built to provide everything a student, educator, or competitive programmer needs in one application.
Unlike traditional learning websites that only provide notes or coding problems, Stateful combines an online IDE, algorithm visualizer, interactive study tools, and a powerful administrative dashboard into a single cloud-based platform.
The primary goal is to bridge the gap between learning concepts, visualizing algorithms, and writing production-quality code without switching between multiple applications.
Stateful is designed with a modern glassmorphism interface, responsive architecture, and cloud synchronization to deliver a desktop-like experience directly inside the browser.
Stateful aims to become a comprehensive ecosystem where students can:
- Learn Computer Science fundamentals
- Visualize complex algorithms
- Practice coding
- Save projects in the cloud
- Prepare for interviews
- Track productivity
- Receive instructor guidance
Everything happens inside a single application.
- Simplify Computer Science education
- Make algorithms interactive instead of theoretical
- Provide a professional coding environment in the browser
- Reduce setup time by eliminating local IDE requirements
- Help educators manage coding cohorts
- Increase productivity through integrated study tools
Browser (React + TypeScript)
│
┌─────────────────┼─────────────────┐
│ │ │
Authentication Firestore DB Piston API
Firebase Cloud Data Code Runner
│ │ │
└────────────── Vercel Hosting ─────┘
The application follows a modern frontend architecture using React with cloud services that eliminate the need for a dedicated backend server.
Stateful provides secure authentication using Firebase Authentication.
- Google Authentication
- GitHub Authentication
- Email & Password
- Password Reset
- Session Persistence
- Protected Routes
- Role-based Access
- Admin Authorization
- Secure Token Management
- Automatic Login Persistence
The online compiler is one of Stateful's primary features.
It enables users to write, edit, save, and execute code directly inside the browser.
Powered by Monaco Editor, the same editor that powers Visual Studio Code.
- Syntax Highlighting
- Auto Indentation
- Bracket Matching
- Auto Completion
- Code Folding
- Multiple Themes
- Font Customization
- Keyboard Shortcuts
- C
- C++
- Java
- Python
Execution is handled using the Piston API, which safely compiles and runs code inside isolated containers.
Users can:
- Execute programs
- Provide stdin input
- View stdout
- View compilation errors
- View runtime errors
- Test multiple cases
Every file is automatically synchronized with Firebase Firestore.
Users can:
- Create Files
- Rename Files
- Delete Files
- Switch Between Files
- Resume Coding Anywhere
One of Stateful's flagship features is the visualization engine.
Instead of reading static theory, students watch algorithms execute step-by-step.
Animations are built using Framer Motion for smooth 60 FPS rendering.
Visualizes:
- Adjacent comparisons
- Swapping
- Sorted section
- Time Complexity
Shows:
- Minimum selection
- Swapping
- Sorted partition
Demonstrates:
- Key insertion
- Element shifting
- Growing sorted array
Displays:
- Recursive division
- Merge process
- Temporary arrays
Illustrates:
- Pivot selection
- Partitioning
- Recursive calls
- Linear Search
- Binary Search
Visualization includes:
- Current index
- Comparison steps
- Successful search animation
Students can observe graph traversal in real time.
Algorithms include:
- BFS
- DFS
- Dijkstra
- A*
- Topological Sort (planned)
Visualizations include:
- Binary Tree Traversal
- BST Operations
- AVL Tree (planned)
- Adjustable Speed
- Pause
- Resume
- Previous Step
- Next Step
- Reset
- Random Data Generation
- Complexity Display
- Pseudocode Panel
- Source Code Panel
- Theory Section
Stateful also serves as a learning platform.
Subjects include:
- Data Structures
- Algorithms
- Operating Systems
- Computer Networks
- DBMS
- Object-Oriented Programming
- Compiler Design
- Software Engineering
Each topic can contain:
- Notes
- Diagrams
- Examples
- Code Snippets
- Complexity Tables
Integrated study tools eliminate the need for external applications.
Features
- Custom Focus Duration
- Short Break
- Long Break
- Notifications
- Auto Switching
- Session Counter
Supports
- Millisecond Precision
- Lap Timing
- Reset
- Pause
- Resume
Features
- Fullscreen Clock
- IST Synchronization
- Minimal Interface
- Study Mode
The administrator dashboard provides centralized platform management.
Administrators can
- View Users
- Search Users
- Filter Users
- Promote to Admin
- Demote to User
- Reset Password
- Delete Accounts
Displayed Information
- Name
- Phone Number
- User ID
- Role
- Registration Date
Admins can inspect cloud files stored by users.
Available actions
- Open Files
- Edit Code
- Create Files
- Delete Files
- Monitor Activity
Visual reports include
- Total Users
- Active Users
- Total Files
- New Registrations
- User Growth
- File Creation Trends
The interface follows modern UI principles.
Design Features
- Glassmorphism
- Dark Mode
- Smooth Animations
- Responsive Layout
- Mobile Support
- Keyboard Navigation
- Accessibility Improvements
Optimizations include
- Lazy Loading
- Route Splitting
- React Memoization
- Zustand State Management
- Optimized Firestore Queries
- Component Reusability
- Vite Hot Reload
- Asset Optimization
Stateful prioritizes security using Firebase infrastructure.
Measures include
- Firebase Authentication
- Firestore Security Rules
- Protected Admin Routes
- Role Validation
- Secure API Requests
- Environment Variables
- HTTPS Deployment
- Input Validation
- React 19
- TypeScript
- Vite
- Tailwind CSS
- React Router
- Framer Motion
- Zustand
- Firebase Authentication
- Firebase Firestore
- Firebase Hosting Services
- Piston API
- Vercel
Stateful
│
├── frontend
│ ├── components
│ ├── pages
│ ├── hooks
│ ├── context
│ ├── services
│ ├── firebase
│ ├── utils
│ ├── assets
│ ├── types
│ └── styles
│
├── public
├── docs
├── screenshots
└── README.md
- AI Coding Assistant
- Code Review
- Complexity Analysis
- Bug Detection
- Interview Preparation
- Interactive Quizzes
- Coding Challenges
- Contest Mode
- Daily DSA Problems
- Progress Tracking
- Achievement System
- Certificates
- Real-time Collaborative Coding
- Shared Workspaces
- Live Pair Programming
- Classroom Management
- Git Integration
- Multiple Tabs
- Extensions
- Terminal Emulator
- Custom Themes
- Workspace Export
Stateful is designed for:
- Computer Science Students
- Competitive Programmers
- Coding Bootcamp Learners
- College Faculty
- Coding Instructors
- Software Engineering Interview Candidates
- Self-Learners
- Developer Communities
- Comprehensive Computer Science learning platform
- Browser-based IDE powered by Monaco Editor
- Secure cloud authentication and storage with Firebase
- Multi-language online compiler using Piston API
- Interactive algorithm visualizations with Framer Motion
- Productivity tools including Pomodoro Timer, Stopwatch, and Live Clock
- Full-featured administrator dashboard
- Modern responsive glassmorphism interface
- Fast deployment with Vercel and Vite
- Scalable architecture built using React and TypeScript
Stateful is more than an online compiler or algorithm visualizer—it is a complete Computer Science learning ecosystem that unifies education, coding practice, visualization, cloud storage, and administration into a single modern web application. By integrating interactive learning, professional development tools, and productivity features, it provides students and educators with an efficient platform for mastering Computer Science from fundamentals to advanced problem solving.