SQueaL Learning Tool

SQueaL provides a fun way to practice query langauges and database management skills. The game-ified interactive query input and OpenAI feedback lets a user get real-time instruction and helpful tips.

Comment 1

Inspiration

As a team we decided early on we wanted to participate in the education category, so we started brainstorming how we like to learn the most. As we brainstormed multiple team members came to the same conclusion of how much we love learning on Duolingo. At that point we knew making a tool that uses a similar model to Duolingo would be perfect as it is not only an effective learning tool but also extremely fun. With the recent boom in data science, we thought it would be perfect to create an SQL learning tool as many new people want to learn about the data science world. Combining these two ideas led us to our idea of SQueaL, a SQL Learning Tool/Game

What it does

Our project is a gamified SQL learning tool. Upon logging into the site you can start answering questions about SQL. We have two separate types of questions at the moment: multiple-choice and short-answer. For the short answer questions you have to answer with an SQL command which we will run on a real database in the backend to check if your result matches the response from the answers SQL. If your answer is correct you gain some points for your “rank”, if it is an incorrect response you will be told so and then given an option to see SQueaLy’s advice. SQueaLy's advice is a focused openAI generated tip based on your submitted answer.

How we built it

For our front end, we are using a (Class based )React + Vite framework. We then use a Firebase database to store all of our user information and our question db. We use a Python (uvicorn) API to receive our short answer responses that we then send to a Postgresql database to test the queries. In order to get the tips for when the shortAnswer responses are wrong we use openAi to offer suggestions in the format of our mascot SQueaLy

Challenges we ran into

Our biggest challenge was trying to figure out our tech-stack. When we started development, we had a rough idea of the software we wanted to employ in our project, but as the night drew on we realized that we would have some problems. To execute our full ideas, we had to change out a lot of software and figure out how to slot a backend into our originally serverless project. Also, many of us were new to the technology we were attempting to implement. Integrating Firebase was a steep learning curve for all of us, and React.js was pretty difficult as well, especially since we attempted a serverless model for the most part.

Accomplishments that we're proud of

Our biggest accomplishment is our use of OpenAI API to create our mascot, SQueaLy the pig, come alive and provide the user with feedback on their code. Midway through our coding journey, we realized that we didn't have restrict our question checking to just whether the user submitted code was right or wrong. We realized we could use the power of OpenAI to not only provide feedback to the user but also add a sense of light-hearted humor and interactivity to our website. Another thing we are immensely proud of is our entire team's ability to adapt to all the different technologies we ended up using. A majority of our team learnt Javascript and React on the fly and everyone was researching and exploring other new technologies, such as firebase and the python backend we implemented. We were proud ourselves for being able to divide our work amongst ourselves to play to each others' strengths and, later, integrate our technologies to create a seamlesss tech stack.

What we learned

The entire project was a learning experience for the four of us! Jack, Spencer, and Sohail had never used React, so there were many hours of teaching in order for us to get a hold on the ideas. On top of this, we learned how to integrate modern technologies into our code - mainly with OpenAI. We decided to use AI to help the user learn how to use SQL through our mascot SQueaLy. We also had to overcome issues with our tech stack, as per usual, leading to us quickly adapting. Because this was our second attempt at BrickHack, we brought lessons over from then. We dedicated time to establish our idea and determine our Minimum Viable Product goals which further reinforced the lessons of planning before jumping blindly into the project.

What's next for SQueaL Learning Tool

Our goals for this project reached far beyond the skill required for us to execute all of them within the given timeframe. Thus, we have a lot of ideas to expand this idea. Some of the key points we'd like to tackle in the future are as follows:

  1. Choose a more scalable and efficient stack = Currently, we are using Python and Firebase back-end and Javascript & React as the front end. Although this worked enough to get our short demo to work, we realized quickly that the ways we connected and used these technologies was not ideal if we were to increase the scale of the project. Some of the things we would do is host a more robust back-end using Django and a cloud SQL server.

  2. More interactivity = One of the main things that would greatly elevate the student experience on our website would be to allow the user to observe and run SQL commands on our sample databases. This is somewhat necessary for a good SQL learning environment since there are often multiple ways to achieve the same results and being able to test to see if your query generates the same or slightly different result as the "solution" query would help the student become more familiar with the commands. We know from experience that iterative learning is one of the best ways to build a deeper understanding of SQL and interactivity would add that to our website.

  3. Flesh out the rest of our website =
    *View our general plan for our website in the image gallery
    Due to time constraints we were unable to reach many of the various pages and functionality we were planning for the website. Currently, our project mainly allows students to sign in, check their profile, start learning, and look at the global leaderboard. Some other main pieces of functionality we would love to add if we continued working on it:

    • Question tags and difficulties: We wanted a way for users to be able to pick certain types of questions defined by tags to practice(for example, they could choose to only practice questions about "select" and "join"). On top of that, we wanted to use their success on questions to determine their ELO which, consequently, pushes harder questions to the user.
    • Instructor and Class Setup: The greatest demand to make learning SQL more enjoyable is in a classroom setting where not all students would be extremely enthusiastic to learn it at first. Thus, we wanted to develop a method for instructors to sign in to the site, create classes, and select their favorite questions for their students to practice different concepts.
    • Leaderboard Integration and ELO: We, as a team, are very competitive and our choice to include ELO and leaderboards in our project comes from this fact. For us, we know that having a ranking system and a class leaderboard would force us to continually compete for the first spot and, in the process, cause us to learn a bunch of SQL.

  4. More with SQueaLy (Text-to-speech?) = We really enjoyed making SQueaLy's personality and having the user interact with him when getting feedback about their SQL commands. We thought it would be really fun if SQueaLy also had a voice. We began implementing this but were unable to find a voice that suited him but we hope, in the future, we are able to get him a squeeky pig voice to really bring the mascot to life. :D

Share this project:

Updates