CodeBytes

• 

  Top portion of browser window

• 

  Bottom portion of browser window

Inspiration

For the past 19 months, I've been on an exciting journey of mastering JavaScript syntax. However, I often found it challenging to spend enough time coding to truly internalize the language. Interestingly, during this time, I've been enhancing my chess skills through puzzles and witnessed a remarkable 400-point increase in my overall game rating!

This experience has illuminated a crucial insight: coders, just like chess players, require a dedicated playground. What's needed is a platform that serves up puzzles, much like my chess app, to make learning JavaScript syntax not only efficient but also methodical and enjoyable.

What it does

An innovative in-browser IDE that transforms the way you learn coding. Our platform presents coding puzzles as interactive flashcards, enabling you to write and test your code in real-time. Challenge yourself, sharpen your skills, and master coding effortlessly with our interactive coding puzzles.

How we built it

Our application's foundation rests on React, where we skillfully manage user-generated code as dynamic state. Through an ingenious internal helper function, we seamlessly orchestrate code evaluation and manipulate Component HTML to provide an intuitive and responsive user experience. All this is wrapped in the artistry of Tailwind styling, ensuring adaptability and elegance throughout.

Challenges we ran into

We faced challenges working with Tailwind CSS, which required careful handling and a deep dive into the documentation

Accomplishments that we're proud of

I take pride in successfully developing this project while prioritizing self-care, including regular breaks and a healthy sleep schedule, all within the designated time-frame. Also how seamlessly I applied my prior expertise in React, thoroughly enjoying the process of creating and manipulating state for this app.

What we learned

That I do have the expertise to create a dynamic web app in React!

What's next for CodeBytes

1) More questions 2) User database to allow progression of skill level and tracking 3) UI connecting with user database dynamically, allowing the user to select random problems within their skillset, or to pick up where they left off last time 5) Mobile version 6) More languages (python, kotlin, C++, etc)

Built With

• github
• javascript
• react
• tailwind
• vscode