Formal language and automata theory

• 

• 

• 

• 

💡 Inspiration As students of Formal Language and Automata Theory, we found existing tools either too academic or outdated. We wanted a modern, interactive tool that not only converts regex to automata but also helps students visualize and simulate the entire process in a more intuitive and engaging way.

⚙️ What it does The app lets users input a regular expression and observe its transformation into:

NFA using Thompson’s Construction

Deterministic Finite Automaton (DFA)

Minimized DFA Users can:

Simulate input strings

See state transitions live

Learn theory with visual steps

Export graphs/tables in various formats It’s like an all-in-one automata lab in your browser.

🛠️ How we built it React.js + Vite for a blazing-fast and modular frontend

Tailwind CSS for modern, responsive styling

Cytoscape.js for graph visualization

Framer Motion for smooth animations

Custom JS modules for regex-to-NFA, NFA-to-DFA, and DFA minimization logic

Internal simulation engine for string processing

Responsive UI designed with Glassmorphism & Dark Mode

🧱 Challenges we ran into Designing an algorithmic backend without exposing APIs

Visualizing automata cleanly even for complex graphs

Ensuring compatibility across devices (especially mobile)

Managing state transitions with animated sync in the simulator

Balancing education with interactivity (tooltips, learn steps)

🏆 Accomplishments that we're proud of A fully working frontend-only visualizer with no backend/server

Smooth live simulation of regex evaluation

An easy-to-understand Learn Panel that breaks down hard concepts

Mobile-friendly version and beautiful UI design

Positive early feedback from peers and educators

📚 What we learned Deep understanding of regex parsing, NFA/DFA logic

Handling complex UI state transitions and animation sync

Building a full-stack feel app purely on frontend

Accessibility and responsiveness in UI

The importance of good documentation and user flow

🔮 What's next for Formal Language and Automata Theory Add context-free grammar (CFG) to PDA conversion

Support for epsilon-NFA

Live step-by-step debugging of state machines

Integration with external datasets to generate regex

More export formats like GIFs for animation

Create a companion mobile app for offline use

Built With

• api
• context
• control-git
• deployment-netlify
• feather-icons-code-editor-ui-monaco-editor-(if-used)-or-similar-state-management-react-hooks
• fira-code-icon-set-lucide
• manager-pnpm
• npm
• package
• purpose-technology-/-library-frontend-framework-react.js-+-vite-styling-tailwind-css-animations-framer-motion-graph-rendering-cytoscape.js-fonts-jetbrains-mono
• version