Projects
Timeline of all my Projects
My Portfolio · Personal Project
2025 · 2 mos
Full-Stack Development · TypeScript · JavaScript
- •Frontend: Next.js 15 with React 19
- •Backend: Next.js API routes with Vercel serverless functions
- •Database: Vercel Blob for page views tracking
- •Tailwind CSS for responsive design
- •Next-themes for dark/light mode toggle
- •React Simple Typewriter for animated text
- •React Vertical Timeline for project showcase
Twister · Enterprise
2024 - 2025 · 8 mos
Full-Stack Development · TypeScript · Java
- •Frontend: React 18 with Vite
- •Backend: Spring Boot with RESTful APIs
- •Database: PostgreSQL with Flyway migrations
- •TanStack Router/Query/Table for state management
- •Keycloak OAuth2/OIDC authentication
- •MinIO S3-compatible object storage service
- •GitHub Actions CI/CD with automated testing
- •Docker builds with GitHub Container Registry
- •Docker Compose for service orchestration
- •Digital Ocean cloud infrastructure deployment
StyleZ · E-Commerce
2024 · 3 mos
Full-Stack Development · TypeScript · JavaScript
- •Frontend: Next.js 14 with React 18
- •Backend: Next.js API routes with Prisma ORM
- •Database: PostgreSQL with NextAuth.js adapter
- •Radix UI components with shadcn/ui design system
- •NextUI for advanced component library
- •TanStack Query for server state management
- •Framer Motion for smooth animations
- •React Hook Form with Zod validation
- •Tailwind CSS with custom animations
- •Sentry for error monitoring and performance
Yaps · Social
2024 · 2 mos
Full-Stack Development · TypeScript · JavaScript
- •Frontend: Next.js 14 with React 18
- •Backend: Next.js API routes with Pusher integration
- •Database: Upstash Redis for session storage and caching
- •NextAuth.js with Upstash Redis adapter
- •React Hook Form with Zod validation
- •Headless UI for accessible components
- •Tailwind CSS with custom forms styling
- •React Hot Toast for notifications
- •Vercel Analytics and Speed Insights
- •Lucide React for consistent iconography
SoleSteals · E-Commerce
2023 · 2 mos
Full-Stack Development · JavaScript
- •Frontend: React 18 with Vite
- •Backend: Firebase authentication and cloud functions
- •Database: Firebase Firestore NoSQL database
- •React Router DOM for client-side routing
- •Tailwind CSS for utility-first styling
- •Framer Motion for interactive animations
- •React Responsive Carousel for product galleries
- •React Select for enhanced filtering options
Todoer · Utility
2023 · 1 mos
Full-Stack Development · JavaScript
- •Frontend: Vanilla ES6+ features
- •Backend: Local storage for data persistence
- •Sass for advanced CSS preprocessing
- •Autoprefixer for cross-browser compatibility
- •Browser-sync for live development server
- •PostCSS with CSSnano for optimization
- •NPM scripts for automated build pipeline
Style Nation · Business
2023 · 2 mos
Full-Stack Development · JavaScript
- •Frontend: Astro.js for static site generation
- •Island architecture for optimized loading
- •Zero-JS by default with selective hydration
- •Built-in image optimization and lazy loading
Barista Chaw Su · Educational
2023 · 1 mos
Full-Stack Development · JavaScript
- •Frontend: Astro.js with React components
- •Material-UI for consistent design system
- •Framer Motion for smooth animations
- •Sass for advanced styling capabilities