Nhat Loi
Main background

PHAN NHAT LOI

Software Engineer

Building modern, reliable web and mobile products.

Frontend developer with 4+ years of experience building modern web and mobile applications. Strong expertise in React, Next.js, TypeScript, and frontend architecture, with a focus on creating scalable, maintainable, and high-performance user interfaces. Experienced in developing cross-platform mobile applications using React Native, and familiar with the broader JavaScript ecosystem and modern frontend frameworks.

View CV

Projects

Company Projects

EDENHUB APP

EDENHUB APP

• AgriTech mobile platform built with React Native.

• Focused on crop season management, farming areas, cultivation workflows, and agricultural ecosystem operations.

• Implemented agricultural data management, transparent product traceability, location tracking, and activity logging features.

• Integrated Google Maps API, Map View, and Google Places API.

• Successfully published to production with 300+ active users.

• Featured by Vietnamese media as a smart agriculture and ecosystem management solution.

React native

EDENHUB APP

• AgriTech mobile platform built with React Native.

• Focused on crop season management, farming areas, cultivation workflows, and agricultural ecosystem operations.

• Implemented agricultural data management, transparent product traceability, location tracking, and activity logging features.

• Integrated Google Maps API, Map View, and Google Places API.

• Successfully published to production with 300+ active users.

• Featured by Vietnamese media as a smart agriculture and ecosystem management solution.

WISE Buddy

WISE Buddy

- AI-powered English learning application developed for WISE English Center using React Native.

- Focused on personalized learning paths, AI-assisted conversations, and interactive English learning experiences.

- Developed AI chatbot features using OpenAI API, voice interaction capabilities, and in-app subscription/payment systems.

- Integrated OpenAI API, Google Cloud Text-to-Speech, Firebase, and In-App Purchase.

- Implemented Push Notification, Analytics, and real-time data handling features.

- Currently serving 500+ students at the English center and external learners.

React native

WISE Buddy

- AI-powered English learning application developed for WISE English Center using React Native.

- Focused on personalized learning paths, AI-assisted conversations, and interactive English learning experiences.

- Developed AI chatbot features using OpenAI API, voice interaction capabilities, and in-app subscription/payment systems.

- Integrated OpenAI API, Google Cloud Text-to-Speech, Firebase, and In-App Purchase.

- Implemented Push Notification, Analytics, and real-time data handling features.

- Currently serving 500+ students at the English center and external learners.

DigitFace App

DigitFace App

• DigitFace is a React Native mobile application developed by ZenS Company.

• AI-powered beauty and facial analysis application focused on skin detection and acne assessment.

• Main features include facial scanning, skin analysis, acne detection, and AI-based skincare recommendations.

• Provided personalized insights and skincare knowledge to help users improve skin health effectively.

• Achieved the Encouragement Prize in the “Students with Startup Ideas” competition for the 2024–2025 academic year.

• Official partner: Viva Dental Clinic.

React native

DigitFace App

• DigitFace is a React Native mobile application developed by ZenS Company.

• AI-powered beauty and facial analysis application focused on skin detection and acne assessment.

• Main features include facial scanning, skin analysis, acne detection, and AI-based skincare recommendations.

• Provided personalized insights and skincare knowledge to help users improve skin health effectively.

• Achieved the Encouragement Prize in the “Students with Startup Ideas” competition for the 2024–2025 academic year.

• Official partner: Viva Dental Clinic.

RKD System

RKD System

- Internal customer management system developed for RKD Holdings.

- Focused on customer data management, real-time updates, secure data handling, and business reporting/statistics.

- Developed features for customer information management, real-time synchronization, and data tracking workflows.

- Built using NestJS, MongoDB, WebSocket, and ReactJS (Vite).

- Implemented real-time communication and efficient data processing for internal operational workflows.

- Currently operating with 100+ active users and managing more than 10K customer data records.

ReactJS

RKD System

- Internal customer management system developed for RKD Holdings.

- Focused on customer data management, real-time updates, secure data handling, and business reporting/statistics.

- Developed features for customer information management, real-time synchronization, and data tracking workflows.

- Built using NestJS, MongoDB, WebSocket, and ReactJS (Vite).

- Implemented real-time communication and efficient data processing for internal operational workflows.

- Currently operating with 100+ active users and managing more than 10K customer data records.

hs-globallogistics

hs-globallogistics

- Enterprise internal system developed with NextJS, including a landing page and management platform for administrators and employees.

- Focused on HR management, attendance tracking, internal communication, and logistics business operations.

- Developed features including attendance management, employee management, internal notifications, and work feedback systems.

- Implemented logistics-related functionalities such as multi-currency conversion, container shipment cost simulation, internal document storage, and PDF generation/export for contracts and business documents.

- Built using NextJS and modern web technologies for enterprise workflow optimization and internal operations.

- Currently being used by HS GLOBAL LOGISTICS Co., Ltd for internal workforce and operational management.

NextJS

hs-globallogistics

- Enterprise internal system developed with NextJS, including a landing page and management platform for administrators and employees.

- Focused on HR management, attendance tracking, internal communication, and logistics business operations.

- Developed features including attendance management, employee management, internal notifications, and work feedback systems.

- Implemented logistics-related functionalities such as multi-currency conversion, container shipment cost simulation, internal document storage, and PDF generation/export for contracts and business documents.

- Built using NextJS and modern web technologies for enterprise workflow optimization and internal operations.

- Currently being used by HS GLOBAL LOGISTICS Co., Ltd for internal workforce and operational management.

FastCampus LMS

FastCampus LMS

- Learning Management System (LMS) developed for a South Korean company using NextJS and TypeScript.

- Focused on course management, learner group organization, secure content delivery, and education platform operations.

- Developed LMS workflows for managing courses, learning resources, learner access, and platform services.

- Integrated Kolus to support protected educational content delivery and prevent unauthorized access.

- Implemented strong user authentication and verification flows using PortOne and mOTP.

- Built with NextJS and TypeScript to provide a secure and maintainable learning platform.

NextJS, TypeScript

FastCampus LMS

- Learning Management System (LMS) developed for a South Korean company using NextJS and TypeScript.

- Focused on course management, learner group organization, secure content delivery, and education platform operations.

- Developed LMS workflows for managing courses, learning resources, learner access, and platform services.

- Integrated Kolus to support protected educational content delivery and prevent unauthorized access.

- Implemented strong user authentication and verification flows using PortOne and mOTP.

- Built with NextJS and TypeScript to provide a secure and maintainable learning platform.

eCaraid CMR Portal

eCaraid CMR Portal

- Auto Repair Shop Management is a ReactJS-based web platform developed within the IAM domain.

- Focused on authentication, authorization, user role management, and secure account operations.

- Developed core features including user registration, login, role-based access control, profile management, and account security.

- Implemented authentication and authorization workflows for large-scale multi-user operations.

- Currently deployed across 600+ garages in 27 provinces throughout Vietnam.

- Designed to support high user traffic with strong stability, scalability, and security requirements.

ReactJs

eCaraid CMR Portal

- Auto Repair Shop Management is a ReactJS-based web platform developed within the IAM domain.

- Focused on authentication, authorization, user role management, and secure account operations.

- Developed core features including user registration, login, role-based access control, profile management, and account security.

- Implemented authentication and authorization workflows for large-scale multi-user operations.

- Currently deployed across 600+ garages in 27 provinces throughout Vietnam.

- Designed to support high user traffic with strong stability, scalability, and security requirements.

Auto meeting bot

Auto meeting bot

- Auto Meeting Bot is a backend system developed for the AiNote.one platform.

- Provides APIs for automatically joining online meetings on Google Meet, Zoom, and Microsoft Teams.

- Developed features for meeting video recording, chat history storage, speech-to-text processing, and AI-powered meeting Q&A.

- Integrated NestJS, Puppeteer, WebSocket, Job Queue, and OpenAI API.

- Self-learned backend architecture and real-time system design to strengthen cross-functional collaboration between frontend and backend development.

- Implemented automated meeting workflows and scalable background processing for high-concurrency operations.

- Served as an early comprehensive AI meeting automation solution, providing competitive advantages over traditional meeting bots.

NestJs

Auto meeting bot

- Auto Meeting Bot is a backend system developed for the AiNote.one platform.

- Provides APIs for automatically joining online meetings on Google Meet, Zoom, and Microsoft Teams.

- Developed features for meeting video recording, chat history storage, speech-to-text processing, and AI-powered meeting Q&A.

- Integrated NestJS, Puppeteer, WebSocket, Job Queue, and OpenAI API.

- Self-learned backend architecture and real-time system design to strengthen cross-functional collaboration between frontend and backend development.

- Implemented automated meeting workflows and scalable background processing for high-concurrency operations.

- Served as an early comprehensive AI meeting automation solution, providing competitive advantages over traditional meeting bots.

eCaraid Consumer

eCaraid Consumer

- ECARAID Consumer Web is a NextJS platform developed as a vehicle distribution and used-car marketplace system.

- Co-developed alongside the core ecosystem of Ecaraid.

- Focused on vehicle listing management, user interactions, and online vehicle resale operations.

- Built using NextJS and modern web technologies for scalable marketplace performance.

- The platform currently contains more than 10,000 vehicle listings.

ReactJs

eCaraid Consumer

- ECARAID Consumer Web is a NextJS platform developed as a vehicle distribution and used-car marketplace system.

- Co-developed alongside the core ecosystem of Ecaraid.

- Focused on vehicle listing management, user interactions, and online vehicle resale operations.

- Built using NextJS and modern web technologies for scalable marketplace performance.

- The platform currently contains more than 10,000 vehicle listings.

Learning Projects

Builder Thinking

Builder Thinking

- Canva-like visual document editor built as a browser-based creative workspace.

- Focused on designing resumes, portfolios, posters, documents, and AI-ready layouts with draggable pages and editable layers.

- Implemented canvas editing features including sections, text, shapes, image fills, layer organization, page management, and inspector controls for layout, typography, colors, spacing, and alignment.

- Added export workflows for PNG, PDF, project files, and AI-ready JSON tokens so layouts can be saved, shared, imported, or continued later.

- Explored an AI Builder direction for turning prompts, structured JSON, or design briefs into editable page layers instead of static image outputs.

ReactJS, Canvas Editor

Builder Thinking

- Canva-like visual document editor built as a browser-based creative workspace.

- Focused on designing resumes, portfolios, posters, documents, and AI-ready layouts with draggable pages and editable layers.

- Implemented canvas editing features including sections, text, shapes, image fills, layer organization, page management, and inspector controls for layout, typography, colors, spacing, and alignment.

- Added export workflows for PNG, PDF, project files, and AI-ready JSON tokens so layouts can be saved, shared, imported, or continued later.

- Explored an AI Builder direction for turning prompts, structured JSON, or design briefs into editable page layers instead of static image outputs.

Canva PDF API

Canva PDF API

- Backend API for converting public Canva links into downloadable PDF files, built with NestJS.

- Supports public Canva designs that can be viewed as rendered image pages, including image-based designs and presentation slides.

- Used Puppeteer to open public Canva links, resolve short links, detect the total page count, and render each page through URL fragments such as #1, #2, ....

- Removed Canva viewer chrome, measured the rendered design area, and generated correctly sized PDF pages from browser-rendered content.

- Combined individual page outputs with pdf-lib into a single PDF response that can be downloaded directly from the API.

- Implemented URL validation, rate limiting, sequential export queueing, timeout handling, and Chromium configuration for both local development and Vercel serverless deployment.

NestJS, Puppeteer, PDF

Canva PDF API

- Backend API for converting public Canva links into downloadable PDF files, built with NestJS.

- Supports public Canva designs that can be viewed as rendered image pages, including image-based designs and presentation slides.

- Used Puppeteer to open public Canva links, resolve short links, detect the total page count, and render each page through URL fragments such as #1, #2, ....

- Removed Canva viewer chrome, measured the rendered design area, and generated correctly sized PDF pages from browser-rendered content.

- Combined individual page outputs with pdf-lib into a single PDF response that can be downloaded directly from the API.

- Implemented URL validation, rate limiting, sequential export queueing, timeout handling, and Chromium configuration for both local development and Vercel serverless deployment.

Threejs globe landing

Threejs globe landing

- Experimental 3D landing page built with ReactJS and ThreeJS.

- Focused on learning interactive 3D rendering, globe visualization, animation systems, and immersive UI experiences.

- Explored camera movement, lighting, object interaction, and performance optimization for browser-based 3D applications.

- Built as part of personal research to strengthen understanding of modern frontend visualization techniques.

ReactJs, ThreeJS

Threejs globe landing

- Experimental 3D landing page built with ReactJS and ThreeJS.

- Focused on learning interactive 3D rendering, globe visualization, animation systems, and immersive UI experiences.

- Explored camera movement, lighting, object interaction, and performance optimization for browser-based 3D applications.

- Built as part of personal research to strengthen understanding of modern frontend visualization techniques.

Rubik landing

Rubik landing

- Interactive visual landing page developed with ReactJS.

- Focused on studying modern UI/UX motion design, interactive transitions, and creative frontend experiences.

- Explored animation timing, visual storytelling, and responsive interaction patterns for modern landing pages.

- Built as a personal learning project to improve frontend animation and visual presentation skills.

ReactJs

Rubik landing

- Interactive visual landing page developed with ReactJS.

- Focused on studying modern UI/UX motion design, interactive transitions, and creative frontend experiences.

- Explored animation timing, visual storytelling, and responsive interaction patterns for modern landing pages.

- Built as a personal learning project to improve frontend animation and visual presentation skills.

Mini game

Mini game

- Experimental ThreeJS project created through AI-assisted prompting and rapid idea-to-product workflows.

- Focused on exploring how AI can accelerate product prototyping, creative coding, and interactive 3D web experiences.

- Applied prompt engineering techniques to generate UI concepts, animations, scene structures, and interaction ideas from abstract product concepts.

- Built with ThreeJS and modern frontend technologies to study AI-supported development workflows and creative experimentation.

- Helped strengthen understanding of AI-assisted product development, rapid prototyping, and interactive visual system design.

ReactJS

Mini game

- Experimental ThreeJS project created through AI-assisted prompting and rapid idea-to-product workflows.

- Focused on exploring how AI can accelerate product prototyping, creative coding, and interactive 3D web experiences.

- Applied prompt engineering techniques to generate UI concepts, animations, scene structures, and interaction ideas from abstract product concepts.

- Built with ThreeJS and modern frontend technologies to study AI-supported development workflows and creative experimentation.

- Helped strengthen understanding of AI-assisted product development, rapid prototyping, and interactive visual system design.

Crawl Demo project

Crawl Demo project

- Backend data crawling system developed with NestJS for collecting exchange rate and crude oil price information.

- Applied Puppeteer to automate browser interactions and extract financial data from Vietcombank and related information sources.

- Implemented scheduled crawling workflows, data transformation, and automated synchronization processes.

- Focused on learning backend automation, web scraping architecture, and realtime financial data processing.

- Built with NestJS, Puppeteer, and scalable backend service patterns to strengthen backend engineering and system integration skills.

NestJS, Puppeteer

Crawl Demo project

- Backend data crawling system developed with NestJS for collecting exchange rate and crude oil price information.

- Applied Puppeteer to automate browser interactions and extract financial data from Vietcombank and related information sources.

- Implemented scheduled crawling workflows, data transformation, and automated synchronization processes.

- Focused on learning backend automation, web scraping architecture, and realtime financial data processing.

- Built with NestJS, Puppeteer, and scalable backend service patterns to strengthen backend engineering and system integration skills.

Chat App realtime

Chat App realtime

- Fullstack realtime chat application developed with ReactJS and NodeJS.

- Built as a personal learning project to strengthen backend development and realtime system knowledge.

- Implemented backend services using NodeJS and MongoDB, including CRUD operations, advanced querying, sorting, grouping, and realtime messaging workflows.

- Applied authentication and security techniques such as password hashing, accessToken, refreshToken, and image storage integration with Cloudinary.

- Initially implemented realtime communication with Socket.IO, later migrated to Pusher to improve deployment stability and scalability.

- Helped improve understanding of frontend-backend collaboration, API architecture, and realtime application design.

ReactJS, NodeJS

Chat App realtime

- Fullstack realtime chat application developed with ReactJS and NodeJS.

- Built as a personal learning project to strengthen backend development and realtime system knowledge.

- Implemented backend services using NodeJS and MongoDB, including CRUD operations, advanced querying, sorting, grouping, and realtime messaging workflows.

- Applied authentication and security techniques such as password hashing, accessToken, refreshToken, and image storage integration with Cloudinary.

- Initially implemented realtime communication with Socket.IO, later migrated to Pusher to improve deployment stability and scalability.

- Helped improve understanding of frontend-backend collaboration, API architecture, and realtime application design.

React-native chat app

React-native chat app

- Realtime mobile chat application developed with React Native.

- Built as a research project based on learning resources and experimentation with Expo ecosystem.

- Implemented messaging features, realtime communication with Pusher, message reactions, message deletion, and user profile management.

- Explored mobile performance optimization techniques such as lazy loading and efficient realtime state handling.

- Focused on improving understanding of realtime mobile application architecture and cross-platform development workflows.

React Native

React-native chat app

- Realtime mobile chat application developed with React Native.

- Built as a research project based on learning resources and experimentation with Expo ecosystem.

- Implemented messaging features, realtime communication with Pusher, message reactions, message deletion, and user profile management.

- Explored mobile performance optimization techniques such as lazy loading and efficient realtime state handling.

- Focused on improving understanding of realtime mobile application architecture and cross-platform development workflows.

E-commerce Template

E-commerce Template

- E-commerce website template developed with NextJS.

- Built as a learning project to study reusable frontend architecture and scalable e-commerce UI structures.

- Includes common e-commerce pages such as authentication, landing page, shopping cart, product listing, product detail, and contact page.

- Applied responsive design principles and component-based architecture for reusable development workflows.

- Focused on improving practical understanding of modern e-commerce frontend implementation.

NextJS

E-commerce Template

- E-commerce website template developed with NextJS.

- Built as a learning project to study reusable frontend architecture and scalable e-commerce UI structures.

- Includes common e-commerce pages such as authentication, landing page, shopping cart, product listing, product detail, and contact page.

- Applied responsive design principles and component-based architecture for reusable development workflows.

- Focused on improving practical understanding of modern e-commerce frontend implementation.

Restaurant Template

Restaurant Template

- Restaurant landing page template developed with NextJS.

- Built as a frontend practice project to improve UI composition, responsive layouts, and landing page development skills.

- Includes sections such as hero banner, restaurant introduction, menu showcase, contact information, and reservation support.

- Explored responsive design systems and reusable layout structures for business landing pages.

- Focused on mastering clean UI implementation and modern web presentation techniques.

NextJS

Restaurant Template

- Restaurant landing page template developed with NextJS.

- Built as a frontend practice project to improve UI composition, responsive layouts, and landing page development skills.

- Includes sections such as hero banner, restaurant introduction, menu showcase, contact information, and reservation support.

- Explored responsive design systems and reusable layout structures for business landing pages.

- Focused on mastering clean UI implementation and modern web presentation techniques.

PHAN NHAT LOI

SOFTWARE ENGINEER

Building scalable web and mobile products.

Ho Chi Minh City, Vietnam • Open to opportunities

SOFTWARE ENGINEER

<Address> Ho Chi Minh City, Vietnam </Address>

<Mobile> +84 367 740 971 </Mobile>

<Email> phanloi971@gmail.com </Email>

<LinkedIn> linkedin.com/in/nhatloi </LinkedIn>

<GitHub> github.com/PhanNhatLoi </GitHub>