Portofolio

I collaborated with my team to develop a fully responsive website for Ratch Australia, using Nuxt.js for the frontend and Strapi 4 as the backend. My primary focus was on frontend development and Strapi integration, working alongside my team lead, who also contributed to frontend and backend implementation.

Key Features:

✅ Fully Dynamic Content – Users can add, edit, or remove pages and sections directly from the Strapi admin panel.
✅ High SEO Optimization – The site is optimized for search engines, achieving excellent scores on Google PageSpeed Insights.
✅ Fast & Lightweight – Leveraging Nuxt.js Static Site Generation (SSG) for optimal performance and quick load times.
✅ Advanced Search Functionality – Integrated Meilisearch and Algolia components to provide fast, accurate search capabilities for products, articles, and other site content.
✅ Product & Article Management – The website includes structured sections for products, articles, and other dynamic content, all fully manageable from Strapi.
✅ Team Collaboration – Worked closely with my team, with a lead guiding the project while also assisting in frontend and Strapi development.

This project highlights my expertise in Nuxt.js, Strapi 4, and search integration while collaborating effectively to build a high-performance, SEO-friendly, and fully dynamic website. 🚀

Coffee Shop Point of Sale System

Tech Stack: Nuxt.js 2, Vuetify, Privy OAuth, Chart.js

A fully responsive POS (Point of Sale) web application built for a coffee shop, designed to streamline operations and improve customer experience. The system supports three distinct roles—Barista, Admin, and Customer—each with tailored access and functionality.

Key Features:

• 🔐 Secure Authentication with Privy OAuth
• 📊 Admin Dashboard with real-time analytics and charts
• 🧾 Order Management for seamless order tracking and updates
• 📦 Product & Stock Management including Stock Opname (inventory audit)
• 🎯 Role-based Access Control with intuitive UI per user type
• 📱 Fully Responsive Design for desktop and mobile use

Ideal for small to medium-sized cafés aiming for efficient digital workflows and great customer service.

Jayantara PDF Signing & Payment Integration

Description:
Developed a responsive landing page for Jayantara's PDF signing feature, leveraging Privy ID for secure digital signatures. Integrated Midtrans payment gateway to facilitate smooth, secure transactions for users. The landing page was designed with Nuxt 2 and Vuetify, ensuring optimal performance and full responsiveness across devices.

Features:

• PDF Signing: Integrated with Privy ID for a seamless and secure document signing experience.
• Payment Gateway: Smooth integration with Midtrans for real-time payment processing.
• Full Responsiveness: Designed to be fully responsive on all devices, providing an optimal user experience across desktop, tablet, and mobile.
• Modern Tech Stack: Utilized Nuxt 2 for SSR and Vuetify for a sleek, material-design-based UI.

Technologies Used:

• Frontend: Nuxt 2, Vuetify
• Payment Integration: Midtrans API
• Authentication: Privy ID for digital signatures

Redesign and development of the landing page for stoneandchalk.com.au, translating UI designs from Adobe XD into a modern, responsive layout using Nuxt.js 3. Focused on improving site performance and SEO while ensuring a seamless user experience across all devices. Converted legacy CSS to Tailwind CSS, optimizing for maintainability and performance.

Key Features:

• UI Redesign: Implemented design from Adobe XD to Nuxt.js 3 with a clean and modern layout, ensuring compatibility with the existing brand style.
• Performance Optimization: Improved page load times through techniques like image optimization, lazy loading, and code splitting.
• SEO Enhancements: Integrated SEO best practices such as meta tags, structured data, clean URLs, and a sitemap for better search engine visibility.
• Tailwind CSS Migration: Converted the existing CSS to Tailwind CSS for better flexibility, maintainability, and performance.

Technologies Used:

• Frontend: Nuxt.js 3, Tailwind CSS
• SEO Tools: Structured Data, Meta Tags, Sitemap
• Performance Optimization: Image Optimization, Lazy Loading, Code Splitting

As a Frontend Developer for the SunRice website (https://www.sunrice.com.au), I worked alongside a teammate to develop a dynamic, responsive interface using Nuxt 3 with TypeScript. All components are fully dynamic, enabling users to update content through Strapi 4 CMS. We used Tailwind CSS for modern styling and integrated Meilisearch and Algolia Instant Search to provide powerful search functionality. The project also prioritized strong SEO performance.

Developed a fully responsive landing page for GeoMastery using Nuxt.js 3, ensuring a smooth user experience across all devices. Tailwind CSS was used for styling, and Headless UI for customizable, accessible components. Integrated with Strapi 4 CMS, allowing dynamic content management. My role involved building the frontend, integrating the CMS, and optimizing the site for performance and responsiveness on all screen sizes.

Part of a two-person frontend team, I developed a scalable Loyalty Management CMS for Astra Honda Motor, optimized for millions of users in Indonesia. The CMS manages loyalty members, points, levels, customers, and RBAC. It includes a customizable data table with grouping, resizing, drag-and-drop, export, sorting, custom search inputs (autocomplete, select, date range), and an edit view for in-table data modification. Built with Next.js 14 Pages Router, TypeScript, MUI, React Query, and a custom date range picker using React-Date-Picker.

Gendut Gerosir is a web application created for grocery stores that have 2 types of consumers with different prices, namely retail and wholesale. Having product management functions, analytics, user management, and has a cashier system (point of sales) in it.

• Nuxt js 2

• Vuetify

• Express js

• MongoDB

Url: https://gendut-grosir.ianfebi01.tech/

(login: user: [email protected], pw: 123456)

Repository: https://github.com/ianfebi01/gendut-grosir & https://github.com/ianfebi01/gendut-grosir-be