Frontend React Developer

• 🌐 Portfolio
• 📧 [email protected]
• 🌍 Bandung, Indonesia
• 🔧 React | Next.js | TypeScript | Tailwind | MUI | Firebase | Supabase

Results-driven Frontend Developer with expertise in building user-centric, responsive web applications and a deep understanding of backend systems. Proficient in React, TypeScript, and Next.js, with experience in UI/UX design, test-driven development, seamless API integration, complex form management, and authentication using serverless systems like Firebase and Supabase. Passionate about creating high-performance, scalable solutions while working efficiently with backend teams to ensure smooth data flow and API integration.

• Frontend Technologies: React, Next.js, Vite, Tailwind CSS, Material UI, Radix UI
• State Management: Redux, TanStack Query
• Backend Knowledge: Firebase, Supabase, API integration, API Gateway, RESTful APIs
• Testing: Vitest, Jest, React Testing Library
• Version Control: Git, GitHub
• Responsive Design: Flexbox, Grid, Keyframe Animations, Advanced CSS
• UI Libraries: ShadCN, Framer Motion, Radix UI
• Other: SEO Optimization, Server-Side Rendering (SSR), Static Site Generation (SSG)

Presenting Teach and Tackle, a Next.js 14+ creation where server and client components finally learn to play nice. Firebase steps in as the sturdy backbone for authentication and database work, proving that a dependable BaaS can be both stylish and functional. Imagine Quora and Stack Overflow decided to throw a get-together for students, teachers, and experts – this platform is that social event of the season! It’s designed to be a custom-fit for schools, universities, or communities, letting users dive into discussions or pick the brains of the wise and knowledgeable.

It’s optimized for SEO (because who doesn’t want to be found on Google?) and has some slick animations, responsive design, and interactive flair, thanks to Framer Motion, Radix UI, and Tailwind CSS. Oh, and TanStack Query ensures data handling feels like a breeze. This project is still under construction – stay tuned for more!

• Tech Stacks: Next.js, Firebase, TanStack Query, Tailwind CSS, Radix UI, ShadCN
• Key Features: SSR and SSG, Firebase for data and image management, responsive design, animations galore, and SEO that brings it all together

Developed a Next.js event management system demonstrating both Server-Side Rendering (SSR) and Static Site Generation (SSG). Integrated Firebase for secure event data storage and image management, optimized for SEO with advanced animations and responsive design using Tailwind CSS and Radix UI. The project is still ongoing for better UI and backend improvement.

• Tech Stacks: Next.js, Firebase, Tailwind CSS, Radix UI, ShadCN
• Key Features: SSR, SSG, Firebase for data and image handling, responsive design, front-end animations, SEO optimization

Developed a cryptocurrency chart viewer using the CoinGecko API to fetch and display live cryptocurrency data. Integrated Google OAuth authentication with Firebase, and built responsive, interactive charts using TypeScript. The app supports real-time data transformation and rendering.

• Tech Stacks: React, Vite, TypeScript, Jest, Vitest, TanStack Query, React Hook Form, CoinGecko API, Firebase, Tailwind CSS, ShadCN
• Key Features: Google OAuth, API data transformation, real-time chart rendering, TypeScript integration

Built a platform for managing chemical compound data integrated with NIH’s PubChem. Developed a custom API Gateway and an advanced form UI using React, TypeScript, and Vite. Implemented dynamic forms with conditional logic, utilizing advanced TypeScript and custom React hooks. Integrated TanStack Query for efficient data fetching and state management.

• Tech Stacks: React, TypeScript, Vite, NestJS, Jest, Vitest, PubChem API, TanStack Query, Material UI
• Key Features: API integration, dynamic form management with conditional rendering, complex data fetching, advanced TypeScript usage

Created a real-time bill-splitting app with secure authentication and user management via Firebase. Showcased advanced React Hook Form for custom form handling and dynamic file uploads, using React and Tailwind CSS for a smooth, responsive user interface.

• Tech Stacks: React, Firebase, Vite, Jest, Vitest, TanStack Query, React Hook Form, Tailwind CSS, ShadCN
• Key Features: Firebase authentication, real-time data management, secure file uploads, form validation, and state management