Flashcodes

Flashcodes brings gamification to the coding classroom. There are plenty of tools that teachers can use, but few are adapted to teaching programming. It's crazy, EdTech is bad for teaching Tech!

Comment 1

Flashcodes === Flashcards for code

Demo can be played by selecting JavaScript Quirks

Inspiration

I am an English Teacher and I'm very used to using EdTech to bring fun to the classroom. But since I've started learning programing and web development, I've found that many of these tools aren't suitable for code snippets.

What it does

Flashcodes is a gamification tool which will be able to show code snippets with coloured variables and correct syntax highlighting, much like our IDEs and text editors do. Putting code in a normal text form is ugly and boring, and even in markdown code blocks there's no syntax highlighting available.

How we built it

Flashcodes was bootstrapped with the create-react-app Typescript template. The database and authentication is handled by Firebase.

Challenges we ran into

The main challenge is that I wasn't able to find an API with a free plan to try out during this project. I have found one API which would be suitable for creating the code snippets, Snappify. However, I believe with time I'd be able to implement my own, or even implement the syntax highlighting in the browser using PrismJs.

Accomplishments that we're proud of

I'm really proud of undertaking this with Typescript, although, I had to use any a lot just to save time. I'm also proud of spending the time planning things out in Figma, which I haven't really done before on many projects. Figma all took me far to long to get started, but I felt faster and more competent with it by the end.

What we learned

This being my first hackathon, I learned that you really can do a lot in a weekend. Most of my time programming since I started learning has just been a couple of hours per day. I also had the chance to use the React useContext hook for the first time which was challenging too. I hadn't successfully implemented Firebase in a project before so it took me a while to go through the docs and then some experimenting, but now I feel I could do it much faster the next time.

What's next for Flashcodes

Flashcodes has a long way to go. The next step will be to experiment with PrismJs and try to create some syntax highlighting myself. If I'm not satisfied with the results, then I'd like to try Snappify and take it from there. I need to build out the happy path for authenticated users so that they can create sets, favourite them, edit, etc.

Built With

Share this project:

Updates