Overview
OpenSOL is a no-code solution to help students learn how to create Solana programs and applications using blocks and edges. It allows users to browse other people’s designs, execute blockchain interaction logic on the browser, and generate functional code.
openSOL Pitch
openSOL Technical Demo
Purpose
As head of the engineering division at Texas Blockchain, my role involves educating students EVM and SVM development to compete in web3 hackathons all around the world. Education is the largest point of discussion for all university blockchain clubs. This is because we are at the forefront of onboarding new people into web3 and crypto and they need to know whats going on. Whether that’s the financial side or the technical side of things, clubs have to do a great deal of education into this vast industry. To make technical education for blockchain development easier, I wanted to build something that will allow students to learn, get their hands dirty, and find as a useful tool for real-world development. All of this on top of making it as intuitive and simple as possible to lower the barrier of entry. OpenSOL is a lot like Scratch, a popular educational platform for programming, and I believe it can borrow a lot of the success from its core concepts. Education is important because it powers the developers which powers the entire ecosystem.
Displaying the code generated by the blocks on the canvas
How it was made
The frontend is built with NextJS and uses ReactFlow to allow the dragging and placing of blocks and the connections between them. When the “Run Button” is clicked with a specified functon in the console, all the nodes connected to that function is traversed to generate the corresponding JavaScript for each node. This will compile the JavaScript into one single file that will be executed in the browser. Some nodes allow functions and paramters to let users specify an action (mint, fetch, etc.), which requires saving each node’s data on an input change. During compile-time, the requested function will be fetched from the backend and used to generate its corresponding code. Some nodes require wallet interaction to sign transactions which requires a React Hook to await the user’s input. As the code is being compiled, a second prettier version is also being compiled, abstracting away logistical code so that it can be displayed to the user for copy-pasting.
As the JavaScript is executed, the parameters are read from the node’s data and the function logic is executed. This is when APIs make their calls and wallet signing prompts show up for the user. If a compilation or an execution fails, the error will be displayed in the console.
Each node was made to have a separate and distinct purpose to give users the foundational building “blocks” to create whatever they want. Some nodes may be more complex to carry out common blockchain functions and others might be simple program-basic nodes.
Authentication and database handling is carried out by Supabase and another layer of web3 authentication and login is carried out by Privy. This allows users to sign in with a web3 wallet to sign transactions.
Challenges
- 1. Designing the blocks
- 2. Handling blockchain interaction on the browser
The main challenge was making a system that would abstract a lot of the coding logic into nodes while allowing users free reign to build whatever they want. This includes hard decisions of what nodes to include and what nodes to leave out. This also required us to almost create a whole new language that would translate from nodes and inputs into real Typescript and JavaScript. This became technically challenging to create a design that was both simple and scalable to add more nodes for the future.
Another challenge was allowing users to handle blockchain interaction straight from their browser. Since openSOL allows users to execute their logic on the browser, we would need to abstract away all forms of blockchain connections and interactions. This took a lot of iterations but React Hooks became the best way to do this to allow imported functions to be executed while allowing wallet signing and awaiting as well.
Prizes
- - 1st place at Solana Colosseum Breakout Hackathon University Track ($10,000)
- 11,701 participants, 147 countries, 1,412 final projects
- Colosseum Winners Blog Post - - 2nd place at N3xus Campus Buildathon ($2,000)
- 200+ participants - - 3rd place at Texas Blockchain x Texas Venture Group Pitch Competition ($500)
Conclusion
OpenSOL was an idea entirely thought of in 15 minutes during a shower. Since then, it has been around four months of hard work of building this vision out to make blockchain education a better space. We have won more than we could have ever imagined with this project and it’s been a crazy ride. I will still be working on openSOL to eventually make it the best platform for students of all ages to start learning blockchain development.
Full Tech Stack
| Languages | Libraries | Tools | Chains |
|---|---|---|---|
| - TypeScript | - TailwindCSS | - Cursor | - Solana |
| - JavaScript | - NextJS | ||
| - HTML | - Supabase | ||
| - CSS | |||
| - SQL |