DESCRIPTION
December, 2025
E-Commerce
Clarity
Clarity is a modern, high-performance e-commerce platform built for excellent user experience and scalability. The frontend was designed in Figma and developed with Next.js, TypeScript, TailwindCSS, TanStack Query, Axios, and Framer Motion. The backend was built using Python FastAPI with PostgreSQL, Redis caching, and JWT authentication.
PROJECT DETAILS
ROLE
Fullstack Developer
CHALLENGES
Building a secure, scalable e-commerce platform with AI integration, payment processing, admin image uploads, and smooth frontend interactions.
SOLUTION
Developed a fullstack solution with FastAPI backend using PostgreSQL and asyncpg. Implemented JWT + Google OAuth authentication, secure email verification, and password recovery. Integrated Google Gemini AI chatbot with session context, Midtrans payments, and Cloudflare R2 for storing images uploaded from the admin panel. Used Redis for caching, TanStack Query + Axios for efficient data fetching and API communication on the frontend.
PERFORMANCE
- Redis caching for faster API responses
- TanStack Query + Axios for optimized data fetching
- Cloudflare R2 for optimized image storage and delivery
- Async database operations with asyncpg
- Dockerized backend for scalable deployment
TECH STACK
Next.js
TypeScript
TailwindCSS
TanStack Query
Axios
Framer Motion
Python
FastAPI
PostgreSQL
Redis
Cloudflare R2
Google Gemini AI
Midtrans
JWT
Docker
Google Cloud Run
Vercel
Supabase
ARCHITECTURE
Frontend built with Next.js App Router, TanStack Query, Axios, and deployed on Vercel. Backend built with FastAPI, containerized with Docker, and deployed on Google Cloud Run. PostgreSQL as primary database, Redis for caching, and Cloudflare R2 for admin-uploaded product images.