Building a Persistent ToDo App with Vanilla JavaScript

Every developer remembers their first "real" project. For me, it wasn’t just about making things look pretty with CSS it was about making them functional. My latest project, a Modern ToDo List, was the perfect playground to move beyond static sites and into the world of dynamic user interfaces.

🚀 The Mission

The goal was simple but essential, Creating a task manager that feels snappy, looks modern, and most importantly doesn't forget your tasks the moment you refresh the page.

The Tech Stack:

• HTML5: Semantic structure.

• CSS3: Flexbox for layout and custom styling for that "clean" aesthetic.

• Vanilla JavaScript: No frameworks, just pure DOM manipulation.

🛠️ The Technical Walkthrough

1. Harnessing the Power of localStorage:

   The biggest hurdle for any beginner web app is persistence. By default, JavaScript variables clear out on a page refresh. To solve this, I utilized the Web Storage API. Instead of just adding a task to the UI, I treated my task list as a "State." Whenever a user adds or deletes a task, two things happen: The UI updates. The data is stringified and saved to localStorage.

2. The Logic: Handling User Input:
   The core of the app lives in the event listeners.

3. Event Delegation, Performance & Scalability:
   Rather than adding an event listener to every single "Delete" button (which is heavy on memory), I used Event Delegation. I added one listener to the parent container. When a click occurs, the app checks if the target was a delete button or a task item, then reacts accordingly.

🧱 Challenges I Overcame

The trickiest part was synchronization. Early on, I noticed that if I deleted a task from the UI but forgot to update the local storage array, the task would "ghost" back into existence after a refresh.

The Solution: I created a single saveData() function that I trigger after every modification. It’s a "Single Source of Truth" approach that keeps the UI and the storage perfectly in sync.

📈 What's Next?

While the app is fully functional, I’m looking to level it up by:

Drag-and-Drop: Implementing the HTML5 Drag and Drop API to reorder tasks.

Dark Mode: Adding a toggle for late-night productivity sessions.

Final Thoughts

Building this project taught me that you don't need a heavy framework like React to build something useful. Understanding how the browser interprets the Document Object Model (DOM) is a superpower for any frontend developer.

Check out the code: GitHub Repository

Live Demo: Try the App

Introduction

In today’s hyper-competitive digital landscape, enterprise organizations require content management systems that match their brand prestige with speed, security, and scalability. This case study details the engineering lifecycle of a bespoke, high-performance Content Management System (CMS) and public-facing web platform built for a renowned enterprise client.

By leveraging a modern full-stack architecture centered around Next.js (App Router), Prisma ORM, PostgreSQL, and Zod, we replaced a sluggish legacy infrastructure with a unified platform. The solution reduced content deployment cycles from days to seconds while providing an intuitive, accessible administrative portal backed by enterprise-grade security.

The Challenge

Our enterprise client faced critical architectural bottlenecks that hindered growth and brand expression:

• Legacy Monolith Limitations: The existing system relied on an unmaintainable, monolithic PHP backend coupled with a disjointed frontend, causing frequent downtime and slow page load times.

• Friction in Content Updates: Marketing and operations teams depended on engineering resources to publish blogs, open career positions, or update team directories, creating a heavy administrative bottleneck.

• Fragmented User Experience: The public site lacked mobile responsiveness, suffered from poor Core Web Vitals scores, and failed accessibility (WCAG) compliance standards.

• Security & Vulnerabilities: Outdated plugins and loose validation logic exposed the platform to potential OWASP Top 10 vulnerabilities, specifically concerning unauthorized data mutations and injection vectors.

Architecture & Technical Decisions

To address these challenges, we engineered a robust hybrid architecture that prioritizes developer velocity, end-to-end type safety, and runtime security.

Core Stack Rationale

• Next.js (App Router & Server Actions): Chosen for its hybrid rendering capabilities (Server-Side Rendering for dynamic public pages and Static Incremental Regeneration where applicable) and Server Actions, which eliminate the need for boilerplate API routes during mutations.

• Prisma ORM & PostgreSQL: Relational database integrity paired with Prisma's type-safe query builder guaranteed zero-downtime schema migrations and robust relational mapping for complex modules (e.g., matching applicants to careers or linking team directories to alumni networks).

• Zod: Integrated seamlessly with TypeScript to provide bulletproof runtime validation across client forms and server endpoints, preventing malformed data payloads from ever hitting the database.

Engineering Solutions & Implementation

1. CMS & Rich-Text Editing with Tiptap
   To empower non-technical content creators, we embedded Tiptap WYSIWYG, a headless rich-text editor built on ProseMirror.

   1. Designed custom extensions for media embeds, callout boxes, and responsive code blocks.

   2. Serialized rich-text content directly into structured JSON and sanitized HTML formats, stored natively in PostgreSQL text fields.

   3. Ensured output cleanliness to protect the public blog and resource portals against Cross-Site Scripting (XSS) vectors.

2. Design System: Tailwind CSS, Radix UI, & Framer Motion
   Building an administrative dashboard that feels like a desktop application required a meticulous UI/UX engineering strategy:

   1. Radix UI: Provided unstyled, accessible primitive components (Dialogs, Dropdowns, Tabs, and Tooltips) guaranteeing strict WAI-ARIA compliance out of the box.

   2. Tailwind CSS: Enabled rapid, utility-first styling with consistent design tokens for typography, spacing, and dynamic dark-mode support.

   3. Framer Motion: Implemented to deliver fluid micro-interactions, page transitions, and layout animations across both the public platform and the admin portal. Framer Motion’s layout animations transformed tabs, collapsible sidebars, and list reordering in the CMS into tactile, high-end experiences without sacrificing frame rates.

3. Secure Data Flow & Validation via Server Actions
   We eliminated traditional REST endpoints for backend mutations, adopting Next.js Server Actions secured by robust authentication middleware:
   Engineering Note: Every incoming payload from the admin portal is intercepted by a unified validation middleware. Zod schemas parse the raw form data on the server side, ensuring that even if client-side validation is bypassed, malformed payloads are safely rejected before hitting Prisma.

4. Comprehensive Admin Portal & Public Routes

   1. Public-Facing Platform: Dynamic routing handles Teams, About Us, Alumni Networks, Portfolio Projects, Blogs, Resources, and Careers with optimized OpenGraph tags and metadata generation for SEO.

   2. Admin Dashboard: Centralized control panel featuring full CRUD pipelines across six distinct modules:

      1. Members: Managing current staff and alumni directory profiles.

      2. Blogs & Resources: Publishing rich-text articles and downloadable media assets.

      3. Careers: Tracking job openings and applicant metadata.

      4. Messages: Centralized inbox for contact form submissions and client inquiries.

      5. Projects: Portfolio case study showcases with filterable tags.

Results & Business Impact

The deployment of the modern Next.js platform yielded immediate, quantifiable improvements across engineering efficiency, security posture, and business operations:

| Metric | Legacy System | New Next.js Platform | Improvement |

| Core Web Vitals (LCP) | 3.8 seconds | 0.9 seconds | 76% faster load times |

| Content Update Turnaround | 24–48 hours (Dev dependency) | Real-time (Self-service CMS) | 100% reduction in dev bottleneck |

| Accessibility Score (Lighthouse) | 64 / 100 | 100 / 100Full WCAG Compliance |

Security Vulnerabilities | Multiple medium/high flags | Zero critical flags (OWASP verified)Enterprise-grade posture |

The client successfully transitioned away from expensive, rigid third-party SaaS CMS tools, owning their data infrastructure completely while

giving their content teams the speed and flexibility required to scale globally.

Shikshya is an E-learning platform where content creators and learners come together to learn more on a topic. Shikshya specializes in awareness content for learners where most studies are done in context of Nepal