SnipSnap

Inspiration

• I love exploring different tech frameworks, libraries , learning new programming concepts and working on coding projects. There are times, where I feel that I should save code blocks for future reference related to new framework or bug fixes. Saving this code blocks could be really helpful and save time in future. Hence, I decided to create this platform that could help users to save their coding snippets for future reference.
• Moreover, I have integrated the website with a dashboard where users can convert their stored snippets directly into customized images and download and share it as part of their blogs or on their social media handles.

What it does

SnipSnap is a basically a one-stop platform for users to save all their important coding snippets at one place so that they can refer to them later. It is integrated with overall CRUD functionality.

• Further, the user is provided with an option of creating a snap. By clicking on this, the user is navigated to their dashboard where they can convert their code snippet to customized image in seconds.

How we built it

• I have used Refine - which is a React based framework for the Frontend Development of the application.
• Used Supabase as my database
• Used Chakra UI as the UI library
• Used additional react packages for syntax highlighting, converting html to image canvas etc.

Learnings

• Both the refine framework and working with supabase were new to me, so I had a great time building my project using them and learning to work with them in quite a short frame of time.
• For this, the refine tutorials and examples were really useful and helped with speed up my learning
  

What's next for SnipSnap

• Integrate complete authentication
• Add the functionality for users to share the snippets to social media apps without downloading
• More customization options like adding text, icons to images etc.
• Further, the website can also be converted into a social application where users can share snippets among each other and have discussion thread related to that

Built With

• chakraui
• react
• refine
• supabase
• typescript