SnipSave

UX & Design React Python Flask MongoDB Stripe API SendGrid API

What is SnipSave?

SnipSave is a web-based code snippet manager for developers. I originally built this app in 2012 for my own use and as a way to learn web app development.

I've rebuilt the app from scratch four times over the years. The current version of the app is built with React, Python, Flask, and MongoDB.

To my initial surprise, many other developers around the world found SnipSave and began using it as their personal code snippet library. Almost 10,000 users have signed up so far and together they've created over 50,000 code snippets.

SnipSave Dashboard

The Front End

The front end of SnipSave is a single-page React app. The user interface is responsive down to small smartphone screens and every user interaction is carefully considered for a clear an intuitive experience.

Users can easily create new code snippets, tag them, sort them into folders, and set them as public, private, or unlisted.

The Back End

REST API

The back end of the app is a REST API built with Python, Flask, and MongoDB. The front-end React app relies on this API for all content, data manipulation, and user authentication.

Authentication

User authentication is handled with JSON web tokens. The React app stores a temporary access token in the browser. This access token is sent to the API with each request.

When the access token expires, the back-end application attempts to renew it using a refresh token stored on the user in the database.

Payments

SnipSave offers free accounts for everyone, but users can choose to upgrade to a Pro account for additional features.

Paid monthly subscriptions are built into the app via the Stripe API. Users can signup for a Pro account, update their credit card information, or cancel their subscription at any time within the SnipSave app.

Code Snippet Embeds

Users can embed their code snippets on any website using a simple <script> tag.

Public User Profiles

Each user has a public profile with a list of their public code snippets. Each code snippet has it's own page. These pages are rendered server-side so they can be easily crawled and indexed by search engines.

My goal here was to help developers who are searching the web for solutions to common programming problems by serving up the tens of thousands of user-created code snippets on SnipSave.

View the Live App

You can check out the live app and create a free user account in seconds. Explore the features, functionality, and user experience for yourself.

View Web App

Ready to discuss your project?

Send me a message and I'll get back to you within one business day.

Start a Conversation