This is one of my side projects that I wanted to showcase in my portfolio. I wanted to build something with real-time collaboration since I hadn’t played with it before, so I thought: why not make a lightweight CodeSandbox where users can collaborate on snippets or share them with each other?
At first, I wanted to try Tanstack Start instead of Next.js for once, but since it would’ve taken longer to finish the project, I decided to use the latter instead.
Features (so far):
- Authentication (Oauth & Email/Password) and route protection
- Public and private code snippets with full CRUD functionality
- Monaco code editor implemented to write code snippets with customizable fonts, font-size and color-themes
- Soft deletion for snippets with cron-jobs for delay-based automatic deletion
- Snippet filtering using tags
- Gist engagements including debounced liking, commenting and sharing between users
- User profile editing, deleting and password changing
- Real-time user notifications for gist liking, commenting and sharing
- Light/Dark theme switching
Usage:
- Check out the project’s readme.md file in the github repo.
Tech Stack:
- Nextjs
- Shadcn for components
- React-query for server state
- Zustand for client state
- Supabase for auth and DB management
- Monaco editor for the code editor
- Tailwindcss for styles
What I learned building this project:
- How real-time works and how to implement it
- The difference between proxies and middleware
- How to use Zustand
- When to prefetch and how to use caching
- How and when to implement Optimistic Updates
- How to use database triggers to process/normalize data
- How to implement junction tables to handle table relations the “SQL-way”
- How to use cron jobs and implement soft-deletion
- How to use edge functions
- How to use web hooks
- The difference between the edge and the nodejs runtimes