snipbit

login
create a snippet
my snippets
discover page
profile page
create a post
posting a snippet
viewing a post

Inspiration

We were inspired by online code editors like CodeSandbox, CodePen, and JSFiddle along with popular social media sites like Instagram, Twitter, and Reddit. While code can be shared on any social media platform, we wanted to create a social media experience tailored specifically towards developers.

What it does

Snipbit is a social media platform for developers to store and share code. Users can make an account, create code snippets in an online code editor, and share them with other users. They can interact with other users through following, commenting, and liking posts. HTML, CSS, and JavaScript snippets specifically can be fully displayed to other users.

How we built it

For the frontend, we created a Vue.js/TypeScript SPA, using TailwindCSS and PrimeVue. We also leveraged the Monaco code editor which powers VSCode. For the backend, we used PocketBase for both our API and database, which is hosted on a cloud hosting service called PocketHost. The frontend is built automatically upon pushing to our main branch through a GitHub action that transfers the built files to PocketHost via FTP where it is served at our application's root URL.

Challenges we ran into

Being a two-person team, we were definitely pressed for time by the end of the hackathon. There were a few features that we were planning on implementing that did not make the cut, but we are really happy with what we ended up creating. This was our first time seriously using PocketBase or any kind of BaaS for an application, so we had to spend some time sifting through the documentation. We also had never used PrimeVue before and had some things to learn there as well. This was also our first time ever messing with OAuth.

Accomplishments that we're proud of

We worked very well together as a team to create a project we are both proud of and collaborated very closely on to create. We are also very happy with the overall look and feel of the app.

What we learned

We learned a lot about PocketBase and PrimeVue and creating full-stack applications. We also learned how to prioritize tasks to get done the most important things within our timeframe.

What's next for snipbit

We have a few features that we are planning to add some time in the future. Judge0 offers a self-hostable code-execution API that could be used to allow users to run the snippets that either they or others create. We also wanted to add in the ability for users to submit edit suggestions on posts, and use the Monaco 'diff' view to display what the editor changed.

We also would like to add organizations to the application, so that groups of developers could create a space where commonly used code snippets can be shared. Even further down the line, A VSCode extension that allows users to easily save and paste in snippets they have saved would make the app even more useful.