TubagusDafa
Warung Dafa (Wardap) cover
Visit Sitewarung-dafa.vercel.app
Academic / University
Web Development

Warung Dafa (Wardap)

RoleFull-Stack Web Developer
Timeline2026-04 — 2026-04
OrganizationUniversity of Indonesia - Computer Engineering Undergraduate

Developed and deployed Warung Dafa, a full-stack web application operating as an e-commerce storefront and personal expense tracker. The system leverages a Single Page Application (SPA) architecture, a persistent relational database, and a caching and messaging layer to manage user e-wallet balances and handle inventory transactions.

E-commerce Laptop Product Detail View.png

Architecture & Tech Stack

Frontend (Client-Side)

  • Core Framework: Bootstrapped a SPA using React (v19.2.5) compiled through the Vite (v8.0.10) build tool.
  • Styling & UI: Applied Tailwind CSS (v4.2.4) via @tailwindcss/vite for responsive, utility-first component styling.
  • State & Routing: Implemented state-driven React routing with Fetch API integration, allowing for automatic credential persistence and proactive session invalidation.

Backend Infrastructure

  • Server Environment: Engineered the core backend architecture utilizing Node.js and the Express.js (v4.18.2) framework for handling RESTful endpoints.
  • Database Design: Architected a normalized relational schema via PostgreSQL (pg v8.11.3). Defined cascading foreign keys and constraints to manage Users, Items, and Ledger Transactions.
  • Caching & Messaging Layer: Integrated Redis (redis v5.12.1):
    • Read-Through Pattern: Implemented for caching user profiles (with a 60s TTL) alongside active invalidation (DEL commands) to ensure near-immediate consistency after profile updates.
    • Transaction Audit Stream: Built an asynchronous audit log with Redis XADD streams to log successful financial transactions without blocking the primary transaction response path.

Security & Authentication Operations

  • Authentication: Configured stateless authentication via JSON Web Tokens (JWT). Tokens are transmitted via httpOnly and sameSite: 'none' cookies over HTTPS (via the Secure flag) to mitigate XSS attacks.
  • Data Protection: Implemented bcryptjs (v3.0.3) for cryptographic password hashing and express-validator (v7.0.1) for payload sanitization and type enforcement.
  • Network Security: Hardened HTTP headers via helmet (v7.1.0), configured CORS credential validation, and deployed express-rate-limit (v7.1.4) on authentication routes to mitigate brute-force and dictionary attacks.

June 28, 2026 3_26_00 PM - Screenshot.png

Core Competencies

React, Node.js, PostgreSQL, Redis, Express.js, Web Security, REST API Architecture