✨ Inspiration ✨

When I started my tech blogging journey, I realized that code snippets play a very important role. But code snippets are boring to look at if they are just plain markdown text. So why not make Code Snippets eye-catching and cool? This led to the birth of CodeSnap!

✨ What it does ✨

CodeSnap is a code snippet image generator. It has a built-in code editor with syntax-highlighting abilities. Multiple programming languages are supported (HTML, Javascript, and C among many). The Code snippet can be downloaded as an image once the editing is completed. There are various themes available to make the snippets look cool and trendy! There is also a mode switching option to toggle between dark and light mode to make sure snippets are supported on websites with dark mode as well!

💻🧰 How I built it 🔧🔨

CodeSnap is a web app built using ReactJS for the frontend, flask for the backend, Auth0 for providing easy authentication, and CockroachDB for storing snippet data of the users.

❗ Challenges we ran into ❗

Converting React components into an image was hard, but I was able to do it by converting it to a canvas element and in turn downloading that!

✨ Accomplishments that I am proud of ✨

Building a tool that will be useful for all Developers and Tech bloggers in a time crunch is something I am proud of!

💡 What I learned 💡

I learned how to integrate a ReactApp with a Flask backend and CockroachDB!

What's next for CodeSnap

Providing a dedicated snippets page with top snippets and building a mobile-friendly user interface!

Built With

Share this project: