While working on my computer architecture course with a couple teammates we discussed why no one had made a Verilog equivalent of Leetcode where aspiring Computer Engineers can practice implementing solutions at the RTL level. The closest is EDA Playground, where they provide an example based format demonstrating other's work and their weren't many examples listed.

What it does

This website will allow students to design, test, and debug verilog modules to meet problem specifications. Only one official example is listed on the website as of now, but with the modular design developed, expanding off of Yosysjs examples, while utilizing a cleaner text editor UI for the user. The user can access the webpage through any browser including mobile phones.

How I built it

I developed the web application through HTML, CSS, and Javascript. Almost everything is done client side for the user. Yosysjs, a javascript port of Yosys, allows Bytes Of Problems to not rely on servers to parse the user's Verilog modules. Quill is another API I rely on to provide a nice but easy to manage text editor for the user. To locally host the website for quick prototyping I used Python. Additionally I used Git for Version Control and Visual Studio Code as my IDE.

Challenges I ran into

Doing this project on my own, I was worried if I took on more than I can chew, especially since I wasn't adept in Web Development. Even though my project allows for a light backend (no server logic required other than fetching webpages) I was picking up libraries as I went and refreshing on Verilog. I didn't prioritize my time well enough and a lot of additional features I wanted to tack on ended up preventing me from focusing on the things I would need for a minimally viable product demo. I only have three examples at the moment and the website is live (1-3).

Accomplishments that I'm proud of

I'm proud of picking up multiple libraries during this hackathon and staying committed to this project. Around midnight May 2nd I was thinking my project couldn't be feasibly implemented and was thinking about giving up but I thought about how much I procrastinate work that I don't need to do. With deadlines left and right they'll never be a better time for me to work on a project I'm interested about than at a hackathon. So I kept working on it. It's not perfect and it hasn't reached the end goal desired functionality but I made a prototype of the thing I thought would be too hard to make in a weekend.

What I learned

I learned that I have underestimated basic front-end web development. I learned a lot of Javascript through this experience.

What's next for BytesOfProblems

I have several ideas on improving the product. For the presentation I focused on the limited scope of developing a single module that you would test but both Quill and YosysJS are compatible with interacting with multiple files and Verilog modules, I'm hoping to develop problems that force the user to apply the modules provided and see if they can develop bigger modules around that.

Quill is also compatible with syntax highlighting and that would make interacting with the text editor much easier, especially when experiencing errors.

I'm also thinking about allowing better syntax suggestions than what's possible with YosysJS and I may rely on some backend service to take the user's input and determine if it's syntatically correct via Icarus Verilog. In addition, this can prevent the trivialization of some problems as I could easily restrict certain solutions (not allowed to use + operator for implementing the adder, etc.). This was a fun project and I hope it continues to grow.

Lastly, I could definitely neaten up this project and apply web development practices better such as better formatting & isolating HTML,CSS, and JSS into respective files as much as possible instead of monolithic web pages.

Built With

Share this project: