### **Haribon E- Wall: Pamantasan ng Lungsod ng Maynila Grievance Forum**

**Overview**

> Developed a web-based grievance forum for Pamantasan ng Lungsod ng Maynila to streamline the students' grievances and admins' responses. The system aimed to help admins to moderate and monitor the discussion and to immediately solve the concerns of the grievant. The project involved designing and implementing a user-friendly interface, student to admin communication, and clean threads or topics in the forum.
>
> The project employed a modern web technologies, including React JS, Node JS, Express JS, along with Firebase for the database. Agile methodology were adopted to ensure iterative development, regular feedback cycles, and timely delivery of project milestones. Collaboration tools such as Git (GitHub) were utilized for version control system. While Figma Jam and Notion for project management.
>
> As the lead programmer & UI/UX Lead, this project exemplifies my ability to analyze complex systems, translate them into technical solutions, and effectively collaborate with stakeholders to deliver impactful software solutions. It also showcases my proficiency in web development, database design, project management, and problem-solving skills in a real-world context

**Project Scope**

> The scope of the project encompasses the development of a responsive and user-friendly grievance forum for Pamantasan ng Lungsod ng Maynila. The web app will serve as an online platform for students and admins to share and answer concerns. Key features and functionalities of the website include:
>
> 1. Microsoft Login Authentication
>
>    `Authenticates only legitimate PLM Microsoft Outlook users`
>
> 2. ( Post - Read - Comment - Vote ) on Posts
>
>    `Ability to CRUD Functionalities`
>
> 3. Profanity Blocker & Abusive Content Detector
>
>    `Blocks profane word and detects if the user's post contains abusive content.`
>
> 4. Anonymity Feature
>
>    `Hides identity of the user when posting`
>
> 5. Email Notification
>
>    `Sends alert to users' email when someone mentioned, or commented on a post`
>
> 6. Rich Text Editor
>
>    `Ability to customize the posts including the font size, font style, alignment, and insertion of images and hyperlinks`
>
> 7. Filtered Posts
>
>    `Ability to filter posts based on the needs of the user`
>
> 8. Admin and User Separated Controls
>
>    `Admin controls includes the addition of profanity words, generation of [daily, weekly, monthly, yearly] reports, deleting posts, archiving posts, etc.`

**Technologies**

> The Tech Stack used in the development of the system is **Firebase - Express JS - React JS - Node JS** (**FERN) Stack**

UI/UX

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FfQ9pBVJcC4WMVP91lVc4Eqcaqhd2%2F4GIzKau0H2FNbZYn8AZz%2Ffb47cd60-6b69-41ce-9cf2-db0ebf2266a2.png?alt=media&token=b7d44926-0cfd-4b4d-8c33-cf62d3e74627","id":"fb47cd60-6b69-41ce-9cf2-db0ebf2266a2","width":1857,"height":953,"filename":"image.png","type":"image/png","caption":"Login Page","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FfQ9pBVJcC4WMVP91lVc4Eqcaqhd2%2F4GIzKau0H2FNbZYn8AZz%2Fa22a6242-4c4b-4bd5-abcf-807cbbbf603d.png?alt=media&token=8721489d-cf12-4f6b-a5bb-361399902916","id":"a22a6242-4c4b-4bd5-abcf-807cbbbf603d","width":1852,"height":964,"filename":"image.png","type":"image/png","caption":"Home Page","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FfQ9pBVJcC4WMVP91lVc4Eqcaqhd2%2F4GIzKau0H2FNbZYn8AZz%2F787202db-6ab2-446d-86a8-d5966e69f226.png?alt=media&token=04a03eea-c3c0-405f-ad74-f724f1fc51b2","id":"787202db-6ab2-446d-86a8-d5966e69f226","width":1873,"height":968,"filename":"image.png","type":"image/png","caption":"Post Page","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FfQ9pBVJcC4WMVP91lVc4Eqcaqhd2%2F4GIzKau0H2FNbZYn8AZz%2Ff2916321-5ca4-4166-a10b-e27c92e1435a.png?alt=media&token=06393132-0db7-486b-873d-def1284d8afd","id":"f2916321-5ca4-4166-a10b-e27c92e1435a","width":1873,"height":967,"filename":"image.png","type":"image/png","caption":"Profanity Page","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FfQ9pBVJcC4WMVP91lVc4Eqcaqhd2%2F4GIzKau0H2FNbZYn8AZz%2Fec3cdc5f-263d-42a2-b864-85b58af87e63.png?alt=media&token=8f2938a6-73a9-414e-a505-19f233e2d724","id":"ec3cdc5f-263d-42a2-b864-85b58af87e63","width":1875,"height":969,"filename":"image.png","type":"image/png","caption":"Post Preview - No Abusive Context","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FfQ9pBVJcC4WMVP91lVc4Eqcaqhd2%2F4GIzKau0H2FNbZYn8AZz%2F45f50836-229b-48e4-83fb-28694458c4da.png?alt=media&token=dc40d2c9-fa67-4064-a880-b3963cbd4fbb","id":"45f50836-229b-48e4-83fb-28694458c4da","width":1876,"height":962,"filename":"image.png","type":"image/png","caption":"Post Preview - With Abusive Context","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FfQ9pBVJcC4WMVP91lVc4Eqcaqhd2%2F4GIzKau0H2FNbZYn8AZz%2F53284ded-452c-4f37-9f4e-b2df09579db9.png?alt=media&token=3b764851-65c7-40c8-9e2b-bf1bc6a0e4c6","id":"53284ded-452c-4f37-9f4e-b2df09579db9","width":1859,"height":969,"filename":"image.png","type":"image/png","caption":"Pending Post Page","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FfQ9pBVJcC4WMVP91lVc4Eqcaqhd2%2F4GIzKau0H2FNbZYn8AZz%2F50354547-4895-419c-8b9c-7865474ea696.png?alt=media&token=3e6c6aa4-aaa8-44c3-abae-1698e9fc0d2d","id":"50354547-4895-419c-8b9c-7865474ea696","width":1875,"height":967,"filename":"image.png","type":"image/png","caption":"Pending Post - Accept State","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FfQ9pBVJcC4WMVP91lVc4Eqcaqhd2%2F4GIzKau0H2FNbZYn8AZz%2Ff4717b7b-d5e6-4e9f-9a97-27ba85a2756b.png?alt=media&token=fc6bce80-0ed8-49b2-946a-0ae3e2e58c1f","id":"f4717b7b-d5e6-4e9f-9a97-27ba85a2756b","width":1874,"height":967,"filename":"image.png","type":"image/png","caption":"Pending Post - Decline State","border":true},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FfQ9pBVJcC4WMVP91lVc4Eqcaqhd2%2F4GIzKau0H2FNbZYn8AZz%2F16882f44-7ece-40eb-9cd0-f4b2ddfbcdc7.png?alt=media&token=2eebbfad-f95f-4961-b1ad-764f44229ec2","id":"16882f44-7ece-40eb-9cd0-f4b2ddfbcdc7","width":1857,"height":971,"filename":"image.png","type":"image/png","caption":"Reviews/Reports Page","border":true}]}
```

Project Specifications - Haribon E - Wall

### **PLM Computerized Registration System (CRS)**

**Overview**

> The Computerized Registration System (CRS) is a project within the Computer Science Electives at Pamantasan ng Lungsod ng Maynila (PLM). The primary objective is to streamline and modernize the operational processes of PLM. The project is executed by a diverse team, bringing together individuals with varied skills and expertise.

**Technologies**

> The project will utilize a combination of industry-standard technologies and frameworks including:
>
> * Next JS
>
> * React JS
>
> * Mantine UI
>
> * Tailwind CSS
>
> * Laravel (API)
>
> * Maria DB

**Coding Environment**

> Our development process is enhanced through GitHub's collaborative environment, fostering seamless teamwork and code management. We actively utilize features such as pull requests, code reviews, and issue tracking to ensure a robust and transparent development lifecycle. This collaborative approach enhances the quality and reliability of our Computerized Registration System.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FfQ9pBVJcC4WMVP91lVc4Eqcaqhd2%2Fplm-crs%2F35d1c345-e96c-4325-9908-4764de3c51c6.png?alt=media&token=32876034-e67f-4c2c-bfd4-a79402e13362","id":"35d1c345-e96c-4325-9908-4764de3c51c6","width":1920,"height":949,"filename":"4.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FfQ9pBVJcC4WMVP91lVc4Eqcaqhd2%2Fplm-crs%2Fee867454-458c-4e92-85b4-16de3e0e5e58.png?alt=media&token=b033a96a-8df2-4e54-9bce-4b1b2dab2827","id":"ee867454-458c-4e92-85b4-16de3e0e5e58","width":1904,"height":950,"filename":"5.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FfQ9pBVJcC4WMVP91lVc4Eqcaqhd2%2Fplm-crs%2F9ed39f1d-237c-42eb-9fab-aa92121eec48.png?alt=media&token=6fad2831-4458-459e-b2c9-9e7f918c9cc2","id":"9ed39f1d-237c-42eb-9fab-aa92121eec48","width":1920,"height":948,"filename":"6.png","type":"image/png","caption":"","border":false}]}
```

Project Specifications - PLM Computerized Registration System (CRS)

### **One Man Merchandising System (OMMS)**

**Overview**

> **OMMS-Next** is a specialized accounting system tailored for One Man Merchandising. It's crafted to tackle performance challenges encountered in the previous system while prioritizing efficiency through the removal of redundant procedures. By optimizing workflows, OMMS-Next empowers users to manage their merchandising operations seamlessly.

**Technologies**

> The project utilizes a combination of industry-standard technologies and frameworks including:
>
> * Next JS
>
> * React JS
>
> * Mantine UI
>
> * Zustand
>
> * Tailwind CSS
>
> * Prisma ORM
>
> * Auth JS
>
> * MySQL

Project Specifications - One Man Merchandising System

Full-stack Web Developer

Best in Application Development 2

Best in Application Development 1

1st Place: OOTB's Spoof Ads Competition

4th Place: Technolympic's Web Design Contest

API Designer

JavaScript Essentials 1

API Security Architect

Computer Hardware Basics

Javascript Essentials 2

Introduction to SQL

Introduction to Packet Tracer

Network Technician Career Path

Postman API Fundamentals Student Expert

Docker Essentials: A Developer Introduction

My interest in programming started in grade 8

HTML | CSS | JavaScript

Started speed solving a Rubik's Cube

7th Honorable Mention

Haribon E-Wall

 (Lead Programmer)

A Web-Based OJT-Monitoring System for GSSLI

React | Vite | Node | Express | MySQL

InternConnect: ORASAN

HealthVault

PLM Computerized Registration System (CRS)

(Tech Lead | Full-Stack Developer)

A Web-Based application for the Department of Social Welfare and Development-NCR (DSWD-NCR) designed to streamline disaster response processes, augmentation reports, and DROMIC reports. The application serves a variety of users, including the public, Quick Response Teams (QRTs), Emergency Operations Centers (EOCs), Local Government Units (LGUs), Local Chief Executives (LCEs), and the DSWD Secretary.

Project Resolve!

(Lead Programmer)

A Web-Based Map and Proximity System for GSSLI 

React | Vite | Leaflet API | Mantine

MAPS

One Man Merchandising System

(Tech Lead | Full-Stack Developer)

A Web-based application for Pasig City Hall to streamline queueing and feedback management through web, mobile, and kiosk

Online Integrated Queueing & Feedback Management System

Currently exploring machine learning to further enhance and convert static results into dynamic results on my previous project on senior high school

TensorFlow | APIs

cLaennec

Edited and produced captivating promotional videos and multimedia content for school initiatives, showcasing the institution's unique features.\
\
Served as one of the Organization's representatives and achieved 1st Place in the "Out of The Box Spoof ADS competition"

Creative Video Editor

Member

An 80-hour work immersion in Department of Trade and Industries - CITEM Philippines

Assisted and Provided solutions to multiple technology-related issues in a timely and effective manner, and worked to minimize downtime and disruptions for end-users

IT Support Intern

Managed complex software projects from conception to deployment, showcasing extensive experience in project engineering.\
\
Developed responsive and user-friendly front-end interfaces using modern frameworks and technologies, enhancing user experience.\
\
Built robust and scalable back-end applications, providing dynamic web experiences and supporting server-side functionality for client projects.\
\
Demonstrated strong problem-solving abilities, quickly identifying and resolving technical issues to maintain smooth project progression.\
\
Utilized advanced web scraping techniques to extract valuable data from diverse online sources, supporting business intelligence and analytics for clients.

Freelance Full-Stack Web Developer

Edited high-quality videos for multiple YouTubers, enhancing visual appeal and audience engagement using Adobe Premiere.\
\
Created professional publication materials and graphics for various clients, effectively communicating messages and branding through visually appealing designs.\
\
Designed intuitive and user-friendly UI/UX layouts for web and mobile applications using Figma, improving overall user experience.

Freelance Multimedia Designer

Led projects with a focus on frontend development, ensuring high-quality and responsive user interfaces.

Collaborated closely with UI/UX designers to create intuitive and visually appealing designs that enhance user experience.

Worked with backend engineering teams to develop and implement algorithms that optimize system process flow, improving overall efficiency.

Performed extensive optimization on the frontend, enhancing performance and user satisfaction.

Managed Pull Requests and the staging branch for client view purposes, ensuring smooth and efficient project workflow.

API development using NestJS and Laravel, delivering robust and scalable solutions.\
\
Developed real-time applications with WebSockets and Socket.IO, enhancing user interaction.\
\
Configured and debugged Nginx servers for production and staging, ensuring seamless deployment and optimal performance.

Trained and mentored trainee developers and interns, guiding and helping them integrate into the company effectively

Software Engineer

A 240-hour practicum in Gothong Southern Shipping Lines Inc. - Manila, Philippines

Developed and Deployed three functional systems, each contributing to enhanced operational efficiency and streamlined processes. 

Collaborated with cross-functional teams to ensure seamless integration and user-friendly interfaces. 

Utilized advanced technologies and best practices to create innovative solutions that addressed specific needs.

Kurt Jacob Urquico

2024

2023