# MO'BLONC — **Modern Beauty E-Commerce Platform**

**Domain:** [mobloncbeauty.com](https://mobloncbeauty.com)  
**Stack:** Laravel Blade, Tailwind CSS, Alpine.js  
**Payments:** Midtrans  
**Shipping:** RajaOngkir  
**Integrations:** TikTok Shop, Shopee Seller, Instagram & TikTok API  
**Model:** B2C / B2B (Single Seller)  

---

## ✨ Project Overview

**MO'BLONC** is a modern, fully responsive beauty e-commerce platform that I developed as part of my professional portfolio. The project combines solid backend architecture with an elegant, flexible frontend to deliver a seamless online shopping experience for beauty products.

MO'BLONC is designed for both direct-to-consumer (**B2C**) and reseller (**B2B**) sales, with integrated tools for payment, shipping, stock management, and social media connectivity.

---

## ⚙️ Tech & Features

### 🛠️ **Built With Modern Web Tools**

I built MO'BLONC using:
- **Laravel Blade** for a secure and maintainable backend and templating.
- **Tailwind CSS** for clean, utility-first styling.
- **Alpine.js** for lightweight frontend interactivity.
- **Midtrans** for payment processing.
- **RajaOngkir** for dynamic shipping cost calculations.

### 🛒 **Core E-Commerce Functionality**

- Secure product browsing, checkout, and order processing.
- Real-time shipping cost calculation.
- Integrated reseller system — resellers can register and are displayed on an interactive map so customers can easily find local stockists.
- Inventory syncing with **TikTok Shop** and **Shopee Seller** to keep stock updated across channels.

### 📚 **Content-Driven Engagement**

The site includes a beauty blog section to help build organic traffic and engage customers with tips, trends, and skincare knowledge.

### 📲 **Social Media API Integration**

I implemented **Instagram** and **TikTok** APIs so that the latest content can be displayed directly on the website, keeping the brand presence fresh and connected to its audience.

---

## 🗺️ **Smart Reseller Mapping**

To support local sales, the platform features a reseller locator map. New resellers appear automatically on the map when they register, making it easy for customers to buy from the nearest trusted source.

---

## 🚀 **Project Goal**

The main goal of this project was to build a robust, production-ready e-commerce system with:
- Secure payment and logistics flows.
- Marketplace and social media integrations.
- Scalable architecture that can support both B2C and B2B use cases.

This project demonstrates my ability to design, develop, and deploy a complete web application using modern web technologies and third-party APIs.

---

## 🌟 **Visit the Live Demo**

Visit **[mobloncbeauty.com](https://mobloncbeauty.com)** to see the project in action.

---

## 📌 **What I Learned**

Through MO'BLONC, I deepened my experience in:
- Full-stack Laravel development.
- Integrating payment gateways (Midtrans).
- Working with shipping APIs (RajaOngkir).
- Connecting to external marketplaces (TikTok Shop & Shopee).
- Building a dynamic reseller network with geolocation features.
- Implementing modern responsive design with Tailwind CSS & Alpine.js.

---

**MO'BLONC** is a showcase of how I approach building real-world web applications that blend functionality, usability, and modern tech stacks.

---


Developing a complete e-commerce site with integrated payments, shipping, and reseller.

MO'BLONC Beauty ( E-Commerce B2C )

# E-Komite Gemolong - School Committee Web Portal Project

## Project Overview

E-Komite Gemolong is a comprehensive web platform consisting of three interconnected websites designed to enhance
communication and transparency between the Gemolong School Committee, schools, and the community. The project includes:

- **Main Portal**: [e-komitegemolong.or.id](https://e-komitegemolong.or.id/)
- **Elementary School Website**: [sd.e-komitegemolong.or.id](https://sd.e-komitegemolong.or.id/)
- **Junior High School Website**: [smp.e-komitegemolong.or.id](https://smp.e-komitegemolong.or.id/)

## Technical Architecture

### Main Portal

The main portal serves as the central hub for the Gemolong School Committee's online presence, built with:

- Modern HTML5 and TailwindCSS for responsive design
- Alpine.js for lightweight interactivity
- AOS (Animate On Scroll) library for engaging animations
- Optimized for performance and mobile responsiveness

### School Websites

![E-Komite Gemolong Screenshot 1](https://media.fathur.dev/public/images/projects/komitegemolong-2.webp)

Both the Elementary School (SD Negeri Gemolong) and Junior High School (SMP Negeri 3 Gemolong) websites share a common
codebase and architecture:

- Built with Laravel framework for robust backend functionality
- Consistent design language across both school platforms
- Tailored content management systems for school-specific needs
- User authentication and role-based access control

### Deployment Infrastructure

The entire ecosystem is deployed using Docker stack:

- Containerized applications for consistent environments
- Scalable architecture allowing for independent updates to each site
- Shared resources where appropriate to optimize server usage
- Integrated CI/CD pipeline for streamlined deployment

## Project Purpose

The E-Komite Gemolong project serves multiple functions:

- **Transparency**: Providing clear information about the school committee's roles, vision, mission, and organizational
  structure
- **Communication**: Creating direct channels between the committee, schools, parents, and the community
- **Anti-Bullying Initiative**: Promoting a safe educational environment through dedicated anti-bullying resources
- **Educational Support**: Enabling the committee to fulfill its advisory, supporting, and controlling functions

![E-Komite Gemolong Screenshot 2](https://media.fathur.dev/public/images/projects/komitegemolong-3.webp)

## Key Features

- Responsive design optimized for all devices
- School-specific portals with customized content
- Organizational information and structure visualization
- Educational resources and committee announcements
- Anti-bullying campaign integration
- Contact information and social media links

This project represents a holistic approach to digital transformation in educational committee management, providing a
unified online presence while maintaining distinct identities for each educational institution under the committee's
supervision.

An official web portal for the Komite Sekolah Gemolong, designed to enhance quality education.

Komite Gemolong

## Lakubo - Boyolali SME Marketplace

## Project Overview
Lakubo is an E-Marketplace solution designed to empower Micro, Small, and Medium Enterprises (MSMEs) in Boyolali Regency. The majority of these businesses currently rely on conventional marketing methods with minimal digital platform adoption. This project aims to bridge this gap by providing an accessible online marketplace.

## Business Goals
- Expand marketing reach for local MSMEs
- Increase sales opportunities
- Simplify product discovery for customers
- Enhance business competitiveness
- Contribute to Boyolali's economic growth

## System Architecture
The E-Marketplace system was designed using:
- Context Diagrams
- Hierarchy Diagrams
- Data Flow Diagrams (DFD)
- Entity Relationship Diagrams (ERD)
- Table Relation Schemas

## Technologies Used
### Web Platform
- **Backend**: PHP, Laravel, MySQL
- **Frontend**: Tailwind CSS

### Mobile Platform
- **Android**: Kotlin, XML

## Context Diagram
The context diagram below illustrates the data flow between three primary actors in the system: administrators, sellers, and customers.

![Context Diagram](https://github.com/xfathurrahman/Lakubo-app/raw/master/public%2Fscreenshots%2Fkonteks.jpg)

## Research Methodology
Our approach included:
- Stakeholder interviews
- Literature reviews
- Iterative system development

Lakubo is an E-Marketplace system that helps MSMEs in Boyolali market their products online.

Lakubo

# Hico Legal - Business Legal Solutions

A professional legal services platform providing comprehensive solutions for businesses in Indonesia, specializing in company formation, licensing, and regulatory compliance.

## Overview

Hico Legal serves as a digital gateway for entrepreneurs and SMEs seeking efficient, transparent legal assistance. The platform emphasizes modern approaches to business legalization processes, allowing business owners to focus on their core operations.

## Features

- **Interactive UI** with rotating header images and messages
- **Responsive design** with modern aesthetic using cyan and amber color scheme
- **Service showcase** for all legal offerings
- **Testimonial section** featuring client experiences
- **Contact form** for free consultations

## Core Services

- Company Establishment (PT/CV formation)
- Company Closure
- Business Licensing (OSS/NIB, SIUP, TDP)
- Special/Sectoral Permits
- Agreement Creation and Review
- Document Modification

## Technology Stack

- **Framework**: Next.js
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **Dependencies**: React, Next Image

Providing professional legal services and solutions for business licensing and regulatory compliance.

Hico Legal

## 3D Avatar Interactive Website

I developed an interactive 3D avatar website where users can input prompts in any language, and the avatar responds in real-time using AI-generated speech. The avatar features realistic lip-syncing and delivers natural, engaging conversations regardless of the language used.


I created a 3D avatar website where the avatar can lip-sync and speak based on text prompts.

3D Avatars Chat Bot

# PPDB SDN Salam

A web/mobile student enrollment system for SDN Salam Elementary School.

### PPDB SDN Salam (Web Application)

This is a web application for managing the PPDB (Penerimaan Peserta Didik Baru) process, specifically designed for the
SDN Salam school. The application is built using PHP and MySQL, and it provides features for both administrators and
users to manage and view PPDB data.

|                                Web Application Screenshots                                |
|:-----------------------------------------------------------------------------------------:|
|        ![PPDB Web](https://media.fathur.dev/public/images/projects/ppdb-web.webp)         |
|                             *PPDB Web Application Interface*                              |
| ![PPDB Web Screenshot 1](https://media.fathur.dev/public/images/projects/ppdb-web-1.webp) |
|                           *Example of the PPDB Web Application*                           |

### PPDB SDN Salam (Mobile)

This is a mobile application for registering new students at SDN Salam. The app is built using React Native and provides
a user-friendly interface for parents and guardians to register their children for school. The app communicates with the
web application to send and receive data related to the PPDB process.

|                                Mobile Application Screenshots                                |
|:-------------------------------------------------------------------------------------------:|
|        ![PPDB Mobile](https://media.fathur.dev/public/images/projects/ppdb-mobile.webp)     |
|                             *PPDB Mobile Application Interface*                              |
| ![PPDB Mobile Screenshot 1](https://media.fathur.dev/public/images/projects/ppdb-mobile-1.webp) |
|                       *Example of the PPDB Mobile Application - Screen 1*                    |
| ![PPDB Mobile Screenshot 2](https://media.fathur.dev/public/images/projects/ppdb-mobile-2.webp) |
|                       *Example of the PPDB Mobile Application - Screen 2*                    |

 Integrated solution for managing new student enrollment at SDN Salam Elementary School

Student Admission (PPDB Zonasi)

This is a simple website for furniture store. This website is built using Laravel 8 and Tailwind CSS.

Fathur Rahman

Projects

Loading...