Demonstrating Websites & Internal Data Handling: ACM x Virlanie Foundation

ACM x Virlanie

Starting the year strong, the FEU Tech ACM Student Chapter organized a special outreach program for the delegates at the Virlanie Foundation on January 7, 2025. The program was a whole day, from 9 AM - 5 PM, and covered 3 talks, a workshop, and spiels and meals by our wonderful hosts.

Virlanie Foundation is a private, non-profit, and non-sectarian organization dedicated to empowering disadvantaged children and their families in the Philippines.

The first talk was titled Introduction to Systems by the ACM Adviser, Sir Jeneffer Sabonsolin, second was mine, "Demonstrating Websites and Internal Data Handling", and the last was "Introduction to UI/UX" by Xynil Jhed Lacap.

Experience as a Speaker

It's my third time giving a talk for ACM. The previous one was last year at FEU Tech Innovation Center and the other was another outreach at Valenzuela National High School. I was the Webmaster and Director for Academics of the organization and have numerous awards and certifications from top tech companies and organizations.

I'm a deeply technical person who loves to spend days tinkering with AI models and web frameworks. That said, I'm not the one to shy away from the spotlight or be afraid to take a stand. Let's Talk!

Talk the Talk

Before I begin, here are my slides.

Starting with my assessment of Virlanie, I was amazed. During my research, I realized that they already have a solid foundation and expansive content. LinkedIn, Facebook, Websites, Stickers, Youtube, Blogs, International reach, they have it all! Acknowledging this, I applauded them and assured them they'd learn something worth learning as they are.

The Basics

We began with introducing the basic parts of a website, the header, footer, hero, and main content. Not all websites are created equally, some follow a standard, and some do not. These are the most common elements.

The general composition of a website is formed with multiple pages and components. A home page typically has some of everything - a hero section, a few about, some testimonials, etc. You include your contacts on the contact page and optionally a form and maps of your office.

Internal Data Handling

In my experience, this is the internal data handling life cycle or partly of it. In the slides, we show the usual workflow of a contact feature.

1. Contact Form: an interface to collect inquiries about Virlanie. From donations, volunteering, partnerships, and such.
2. Database Representation: data from the form is sent to the server and stored in a database.
3. Spreadsheet: if you're an admin for the website, you are usually presented with an Excel or table-like view of the data.
4. Aggregate: Typically composed of headers with percentages. Can be used for presentation as is but can be further visualized.
5. Graphs: You take the percentages and present them in nice and understandable graphs that you can use to present your managers.

Web Development

Traditional web development is done by manual coding of websites or web apps through languages like HTML, CSS, and JavaScript. You can use any web framework but it all compiles down to these 3 fundamental technologies. If you're going to code your website, you have to start with these three.

however, Setting the web frameworks aside, you will need more if you're going to deploy and maintain your website in the long run. These include code hosting, a domain name, a hosting provider, and optional database and blob storage.

Traditional Website Builders

Before AI which we'll talk about later, website builders like Google Sites, Squarespace, WordPress, and Wix, were the easiest way to deploy your personalized website. I, myself, have only used Google Sites when I was in High School but to this date, they remain a very useful tool to get a site as quickly as possible.

Modern Web Development with AI

Without a doubt, AI tools like V0 and Cursor changed the game. I admit I was not good in UI but have become a rockstar with just a few custom prompts. In the slides, there are many AI tools per row, each corresponding to a category.

1. Prompt and Deploy: This level of AI is where you don't even need to have coding experience at all. You just have to define what you need and what needs changing. It can maybe even be in your native language! We'll show you a great sample prompt later. Examples are V0 and Bolt.
2. AI Editor: This level of for AI-First editors. A programmer uses a text editor to code their website, apps, and systems. AI editors, however, showcase their built-in highly integrated AI to help developers build systems quickly, improving their productivity. Compared to the first level, manual coding and modification are involved. Examples are Cursor and Windsurf.
3. AI Extensions: This level is the first special-purpose AI integration for coding. You can install these in your favorite IDE or text editor of your choice. Examples are GitHub Copilot and AWS CodeWhisperer.
4. General Use AI: This level of AI is what most people know and can do a bit of everything aside from coding. Writing emails, summarizing text, generating images, etc. You can use them to develop a website (especially Claude!) but accuracy is less compared to higher levels since those are specialized for the use case. Examples are ChatGPT and Gemini.

Note! Using one level of these tools may not be enough depending on your use case. I personally use all of them. V0 to develop just the UI, paste the code in my text editor with GitHub Copilot. If I'm in a one-two day hackathon, I prefer using Cursor. And of course, I use general use AI for everyday use should I need them.

Websites you can Build with AI!

I showcased our award-winning hackathon projects on the web using AI. Without order, they are:

• Para Po: Philippines Data Science Challenge Finalist & Winner of the Global Co Special Awards
• Kape ni Rab: FEU Tech AITS Codetober Web Development Winnder
• Project Nature: NASA Hackathon 2024 Galactic Problem Solver
• Undertaking Generator: One of FEU Tech ACM's most useful automation tool

These are all some of our hackathon projects. At least, the UI of all of these projects involved AI. We saved a tremendous amount of time using a combination of all the AI tools above in developing these and we want to share them with Virlanie to up their game in development. Because truth be told, the Philippines is behind not just in AI but in technology in general.

Our Prompt

Create a responsive, beautiful, modern, and special website for the Virlanie Foundation Philippines, an organization dedicated to empowering disadvantaged children and their families in the Philippines. It must have a navbar, hero section, about, contact, footer, testimonials, and many other relevant sections and functionality. Details and descriptions must be clear, effective, and comprehensive in disseminating information to encourage prospects to volunteer, donate, and change lives. The UI must be eye-catching, inspiring, detailed, impactful, and have consistent colors. Go All Out and Don’t Hold Back!

What we Accomplished

• Learned about the structure of a website
• Learn about internal data handling
• Learn how sites are hosted (own server vs cloud)
• Explored Google Sites to build websites
• Built & deployed our Vercel project with V0
• Learned it’s easy to build our own website nowadays

Hackathon!

After all the talks from the speakers, delegates from Virlanie had an hour-long friendly hackathon, competing with each other in teams of 2. Having learned about the concepts, they showcased their proficiencies in building websites. The rough theme was "Virlanie website by your eyes". Although I talked about AI, the delegates have non-technical backgrounds so Google Sites were used instead.

Unfortunately, one of the speakers, sir Sabonsolin has already left but, Xynil, one of the esteemed professors, Sir Justine Jude Pura, and I were to be the judges.

After one hour, they all presented their wonderful deployed websites. Unique to their own experience, they made websites for their choir, shops, initiatives, programs, and more that they do in Virlanie to accomplish their mission.

We three judged carefully given the metrics and the winner was crowned and won prizes.

Overall?

Being contacted less than a week prior, I can confidently say my talk was highly successful in delivering engaging and relevant insights as much as I could. My talk lasted an hour and there were times when the delegates visibly gasped during my demos, particularly in showcasing V0 and Cursor.

Overall, all I can say is Thank you so much Virlanie for your service to the Filipino Youth, and see you in the next one. Alpha, out.