Jomar Granada

Full-Stack Software Engineer

  • Javascript
  • React.js
  • PHP
  • Python

About Me

I am a certified Full-Stack Web Developer with three years of experience. Dedicated on crafting innovative and user-friendly web solutions. Welcome to my portfolio where you'll find my projects, tools, and expertise as I continue my programming journey.

Work Projects

Note: I worked on these projects as a member of the product teams (employee / contractor). I am not the project owner and do not claim ownership of product IP or customer data. The screenshots/links shown are public-facing assets only. These examples are included to demonstrate my ability to adapt to real product environments, collaborate with cross-functional teams, and deliver measurable results.

AI-PRO preview

AI-PRO

React · TypeScript · Node.js · PHP (CodeIgniter) · Redis

Role: Employee — Full-Stack Engineer

Media Meter API preview

Media Meter API

Python · PHP · MongoDB · ElasticSearch

Role: Employee — Backend Engineer

Tern preview

Tern

TypeScript · Node.js

Role: Contractor — Full-Stack Engineer

Realboss preview

Realboss

TypeScript · Material UI · Node.js · AWS S3/CloudFront

Role: Contractor — Full-Stack Engineer

Personal Projects

Minimalistic Calculator preview

Minimalistic Calculator

Sveltekit Typescript

Minimalistic Shop preview

Minimalistic Shop

React MERN

Minimalistic Shop API preview

Minimalistic Shop API

MongoDB Postman ExpressJS Nodejs

Portfolio preview

Portfolio

HTML CSS Javascript

Skills

  • Javascript
  • React.js
  • PHP
  • Python
  • Node.js
  • MongoDB
  • Fastapi
  • Codeigniter
  • PostgreSQL
  • MySQL
  • Typescript
  • Redis
  • Tailwind CSS
  • Git
  • Restful APIs
  • Postman
  • Material UI
  • Redux
  • Bootstrap
  • Responsive Design

Web Developer Portfolio crafted by Jomar Granada © 2023 - 2026. All rights reserved.

Back to Top

Realboss

TypeScript Material UI NodeJS S3 Cloudfront

Realboss screenshot
Link to Project

Worked as a Full Stack Software Engineer developing new features and maintaining the Realboss console application. This application offers multiple features mainly targeted for business management, including an authentication system, content management system, invoicing and booking system, user management system, and static website creation. I was involved in creating our in house website builder automating static website creation and deployment to AWS S3 and CloudFront.

Tern

Typescript NodeJS

Tern screenshot
Link to Project

Worked as a Full Stack Software Engineer in collaboration with backend and frontend developers, scrum master, and CEO. Main tasks included improving the Tern.ac UI, specifically pages and modals integrating features for both client and server-side applications, and translating Figma specifications into functional web pages and components. Features include payment systems and user and profile management systems.

Media Meter API

Python PHP MongoDB ElasticSearch

Media Meter API screenshot
Link to Project

Worked with a team of backend, data, and frontend developers to spearhead the migration of the current Media Meter API from PHP to Python. This API mainly caters to admin dashboards, providing visibility for data visualizations retrieved from in-house scrapers and LLM insights. Technologies used include Python FastAPI, PHP Lumen, MongoDB, and ElasticSearch.

Shown below are services served by the Media Meter API:

  • MediaWatch: A service used for compiling media data from various sources like print, radio, and news, providing insights and analytics for content creators and marketers.
  • SharedView: A service used for compiling media data specifically from social media platforms, offering insights and analytics.

These data-intensive services require robust backend support and efficient data processing capabilities, requiring a well-structured API and optimized database operations for queries and data syncing. They also require intensive collaboration with data teams to ensure strict and proper data structures and properties.

AI-PRO

React PHP Codeigniter NodeJS Redis

AI-PRO screenshot
Link to Project

Worked with a team of developers for AI-PRO, a project that includes multiple interconnected domains, applications, and interfaces providing a seamless user experience from user authentication to AI chat functionality, offering multiple features and AI models. Mainly utilizing React TypeScript for the frontend and NodeJS and PHP CodeIgniter for the backend, I primarily worked on integrating AI models for chatbot-pro and implementing updates to the user interfaces for start.ai-pro.org, token counts for manage.ai-pro.org and start.ai-pro.org, and user management across different plans.

AI-PRO is divided into the following domains:

  • Chatbot-pro.ai-pro.org: This full-stack sub-application provides an AI-powered chatbot that can assist users with various tasks and inquiries, including different models from major providers such as OpenAI GPT, Anthropic Claude, and Google Gemini.
  • Start.ai-pro.org: This application provides a user management system for managing a customer's account, including profile information, token counts, subscription plans, and billing information.
  • Manage.ai-pro.org: This sub-application is responsible for managing user accounts of all subscribed customers, including their subscription plans, billing information, active accounts, and token counts.

Working in a team environment, I collaborated with multiple teams and people such as project managers, QA, and frontend and backend developers to design and implement new features, troubleshoot issues, and ensure the overall quality of the application.

Portfolio

HTML CSS Javascript

Link to Repository

My first project is a dynamic and responsive webpage that showcases my proficiency in web development skills. I used Bootstrap to layout the web pages, HTML to create web elements, CSS to implement color schemes and different design styles, and JavaScript to create smooth animations, transitions, and effects. All of the styling and animations in my portfolio are proudly done using pure CSS and JavaScript, without relying on any existing frameworks or libraries. This project demonstrates my extensive knowledge on the fundamentals of both CSS and JavaScript, and my ability to extend their possibilities.

The portfolio is divided into five sections:

  • Landing: This section presents a subtle and pleasing animation of my name, title, and main skills as a web developer.
  • About Me: This section provides a short description of my personality as a professional, my picture, and my contact information.
  • Projects: This section proudly showcases all my finished projects, including my web developer portfolio.
  • Tools: This section features all the tools that I can use proficiently, along with all the skills that come with utilizing those tools.
  • Contact: This section provides a contact form and a showcase of all my achievements, certifications, and awards.

I am proud of this project and I believe it is a strong representation of my skills and abilities as a web developer.

Minimalistic Shop API

MongoDB Postman ExpressJS NodeJS

Deployed API LinkLink to Repository

In building this API, I explored the power of databases with the use of MongoDB and Postman. This API will enable users to shop, order, and add to cart. It also lets sellers/admins to monitor and control the stocks and sales of their products; it also prioritizes the security and privacy of all its users. I have tested all these routes through Postman, and have stored the gathered data in a MongoDB database, creating a seamlessly working and efficient backend server application.

This e-commerce API is mainly composed of three elements:

  • Schemas: In this API, I have created five schemas: cart, checkout, order, product, and user. These schemas act as the blueprint for saving data in the database and enable the different features and functionalities that will be applied in the frontend application.
  • Controllers: The controllers contain the necessary logic required to execute the different features and functionalities for both the backend and frontend server applications.
  • Routes: The routes are where the controllers receive their commands/requests from. This is where the create, read, update, and delete operations are initialized and then passed to the defined controller to execute the exact logic required for the specific operation.

This API showcases my proficiency in working with databases and my ability to use MongoDB as a database management system, Postman as a testing and debugging tool, and Node.js with Express.js as frameworks for creating a fully functional e-commerce API.

Minimalistic Shop

React MERN

Link to ProjectLink to Repository

I built a dynamic web application using React.js and the MERN stack, hosted/deployed in Vercel. It's a fully functional e-commerce shop where shoppers can browse and add products to their cart, while sellers and admins can showcase their products with images and descriptions. The application boasts a user-friendly and attractive interface, making the shopping experience smooth and enjoyable.

Here are some of the features and functionalities of the application:

  • User Sign up and Log in: This feature executes user creation and authentication using props, event listeners, and local storage. The frontend seamlessly communicates with the backend by tracing the correct controller and logic from fetching the correct routes. After a user has been created, their credentials are saved in the database, and a new token is generated for authentication every time they log in.
  • Add to cart: The add to cart feature utilizes the cart schema from the backend. It detects the product that the user wants to add to their cart and creates a new instance of the cart schema. This is then recorded in the database as a new cart and is also presented to the user on the frontend via retrieving the cart details.
  • Admin Dashboard: The admin dashboard is where admins can monitor, edit, delete, and update all the products in the e-commerce application. Specifically, they can edit the name, description, price, and image of products, and they can also archive and activate all products.
  • Add Products: This feature lets admins add products with their own unique name, description, price, and image. For their convenience, I have also placed beside it an overview of all products where they can see the name, description, price, and image of all products that have already been added.
  • Browse all products: This feature/page allows the admin to beautifully showcase all of their products. It also allows users to efficiently browse and select potential products/items that they will add to their cart and eventually checkout.
  • See product details: The see product details feature is added to help users decide if they really want to add the product to their cart. Users will be able to see the name, description, price, image of the product, and other additional information in a bigger format. This helps users know more about the product and also helps admins present all the information and go all out in enticing users/shoppers to buy their products.

This full-stack React application showcases my knowledge and proficiency in creating a user-friendly and dynamic web application that efficiently utilizes and integrates the backend and frontend applications.

Minimalistic Calculator

Sveltekit Typescript

Link to ProjectLink to Repository

In this project, I showcased my unending passion for knowledge and learning new things. Using a newer tool in SvelteKit and TypeScript, I created a fully functional and precise calculator that maximizes the server-side rendering enabled by SvelteKit.

This online calculator is mainly composed of three objectives:

  • Main Objective: Create a calculator app which accepts and computes equations with multiple operators and numbers, without using eval(), Function(), mathjs, or any computation library.
  • Frontend Code Objectives: Provide buttons for entering operators and numbers. Send a POST request to the backend server containing the created equation. Present the received answer from the backend API.
  • Backend Code Objective: Calculate the received equation from the frontend and send it back as a response.

With these objectives, I have created a calculator app that fully utilizes the functions of the SvelteKit framework and TypeScript, particularly its server-side rendering feature used in calculating the equation provided by the user from the frontend.

Thank you for contacting me!

Message Successfully Sent