Code Putt

• 

  Homepage

• 

  Code page

• 

  Result page

Inspiration

Inspired from wordle and advent of code, there needed to be something for code golfing ⛳.

What it does

Code Putt is a web application that gives you one daily coding problem that you have to solve with least characters possible in any language of your choosing. By using code execution engines, you get instant feedback on the code you wrote. You can also share the code you wrote with an elegant card.

How we built it

These technologies were used to bring the application to life:

• Nextjs for full stack dynamic website
• Monaco editor for in-browser code editor
• Piston API for code execution
• Shikijs for syntax highlighting
• Bolt.new for scaffolding and dev environment

Challenges we ran into

We spent a considerable amount of time with tailwind styling to make the site truly responsive. Getting the syntax highlighter to work properly also presented a unique hurdle. We also had to dedicate effort to parsing problems from an incompatible format to a compatible one.

Accomplishments that we're proud of

Successfully building a website for code golfing in the browser. We're also proud of the clean, intuitive UI and the seamless sharing functionality for golfed code.

What we learned

We gained valuable experience in API integration. We also learned a lot about creating a highly responsive web application for a niche audience.

What's next for Code Putt

We plan to introduce more programming languages, implement a leaderboard system for daily challenges, and explore adding user profiles to track progress and past solutions. We also want to expand the types of coding problems available.

Bolt in use

The initial scaffolding was entirely generated by bolt with a ~6-700 word prompt. Which was modified in the bolt's web editor manually and with follow up prompts.

Built With

• monaco-editor
• nextjs
• piston-api
• typescript