roots

The smart way to study

Comment

Inspiration

I created this project in order to solve an issue that I, along with many of the people that I know, face quite regularly. With the amount of content that there is online, you can end up wasting precious revision time search for resources such as timers, word counters and questions in forums. That is why I decided to create a web application which has multiple different functions all in one place, and which allows you to study effectively. The UI of this web application is minimalistic and contains no jarring, distracting features. I always find that many of the existing timers, or forums are very distracting with adverts everywhere and slideshows which constantly change to different images. Roots contains no distractions, so you are able to focus fully on your revision. The name 'roots' came from a concept one of my teachers used to talk about a lot. It was that, the more you revised a topic, the deeper the neural 'roots' for that subject would be, and the better you would remember it. I thought that, for a web application based around creating an effective studying environment, the name 'roots' would fit perfectly!

What it does

The intuitive design of this web application means that revision can be made simple, distraction-free and - most importantly - effective. When you open the web app, you are immediately taken to the Homepage. Here, you will find an overview of the application, and some of the ideas behind it, as well as a look at all the features it contains, and the ability to contact via GitHub, discord, and email. At the bottom of the homepage, there is a button which says 'lets go'. If you click on it, you are taken to a user login page, where you also have the ability to create an account. These accounts are stored on a database made using Flask. After logging in, you are taken to the forum. This forum is designed to allow students to ask questions about any topic such as help with homework, or guidance on where to find subject-specific resources. In the forum, you are able to create and delete posts, comments, and likes. You can also click on a user to view all posts by that user! As well as the forum, there is also a flashcard application. Here, you can create and delete flashcards. To view the answer of a flashcard, you can simply click on it. This is really useful to keep your notes organised and to easily revise concepts. These flashcards are saved to local storage so you can view them whenever you visit the application. There is also a timer page. On this page, the main feature is a pomodoro timer in which you can input the length of the session and the break, and then you can press start and the timer will begin. There is also a motivational quote generator which gives you study-related motivational quotes whenever you like which will push you to work your hardest! Finally there is a checker page. Here, you will find a text to speak function with a built-in word and character counter. You can type or paste a piece of work and have it read aloud to you at any pitch, rate, volume, and with any voice (thanks to the speech synthesiser API) - did you know that you are more likely to spot mistakes when your work is read aloud by others? While writing text in the input field, you will also see that the word and character counter updates in real time so you know exactly when you have hit that word count!

How we built it

The majority of this web application was built in HTML, CSS, JavaScript and brought together using Flask. The database which stores user accounts, posts, comments, and likes was created using Flask and SQL Alchemy. The passwords related to the user accounts are hashed for security using werkzeug security. Functions such as the flashcard application and the timer were created using vanilla JavaScript, while the base for the website UI has been created using Bootstrap.

Challenges we ran into

This was a very challenging, but very rewarding, build. I have never used Python to build a web application before, nor have I ever used Flask, therefore I practically had to learn a whole new framework in order to complete this application! Integrating the Speech Synthesiser API was also particularly difficult, but I managed to get there in the end, and with all the functionality I had hoped for.

Accomplishments that we're proud of

I am really proud that I managed to build a full forum, complete with working databases in a framework which is brand new to me! I enjoyed using Flask and will definitely be making more projects with it into the future. Also, I am so happy that I finally manages to create a fully working user login system from scratch! I am glad that I was able to advance my JavaScript skills by using more advanced JavaScript concepts such as integrating APIs.

What we learned

I have learned so much over the course of this Hackathon, particularly to do with the use of Flask and Python for building web apps. I am confident to create databases and query them to build systems such as user logins and forums.

What's next for roots

As I mentioned in the video, I already have so many ideas of what I am going to add to this application: I hope to add groups for the flashcards so they do not display all at once, but instead go into sections for subjects or classes; I would also like to create channels in the forum to add to complexity and make the user experience more streamlined; finally, I would love to make the web application fully responsive and then turn it into a mobile app!

Note

I know the video is over (by quite a bit :/) but I really wanted to show and explain all the functions that I managed to create and I may have gotten a bit carried away! But I would really appreciate it if you had the time to watch the whole video :))

Share this project:

Updates