Project Zniply



Description
Zniply is my personal project: a snippet manager built for developers who often forget less common structures. I built it entirely on my own, paying attention to every detail. It's a medium-large project using the MERN stack with TypeScript across the entire flow.
Key features include: traditional authentication and OAuth (GitHub / Google via Passport), snippet creation and editing using TipTap (code blocks + highlighting), favorites, landing page, tutorials, contact page, and SEO for the entire project.
Guests can create up to 3 snippets. When logging in, the app asks whether you want to keep them, delete them, or assign them to another account — and the app won't ask again until the next login. Search is indexed, and results are ranked by number of likes (most popular first).
I implemented sanitization, strong user-content validations, and secure session handling. The frontend is deployed on Vercel and the backend on Render.
Learnings and technical features:
- OAuth integration with Passport (Google + GitHub) and UX flow.
- Advanced use of TipTap for snippet editing and code block handling with highlighting.
- Designing and executing a data migration strategy for guest snippets on account creation.
- Building an indexed search system ranking results by likes.
- Strong security for user-generated content using sanitize-html and server-side validation.
- Performance, UX polish, and scalability in a full-stack project fully built by me.
Test data
Test Account: nico@correo.com
Password: 55115511
Technologies
- TypeScript
- Zod
- Tailwind CSS
- React
- React Query
- React Router Dom
- Node.js
- Express
- MongoDB
- Mongoose
- Passport
- express-validator
- express-session
- sanitize-html