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 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 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(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 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
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 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
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 – 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
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