Live & Operationalprofessional2026

Study Resources Sharing Platform

Vetronote.com is an online marketplace that provides high-quality, well-organized learning resources for students and self-learners in software engineering and cybersecurity. The platform offers downloadable learning packs, including PDF notes, video tutorials, and Google Drive folders, covering popular topics such as React & Next.js, Ethical Hacking, DevSecOps, Reverse Engineering, and DSA Interview Preparation. With a one-time purchase model and lifetime access, it aims to deliver practical and structured study materials without any subscription fees. Primarily targeted at Sri Lankan students, it supports local payment options like LankaQR and features a personal dashboard to manage all purchased resources conveniently.

Live Demo Source Code

vetronote.com

Overview

Project Overview

Case Study

Problem → Solution

Problem

Sri Lankan students studying software engineering and cybersecurity had no structured, affordable resource hub. Quality learning materials were scattered across the internet, unorganised, and either behind expensive subscriptions or buried in free-but-low-quality content.

My Role

Full-stack development within a product engineering team.

Solution

Built a full-stack digital marketplace where students can browse and purchase curated learning packs — PDF notes, video tutorials, and Google Drive resource folders — covering React, Next.js, ethical hacking, DevSecOps, and DSA prep. One-time purchase, lifetime access, personal dashboard, and LankaQR local payment support. Built with Next.js, TypeScript, Supabase, and Zustand.

Outcome

Topics covered: 6+ tracks

Results

Impact Metrics

6+ tracks

Topics covered

Engineering

Architecture

Engineered as a high-performance Progressive Web Application (PWA) using Next.js 15 (App Router) and React 19. It leverages Next.js Turbopack for ultra-fast local development and optimized builds. State management is efficiently handled globally using Zustand, eliminating unnecessary re-renders. The backend relies on Supabase with Server-Side Rendering (SSR) capabilities (@supabase/ssr) to ensure secure server-side data fetching and user authentication. Fluid UI interactions and micro-animations are meticulously crafted using Framer Motion combined with Tailwind CSS v4.

Next.js 15 (App Router) + React 19 for full-stack SSR capabilities
Fully functional Progressive Web App (PWA) configured via next-pwa
Global state management optimized with Zustand
Supabase SSR for server-side auth and PostgreSQL database interactions
Advanced fluid animations powered by Framer Motion
Cloudinary + Sharp for dynamic image optimization

Quality

Testing Strategy

Focuses on comprehensive end-to-end (E2E) workflows, ensuring that offline PWA capabilities and data synchronization happen seamlessly. Core business logic, such as data visualization (recharts) and note state mutations, are rigorously tested to guarantee data integrity before syncing with Supabase.

Operations

CI/CD & Deployment

Fully integrated with Vercel for zero-configuration, continuous deployments. Every commit triggers a highly optimized production build leveraging Next.js caching algorithms. vercel.json is configured to handle complex routing and serverless function executions at the Edge.

Speed

Performance

Delivers native-app-like performance thanks to PWA caching and Next.js SSR. Image loads are heavily optimized at the edge using next-cloudinary and sharp. The UI utilizes accessible Lucide React icons, semantic HTML, and respects system preferences (e.g., reduced motion via Framer Motion settings).

Stack