shahenalgoo / snippad

An open-source code snippet & notebook app for developers.

Snippad Intro

Snippad is an open-source application primarily designed for storing code snippets, as well as regular rich-text notes. It is a web/cloud based open-source application made in React/Next.js that you can easily deploy on Appwrite and Vercel for free.

Installation

Step 1: Clone the repo Start by cloning the repo or download the source code.

git clone https://github.com/shahenalgoo/snippad.git

Step 2: Install dependencies Open your terminal in the root folder of the project and run the command:

yarn install 
--or--
npm install

Step 3: Set environment variables Rename the file .env.example to .env.local.

To run the app locally, you should set http://localhost:3000 as the NEXT_PUBLIC_APP_URL. When you deploy the app online via any service provider, make sure to set the domain to your application domain. The domain is mostly used for redirects. ie: magic login, password recovery redirects, etc...

NEXT_PUBLIC_APP_URL=http://localhost:3000

NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
NEXT_PUBLIC_APPWRITE_PROJECT_ID=xxxx
NEXT_PUBLIC_APPWRITE_DATABASE_ID=xxxx

NEXT_PUBLIC_COLLECTION_NOTEBOOKS_ID=xxxx
NEXT_PUBLIC_COLLECTION_NOTES_ID=xxxx

NEXT_PUBLIC_BUCKET_IMAGES_ID=xxxx
NEXT_PUBLIC_FUNCTION_SHARE_NOTE=xxxx

While the packages installs, let's set up your own personal backend with Appwrite.

Appwrite Backend

a. Project Setup

1. Head over to cloud.appwrite.io and sign in/up.
2. Create a new project and name it Snippad
3. In the 'Add a Platform' section, add a new Web App.
4. Set an app name and set the hostname to *.
5. You can now click 'Next' or Skip the optional steps.
6. Once on the dashboard, copy the Project ID and set it in env NEXT_PUBLIC_APPWRITE_PROJECT_ID

---

b. Database Setup

1. Go to Databases and Create database, you can name it snippad-main.
2. Copy the Database ID and set it in the env file in NEXT_PUBLIC_APPWRITE_DATABASE_ID.

---

c. Create Notebooks Collection

1. Create the first collection and name it notebooks.
2. Copy the notebooks Collection ID and set it in env NEXT_PUBLIC_COLLECTION_NOTEBOOKS_ID
3. Go to the Attributes tab and add:

Key	Type	Default Value
title (required)	string	-
type	enum (personal, shared)	-

4. Go to the Settings tab of the collection and set the permission:

• Add role -> All Users(Users) -> enable Create only.
• Enable the Document Security as well.

Cool! You're done with setting up the notebooks collection.

---

d. Create Notes Collection

1. Create a new collection and name it notes.
2. Copy the notes Collection ID and set it in env NEXT_PUBLIC_COLLECTION_NOTES_ID.
3. Go to notes settings and set the permissions and security exactly as the notebooks collection.
4. Go to the Attributes tab and add:

Key	Type	Size	Default Value
title	string	180	-
subtitle	string	240	-
body	string	5000	-
notebook_related	string	50	-
type	enum (note, code, todo)	-	-
starred	boolean	-	-
status	enum (published, archived, trashed)	-	-
status_last_update	datetime	-	-
snippet_language	string	20	-
search_index	string	5500	-
last_change_by	string	50	-
\

5. Once done, we need to setup our search functionality and filters. Go to the Index tab and add:

Key	Type	Attributes
notebook_related	key	notebook_related
status	key	status
search_index	fulltext	search_index
notebook_and_status	key	notebook_related, status
notebook_status_starred	key	notebook_related, starred, status
search_notebook	fulltext	notebook_related, search_index
notebook_status_type	key	notebook_related, status, type
notebook_status_type_lang	key	noebook_related, status, type, snippet_language

---

e. Create Bucket for Image Uploads

1. Create a new bucket in the Storage section and name it uploads.
2. Copy the uploads Bucket ID and set it in env NEXT_PUBLIC_BUCKET_UPLOADS_ID.
3. Go to the bucket settings and set the permissions and security exactly as the notebooks/notes collection.

The rest of the options are up to you. That’s it for images.

---

f. Auth (Optional) In the settings tab of the Auth section, you can enable any social logins that you need. You can also go to /src/app/(authentication)/login/CreateOauthSession.tsx to setup your logins.

Please refer to the Appwrite documentation for help on how to Appwrite 0auth.

Server Function - Delete Trash

Here is how to set up the server function that deletes trash after 30 days. For more information, please refer to the Appwrite Functions API and a tutorial about how to get started with Appwrite functions.
To get started:

npm install -g appwrite-cli

Create a folder in your desired location and name it something like snippad_trash_cleaner. Open terminal in that folder and run this command:

appwrite init function

Now you should have a starter kit. Follow these steps:

1. In our Snippad's source code, you will find a folder called functions/deleteTrash.js.
2. Open the snippad_trash_cleaner folder in your IDE, go to the index.js file.
3. Replace everything in index.js by everything in deleteTrash.js.
4. Back to the delete-trash terminal, run this command: appwrite login.
5. After inputting your login and project details, run command: appwrite deploy function.
6. Select the function and deploy it.

After deployment, you can now access the function on the Functions section on the Appwrite Dashboard.

1. Go to the function’s Settings tab.
2. Go to the ‘Update Schedule’, add this Cron syntax: 0 0 * * * .

Look out, there is a space between each character. The function will now run everyday at midnight UTC.

3. Go to Update Variables. add these 5 variables and their respective values:

APPWRITE_FUNCTION_ENDPOINT
APPWRITE_FUNCTION_API_KEY
APPWRITE_FUNCTION_PROJECT_ID
DATABASE_ID
COLLECTION_ID_NOTES

Server Function - Live Collab

Repeat the same steps from above(trash function).

1. Create a folder called snippad_live_collab , initialize a function until you get the index.js.
2. Replace everything in index.js with liveCollab.js (found in /functions from the source code).
3. Deploy the function.
4. Go to the Settings tab of the function and in the Execute Access section, select All Users.

Congrats!

Go back to the root folder of the source code and open the terminal. Run the command npm run dev or yarn dev and you’re all set!