TOC Simulator

An interactive web-based tool designed to teach and test Theory of Computation (TOC) concepts through visualization and simulation. This modern platform bridges the gap between abstract theoretical models and practical understanding.

🚀 Features

Core Functionality

• Automata Design & Simulation: Create and simulate DFA, NFA, and finite automata with intuitive drag-and-drop interface
• Step-by-Step Execution: Trace input processing with pause, play, and rewind controls for better understanding
• Interactive Visualization: Real-time state highlighting and transition visualization using ReactFlow
• Model Validation: Real-time syntax checking and automata correctness validation
• Cloud Storage: Save and share projects via Firebase Firestore integration

Advanced Features

• Modern UI/UX: Clean, responsive design with light/dark theme support
• Keyboard Shortcuts: Efficient workflow with comprehensive keyboard shortcuts
• Error Detection: Real-time validation with detailed error feedback
• Export/Import: Save automata as JSON files for sharing and backup
• Context Menus: Right-click context menus for quick actions
• Auto-Layout: Automatic graph layout using Dagre algorithm

🛠️ Technology Stack

• Frontend: Next.js 15 with Turbopack, React 18, TypeScript
• Visualization: ReactFlow for interactive graph editing
• Styling: Tailwind CSS with custom animations
• UI Components: Radix UI primitives with custom styling
• Backend: Firebase (Firestore for data storage)
• Animation: Framer Motion for smooth transitions
• Icons: Lucide React icon library
• Deployment: Vercel with automatic CI/CD

🏃‍♂️ Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Firebase project (for full functionality)

Installation

1. Clone the repository:

git clone https://github.com/SifatAli008/TOC-Simulator.git
cd TOC-Simulator

2. Install dependencies:

npm install --legacy-peer-deps

3. Set up Firebase environment variables (optional for basic functionality): Create a .env.local file in the root directory:

   NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.firebasestorage.app
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
   NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=G-your_measurement_id

4. Start the development server:

npm run dev

5. Open http://localhost:3000 in your browser.

📖 Usage

Creating an Automaton

1. Navigate to the Simulator page from the dashboard
2. Click on the canvas to add states (nodes)
3. Right-click on states to set as initial or final states
4. Click "Add Transition" button to enter transition mode
5. Click and drag between states to create transitions
6. Double-click transitions to edit their symbols

Simulation

1. Enter an input string in the input field
2. Click "Simulate" to run the automaton simulation
3. Use the simulation controls (play, pause, step) to control execution
4. View real-time state highlighting and step-by-step results
5. Check the final result (Accept/Reject) and execution trace

Keyboard Shortcuts

• Ctrl/Cmd + N: Add new state
• Ctrl/Cmd + T: Toggle transition mode
• Ctrl/Cmd + S: Save automaton
• Delete: Remove selected elements
• Escape: Cancel current operation

Saving and Loading

• Use Save button to store automata in Firebase
• Load previously saved automata from your collection
• Export automata as JSON files for backup
• Import JSON files to restore automata

🏗️ Project Structure

src/
├── app/                    # Next.js app directory
│   ├── dashboard/         # Dashboard page
│   ├── simulator/         # Main simulator page
│   ├── globals.css        # Global styles
│   ├── layout.tsx         # Root layout
│   ├── page.tsx           # Home page (redirects to dashboard)
│   └── not-found.tsx      # 404 page
├── components/            # React components
│   ├── automata/         # Automata-specific components
│   │   ├── nodes/        # ReactFlow node components
│   │   ├── edges/        # ReactFlow edge components
│   │   └── *.tsx         # Editor, viewer, and control components
│   ├── layout/           # Layout components (Header, Footer)
│   ├── ui/               # Reusable UI components (6 essential components)
│   └── ErrorBoundary.tsx # Error boundary component
├── contexts/             # React contexts
│   └── ThemeContext.tsx  # Theme management
├── lib/                  # Utility libraries
│   ├── firebase.ts       # Firebase configuration
│   ├── firebase-operations.ts # Firebase CRUD operations
│   ├── simulation.ts     # Core simulation engine
│   ├── validation.ts     # Automata validation logic
│   └── utils.ts          # Utility functions
└── types/                # TypeScript type definitions
    └── automata.ts       # Automata type definitions

🔧 Development

Available Scripts

• npm run dev - Start development server with Turbopack
• npm run build - Build for production with Turbopack
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run lint:fix - Run ESLint with auto-fix
• npm run type-check - Run TypeScript type checking
• npm run deploy - Deploy to Vercel

Key Components

• AutomataEditor: Main editor interface with drag-and-drop functionality and state management
• AutomataFlow: ReactFlow-based interactive graph editor with custom nodes and edges
• SimulationViewer: Step-by-step simulation visualization with playback controls
• SimulationEngine: Core simulation logic for DFA/NFA execution and validation
• StateNode: Custom ReactFlow node component for automata states
• TransitionEdge: Custom ReactFlow edge component for transitions
• ThemeProvider: Dark/light mode theme management with system preference detection

🎯 Roadmap

Phase 1 (Completed ✅)

• Interactive DFA/NFA editor with ReactFlow
• Step-by-step simulation with playback controls
• Modern responsive UI with light/dark themes
• Firebase integration for cloud storage
• Real-time validation and error detection
• Keyboard shortcuts and accessibility features
• Auto-layout with Dagre algorithm
• Context menus and intuitive UX

Phase 2 (In Progress 🚧)

• NFA to DFA conversion algorithm with visualization
• Regular expression parsing and conversion to automata
• Enhanced simulation analytics and statistics
• Undo/Redo functionality
• Automata templates and examples library

Phase 3 (Future 🔮)

• Pushdown Automata (PDA) support
• Context-Free Grammar simulation
• Turing Machine implementation
• Multi-user real-time collaboration
• Mobile-responsive design improvements
• API for external integrations

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Please ensure your code follows the existing style and includes appropriate tests.

🚀 Deployment

The application is automatically deployed to Vercel with the following configuration:

Environment Variables (Production)

Set these in your Vercel dashboard or deployment platform:

NEXT_PUBLIC_FIREBASE_API_KEY
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
NEXT_PUBLIC_FIREBASE_PROJECT_ID
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
NEXT_PUBLIC_FIREBASE_APP_ID
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID

Build Configuration

• Framework: Next.js
• Build Command: npm run build
• Output Directory: .next
• Node Version: 18.x

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by JFLAP and other educational automata tools
• Built with modern React and Next.js ecosystem
• UI components based on Radix UI primitives
• Graph visualization powered by ReactFlow
• Designed with accessibility and usability in mind

📞 Support

• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📚 Documentation: Check the code comments and component documentation

---

TOC Simulator - Making Theory of Computation accessible through interactive visualization and modern web technologies.