AntLogic | Devpost

Front page
Bumi learns DeMorgan's Law
XOR gate in library
3XOR solution
Sign up page

Inspiration

Inspired by our shared love for computational puzzle games, we decided to make a game based on a subject we all learned in Fall 2023: logic gates and circuits from ICS 6B. Logic gates themselves are simple to understand, however it is often difficult to design more complex circuits, especially when students are working on paper and can’t test their circuit. The logic puzzles in class also don’t cover complex enough cases to give students a deep understanding of how to design circuits.

What it does

AntLogic allows students to challenge themselves on complex logic puzzles such as “write a circuit with three inputs that is active when exactly one of the inputs is active.” AntLogic tests the student’s circuit on every possible test case and gives the student a summary of what cases it failed. There are currently 15 story-driven puzzles with varying difficulty that are intended to teach different concepts of boolean logic, such as functional completeness, DeMorgan’s Law, and different boolean logic operators. In addition, there is a library tab where users can look at every common logic gate, these are each equipped with a description, a symbol in logic, and a corresponding truth table to enhance understanding.

How we built it

Frontend

We designed pages and SVG elements with Figma and built the interactive stateful components with React. We used React Flow to build the interactive graph of logic gates. Our project uses React Router to separate pages by URL and provide quicker navigation. Finally, we hosted the project with Vite so we could compile the TypeScript React files and CSS and serve it as a single package.

Backend

We used Rust to build a memory-safe and compiler-checked backend. We used the Actix HTTP framework and an SQLite database to store user information, session tokens, and leaderboard scores independent of the frontend. We used Firebase authentication for email and password validation so we did not have to implement that ourselves.

Both the frontend and backend are hosted on Benjamin’s personal server and the domain name routing goes through Cloudflare Tunnels to provide a publicly accessible endpoint over HTTPS.

Challenges we ran into

The largest issue we ran into was dealing with recursive useEffect calls and state management on the frontend. Rendering active wires and gates required us to change the state of the graph, but calculating the activity of those components was re-run when the state updated, resulting in an infinite loop. This had to be resolved by creating custom edges/nodes and calculating styles when the appropriate component was re-rendered.

An issue with the backend was getting Cross Origin Resource Sharing (CORS) to work. By default, HTTP servers will not accept JSON data unless the request came from the same site. Since the backend and frontend were different servers, we had to set up the code correctly on both the frontend and the backend.

Accomplishments that we're proud of

While a small detail, we are proud of animating Bumi’s tongue because it was difficult to figure out, even though the final implementation was not that complicated. We tried multiple different animation libraries and landed on React Spring, morphing the path of the SVG between two points. We also implemented local storage saving of puzzles, which drastically improved the experience of page navigation, and allowed users to return to their puzzles and continue from where they left off. Finally, we managed to entirely write the backend within six hours on the first day, which was an impressive accomplishment.

What we learned

As a team composed of two third-years and one first-year, we actually all learned pretty different things.

Benjamin: I basically had to relearn React since the last time I used it was over a year ago. I learned about myself that I can be really focused.

Jackson: I had the opportunity to learn more about the Rust language through watching Benjamin build the backend. In addition, I was able to to use the reactflow library, which I’ve been interested in for a while. Finally, I got to reinforce my React skills through dealing with frustrating state issues and lots of CSS styling.

Yousef: I learned how to take a bit more of a backseat and observe how developers with more web experience work—I had little to no experience with React and TypeScript beforehand, and now I understand some of the mechanics and reasons why it’s used. I also garnered significant experience in working on a team with much more experienced developers, and learned how to contribute in ways I could even if it wasn’t always just coding.

What's next for AntLogic

The next step for AntLogic is to release it to students in ICS 6B/D/51 so they can practice their skills on our challenge problem. We will also add more levels to try to cover every different topic in boolean logic, such as levels defined by truth tables, teaching students to design circuits with minterms, tautologies for circuit optimization, and boolean algebra syntax. In addition, we’d like to add some more “fun” gates to make more complicated puzzles—these might include ideas such as a majority gate, a threshold gate, and more.