Full-Stack WEB DEVELOPER

WEB DEV

WITH OVER 1-2 YEARS OF HANDS-ON EXPERIENCE, THIS MERN STACK DEVELOPER HAS BUILT SCALABLE BACKENDS AND SEAMLESS USER INTERFACES USING MONGODB, EXPRESS, REACT, NODE.JS, AND TAILWIND CSS. NOW ADDING AI FEATURES WITH GPT AND OLLAMA, DEPLOYED VIA VERCEL, NETLIFY, AND BACKENDS POWERED BY RAILWAY AND RENDER.

About Me

HI THERE, I'M JOHN

I'm a full-stack web developer specializing in the MERN stack (MongoDB, Express.js, React.js, Node.js). I build responsive, user-friendly interfaces with React and Tailwind CSS, and develop secure, scalable backends using Node.js and Express. I integrate AI features using OpenAI GPT APIs and Ollama for local LLMs, enabling smart, privacy-friendly tools like text explanation and content generation. I use Git/GitHub for version control and collaborative development. My goal is to create efficient, intelligent, and user-focused web applications from end to end—deployed on Netlify or Vercel for the frontend, and powered by scalable backend services on Railway or Render.

TECH STACK

I specialize in building scalable full-stack web applications using the MERN stack (MongoDB, Express.js, React, Node.js) and modern tools like Tailwind CSS. I create responsive, user-focused interfaces and integrate AI features using OpenAI GPT APIs and Ollama for local LLMs. I also use Git and GitHub for efficient version control, collaboration, and deployment—leveraging Netlify or Vercel for frontend hosting, and Railway or Render for robust backend services.

VERY FLEXIBLE WITH COMMUNICATIONS & LOCATIONS

Based in the Philippines and open to remote work opportunities worldwide.

PASSION FOR CODING

Solving problems and building solutions through code. Programming is my profession—it's my passion. I enjoy exploring new technologies and enhancing my skills.

My Projects

Color Picker

Color Picker Website

This Color Picker is a simple and intuitive React.js application that allows users to visually select and preview colors in real time. Built using functional components and React hooks, it features a native HTML5 color input and dynamically displays the selected color as both a visual background and a hex code label.

#Javascript #CSS #ReactJS
To-Do-List

To-Do-List Website

This To-Do-List application is a lightweight and fully interactive task manager built with React.js. It enables users to add, delete, and rearrange their tasks with ease using a clean and responsive interface. The app is built using React hooks for efficient state management and provides real-time updates to the task list.

#Javascript #CSS #ReactJS
Digital Clock

Digital Clock Website

This Digital Clock is a real-time, dynamic clock application built with React.js. It displays the current time in a 12-hour format with AM/PM notation, updating every second using React’s useEffect and setInterval. The app uses clean formatting with zero-padding for single-digit values, ensuring a consistent and polished display.

#Javascript #CSS #ReactJS
Periodic Table

Periodic Table(Vanilla JS + JSON)

This Periodic Table Project is a dynamic and interactive web application built using vanilla JavaScript, HTML/CSS, and data fetched from a JSON file (periodic-table.json). It visually represents all the chemical elements in their correct positions on the table based on group and period.

#CSS #Vanilla JS #JSON
Philippine Weather Map

Philippine Weather Map Website (React + OpenWeather API)

This project is a weather visualization Website built with ReactJS and Leaflet. It displays a live map of selected Philippine cities (Manila, Cebu, Davao), showing current weather data such as temperature, condition, and humidity. Weather data is fetched in real-time from the OpenWeather API, and each city is marked on the map with interactive popups for a quick weather overview.

#ReactJS #Leaflet #APIIntegration
Movie Website

Cineflex Website (React + The Movie Database)

A responsive movie browsing Website built with ReactJS, featuring live data from the TMDb (The Movie Database) API. Users can explore popular movies on initial load and search for any film by title using the TMDb search endpoint. The website handles loading states, errors, and dynamically updates movie listings based on user input.

#ReactJS #CSS #APIIntegration
TO DO List MERN

To-Do-List (MERN Stack)

A full-stack To-Do List application built with React on the frontend and Node.js/Express on the backend, connected to a MongoDB database. Users can create, complete, and delete tasks. The React app communicates with the server via Axios to fetch, update, and delete data in real time, reflecting changes instantly in the UI.

#ReactJS #Node.js/Express #MongoDB
Sam Goodwin

Interactive World Map with Flags and Testimonials (Wordpress/Divi Theme, amCharts, jQuery)

An interactive world map built with WordPress, Divi Theme, amCharts, and jQuery. It displays each country’s name, flag, and a testimonial from Sam Goodwin on hover. Clean, responsive, and perfect for showcasing global travel experiences. Users can click on any country for more engaging, personalized content.

#Wordpress/Divi #amCharts #jQuery
Mediatiger

MediaTiger – Full-Stack Web App with Supabase Integration

I built the MediaTiger web app to enable both admins and users to connect and interact with Supabase for authentication and real-time data access.

#Supabase #ApiIntegration #TypeScript
AMVE

AI Memory Verse Explainer (React, Tailwind Css, Node.js/Express, Ollama/GPT)

AI Memory Verse Explainer is a simple and intuitive React.js application that allows users to input any Bible verse and receive a clear, easy-to-understand explanation in English and Cebuano. Built with functional components and React hooks, it connects to a backend powered by GPT/Ollama, which processes the verse and returns simplified explanations ideal for kids, youth, or new believers.

#React.js #Node.js/Express #GPT/Ollama

Local Client Projects

Color Picker

UNSHS Website (Html, Css and Javascript)

The UNSHS High School Website is a fully responsive and modern school portal built using HTML, CSS, and JavaScript, designed to provide students, parents, and faculty with easy access to school announcements, programs, and contact information. The frontend is version-controlled using GitHub and deployed via Vercel for fast and seamless updates. The backend, built with Node.js and Express, is deployed on Render, handling server-side logic such as form submissions and API endpoints. This project demonstrates a complete full-stack workflow using open-source tools and cloud platforms for efficient and maintainable web development.

#HTML #CSS #JavaScript #Node.js/Express #Email.js #Vercel #Render #GitHub
To-Do-List

OPAC Web Application (React, Tailwind CSS, Node.js/Express, MongoDB, Vercel, Render)

The UNSHS OPAC (Online Public Access Catalog) is a full-stack web application built with React and Tailwind CSS that allows users to search and view library books, while providing an admin dashboard to manage students and book content. Admins can log in to add, edit, or delete students and books, making it easy to maintain an up-to-date digital catalog. The backend is powered by Node.js and Express, handling authentication, data management, and API routes, and is deployed on Render. The frontend is version-controlled using GitHub and deployed on Vercel, ensuring a fast, responsive, and reliable user experience. This project demonstrates a complete full-stack workflow with role-based features and real-time content updates for students and users.

#React.js #TailwindCSS #Node.js/Express #MongoDB #Email.js #Vercel #Render #GitHub
School Fee System

UNSHS PTA Web App (React, Typescript, Tailwind CSS, Node.js/Express, MongoDB, Stripe Integration, Vercel, Render)

UNSHS PTA Web App is a smart, all-in-one platform designed to make school fee management seamless for admins, teachers, and students. Admins can easily add advisers, update student fees, and approve payments with just a few clicks. Teachers can register students, and the system automatically generates and syncs their fees to the admin dashboard. Students enjoy a clear, user-friendly view of their fees along with a secure Stripe checkout for quick and hassle-free payments. Simple, safe, and built for the UNSHS community, it keeps everyone connected and organized.

#React.js #Typescript #TailwindCSS #Node.js/Express #MongoDB #Vercel #Render #GitHub #Stripe
School Fee System

VocabCoach: Your Offline Dictionary and Writing Companion (React, Typescript, Tailwind CSS, API Integration, Lovable.ai, Vercel, Render)

VocabCoach is an offline, browser-based tool that combines an advanced dictionary, writing coach, and study companion. It gives complete word details like definitions, IPA, CEFR level, synonyms, antonyms, examples, collocations, teacher’s notes, and even text-to-speech for proper pronunciation. You can also paste sentences into the Writing Coach for instant feedback and clearer rewrites, then review and practice vocabulary through Study Tools that let you save words, manage lists, and take quick quizzes. Simple, safe, and customizable, VocabCoach is perfect for students, teachers, and professionals in any field—even specialized areas like marine engineering.

#React.js #TailwindCSS #Node.js/Express Lovable.ai #Vercel #GitHub

Get In Touch

Have a project in mind or just want to say hello? Drop me a message

Contact info

WhatsApp Number

+63 9507898930

Send Message

Message sent successfully! I'll get back to you soon.