My First Vibe Coding Hackathon

This past weekend my company did their first vibe coding hackathon. If you're not familiar with vibe coding, it's a new craze where you let AI Agents code your entire application and you just prompt the AI with "vibes." Pure vibe coding requires having zero coding knowledge, but developers have started finding ways to have the AI do most of the code writing while they review and analyze the output and make tweaks when needed.

Over the weekend, we were asked to use Replit and their AI Agent to create a working prototype of a useful application. The top 3 applications would be given money to the company store (which I personally enjoy since there are some quality items there) and we could present our applications to the company leadership. I threw my hat into the ring because why not! I hadn't vibe coded yet, but it would be good to know what's out there and the current state of AI.

This post won't go into the nuts and bolts of the app, but in about 7-8 hours I was able to build a working application that was 90% functional. It was a feature request tool that allowed your customers to request features they'd want to see in internal applications developed at their company. I took this idea actually from Compass Real Estate, where I used to work. They allowed their real estate agents to submit feature request for the Compass software tools. Much like Compass' tool, users of my application could:

• Submit feature requests
• Upvote other people's requests if they liked them (Reddit style)
• Comment on feature requests
• See new requests submitted in the past 48 hours
• Review previous completed requests

Administrators had a special Admin Center page where they could:

• Perform all the tasks in the above list
• Consolidate duplicate feature requests
• Add special "Admin comments"
• Delete feature requests
• Update the development status of feature requests

A screenshot of the main application page is below:

A screenshot of the admin center is below:

What I learned about Vibe Coding

AI Agents are not bad. They are not experts yet, but they do a pretty good job getting a basic application spun up really quick. This whole application took me two days, but really I spent 7-8 hours total doing everything. 

A lot of that 7-8 hours though was time spent waiting on the AI to finish analyzing, coding, reviewing, and processing all the changes I would request. While the AI is pretty good, it still can take 5-10 minutes to make a change, especially as the code base increases. 

Another good chunk of the time was taken up fixing bugs introduced by the AI when working on something completely unrelated. Several times the AI would mess something up in the application that was completely removed from what it was supposed to be working on. For example, when I had it work on the left-side navigation bar of the Admin Center, it also put the Update Status, Consolidate, and Delete button in one inline row and changed the button label for Update Status. Why??? I spent about 20 minutes getting the AI to fix the buttons without hurting anything else.

The AI Agents was not able to get the Search functionality working perfectly. I ended up flipping back and forth between two bugs in the search tool. When I fixed one issue, a second bug would appear. When I fixed that second bug, the first one came back. After a few rounds of that, I got the search working as best I could and left it at that. At the time of this writing, that is an active bug.

Another thing I learned was the AI is very verbose with writing code. This application has to be several thousand lines long. I feel like a human software engineer could write this in half the lines. But one nice thing about Replit's AI Agent at least is that it would give you an outline of what it was doing and give you a hyperlink to go in and check the specific file it is working on. I feel like if I was not rushing and trying to create as much as I can in one weekend, that is a very useful feature in the AI logic.

Overall Thoughts

Overall I felt more like a Product Owner this weekend and not a developer. I certainly didn't personally build this application, but I provided the ideas, creativity, prompts, and analysis that gave the application the look and feel. I wonder if that's what the developer profession will be one day - a world where we will all be product owners of some sort just requesting changes and troubleshooting manually when needed. Or maybe humanity will think "nah, this sucks. We want humans!" I hope it's the second option. 

Right now, the Agentic AI could get me nearly there. But it can't get this application to 100%. Advances are being made, and I'm sure in the future AI will be better and quicker. However for now, you still need some humans around. And I hope coding doesn't lose it's humanity any time soon.

Creating an application using Vite

Up until recently, you could create a React application using Create-React-App. It was a lightweight way to create React applications quickly and was supported by the React documentation. Create-React-App has been discontinued - it will still work I suppose, but it is no longer the recommended way to create React applications.

I first came across Vite while going through freeCodeCamp's new curriculum. About a week later, while furthering my React studies on Scrimba, they also suggested using Vite as a worthwhile replacement. After building a few projects, I definitely agree.

Vite is a build tool for creating React applications. Of course, I could try to create my own React applications using no build tool, but that can take a long time and there are many files to configure. If someone else has done this work already, I'm going to take advantage of that! 

In order to use Vite, you need to install Node.js if you haven't already, and it needs to be a version higher than 18.0.0. Originally I had a higher version of Node installed (I think it was 22.0.0. or 23.0.0, I can't remember), and that caused some trouble with using Vite. Currently at the time I'm writing this, I'm using Node version 20.0.0 with zero issues.

Once Node is installed, do the following steps:

1. Navigate in your terminal to the folder you want your project to be stored in. For me, I usually change my directory to Desktop and store my project there.
2. Run npm create vite@latest 
3. This will start the tool's prompts. It will ask you just a few questions:
1. What is the project's name? 
2. What library/framework are we using? 
3. What language do you want to focus on? (For example, when I choose React for question #2, it will then ask if I want to focus on JavaScript, Typescript, or a few other options).
4. Once these questions have been answered, Vite will build out the project. At the end, it will give you three commands to run in a row:
1. cd <project-name>
2. npm install
3. npm run dev
5. That last command will be one you probably use a lot, as it is the command that starts up the live server so you can see your work rendered in the browser. I personally find myself starting and stopping the server as needed, usually when I need to use my terminal for something.

And that's it! In the folder you selected, your new Vite project will be created. At this point, you can go into the project itself and clear out all the default stuff (styles, text, images, favicons) and begin creating your JSX files, stylesheets, and link them together.

Documentation link: https://vite.dev/guide/

Making the most out of a meetup group in 2025

Yesterday I went to my first Programming meetup for 2025. A goal of mine has been to go to more of these this year. I went to one in 2024 and had a great time, then completely let it slide for the rest of the year. Not this year! There are a few meetup groups for software development who meet less than 30 minutes from my house, so I hope to visit both several times this year.

I saw a question on LinkedIn yesterday on a similar note which asks the question: "What are some actionable steps you can take to make the most out of attending a meetup?" That's a great question and one that I wanted to write a bit more in depth about. Going to a meetup group is essentially networking. It's very similar to conferences, but meetup groups are generally smaller. There may be conference-like presentations, or they may be more casual and people just show up, talk, and code, all while probably drinking some sort of coffee.

In my area, we have a Coffee and Code meetup which is perfect for me. It starts around 10am and goes until 1pm which is the perfect time for me and how I operate (I'm definitely more of a morning person). A little after 10am, we have a standup where we go around the circle and introduce ourselves, talk about any job openings we may know of, and what events are coming up that people can check out. Then we go back to our computers and either code, chat with others, or do little demos with folks on what we are working on and see what others are working on. I had a fantastic time meeting a gentleman who had built out a really neat event application for a non-profit's annual fundraiser. He showed me how he built the mobile app using XCode and Swift.

So what are actionable steps that I'd recommend to others when going to a coding meetup group? See below for a few pointers:

1. Go with a completely open mind. Who knows where your next connection will lead or who you will meet there. And this is also the first point I'm writing about, since I think all the other points below it can fit under this umbrella.
   
   
2. Don't think only about yourself. A mistake I made earlier in my career when "networking" was getting immediately benefits from networking and being in groups. For context, I was in sales and "social selling" had become all the rage. I'd show up to a group or connect with someone on LinkedIn and immediately try to get a sale without a relationship. Don't do this! People can sniff it out when you show up to a meetup only thinking about yourself and what you can "get." Instead, show up with an attitude of what you can GIVE to the group. Reaping rewards (new friends, a job opportunity, project collaborations) will happen with time.
   
   
3. Balance time working on coding projects and talking with people. I went to the meetup this past week for a little over 2 hours. I spent the first hour hacking away on my friend's website I'm building in React, and I spent the next hour or so talking to a few people seeing what they were doing.
   
   
4. Understand that you can contribute to the group no matter your coding experience. There were several people at our meeting this weekend who were JUST learning how to code. They knew some HTML, a little CSS, and were just getting their feet wet with JavaScript. But when they introduced themselves, they said they could help others with HTML and CSS. The point: even if you have just written your first line of HTML, you have something you can contribute or give to the group. Heck, just being there at the meetup and talking to others and listening to them explain their projects and passions is giving to the group. If you are new at coding, take some encouragement that you can contribute to a meetup group almost immediately.

I may revisit this post sometime in the future and add to it, but for now these are some basic points to remember with a meetup group. Don't be nervous or feel any pressure that you have to come away with something from the group. Just go and hang out with fellow programmers!

Making a reusable footer in React

freeCodeCamp's new front-end technologies content is still under construction, but they have released a few lessons for their React fundamentals. You can click here to find the referenced lab activity from this blog post.

React is a JavaScript library that focuses on the UI of a website. To put it another way, it is concerned with the "View" of a page. It is component-based, and the components can be written in two ways: (1) Class-based components, and (2) Functional components. The first way is an older style that apparently is no longer used as much. Functional components is the current "in" way to create components. Instead of using JavaScript classes, you instead use a JavaScript function.

I've created a few React applications in the past, but this was my first using the newer Functional components. freeCodeCamp provided the index.html file already, however the CSS and React code was all up to me. Here is the completed code in a Github Gist page.

I started with the React part and made sure to finish the bones of the page before writing up the CSS. You really do not get a lot of leeway on the "how" here, as freeCodeCamp's user stories specifically ask for a certain setup.

Index.jsx uses one functional component to return a <footer> element. JSX only lets you return one top-level element. While I used <footer> here, most of the time you can use <Fragment> or simply < >. Inside the <footer> is an unordered list. I added a quick <div> there so I could separate the list from the copywrite paragraph below. The entire component is exported with the keyword at the top of the component.

With that code in place, technically I would pass the challenge (it does not check for styles). But where is the fun in that! So I added some CSS code. In order of how the selectors are written:

• I gave the footer a calming light blue background
• I removed the bullet points and default padding for all list items in my list
• I gave each specific list item some extra padding to spread out the items
• I centered my copywrite and made sure there was some bottom padding between it and the footer border
• I turned the list container into a Flexbox and gave it space around each unordered list

After all that, it looked good! Below is a picture of the final product:

It's basic but functional. Below the copywrite, I can include social media links in the future as well as remove some of the default browser styling for links (the blue color and underlines). Overall though, I'm pretty happy with how it turned out! I did a project a few years ago which involved a footer and it was very cumbersome to put together. Having a reusable component with this CSS will make it easier to include the same footer on every page of a future site.

Setting 2025 developer goals

2024 is behind us and 2025 is here. New year. Clean slate. Last year was my first full year as a developer and it was full of learning, moments of extreme doubt in my abilities, and some fantastic moments as well. To recap, I attempted the Pega SSA exam three times and fell one question short twice. At some point I plan to study and take the exam again, but I'll be taking some time off from that.

My overall personal goal in 2025 is using a planner for the full year and being more organized through consistent planner use. That sets up the foundation for smaller goals that I hope to achieve this year for myself, which are listed below.

So without much else to add, below are the developer goals I hope to achieve in 2025. Unlike last year, I'll try to keep the blog updated with my progress.

1. Blog more. This is sort of a gimme. I blogged just a handful of times in 2024, mostly because I was busy studying or working. Taking a break from studying will hopefully allow for more casual learning and time to write. My goal is one post a week, and I'll review at the end of January to see how that goes. I may adjust it in February if needed.
   
   
2. Work through freeCodeCamp's new curriculum. freeCodeCamp just released new updated content and have started focusing on free developer certifications. The content includes video lectures, workshops, labs, quizzes, reviews, and one large final exam. I'm very excited for this, and will probably write more about it in the future, but I think this is the type of setup I've been waiting for. Currently I'm in the HTML section doing review before moving on to CSS, but once we get to more advanced topics, I think this will be a massive help for my learning. Most blogs will probably be geared around new things I've learned while going through the certification program. While I won't be spending a lot of time each day on it (due to life and such), I'm going to be extending this into 2026 and hope to earn the certification during that year.
   
   
3. Pass the Pega SSA exam. This will be in the later part of 2025, but I want to attempt the SSA exam again and hopefully pass. It's not required for my job, but everyone else on the team has it at this point and I want to be able to say the same. Related, I'll need to renew my Security+ this year as well, as that's an exam I never ever want to take again!
   
   
4. Read more. I'm aiming to complete six books this year - an average of one book every two months. That's a good goal for me, but it's also something I can also surpass pretty easily. I'll be writing on some books I read this year here on the blog, so be on the lookout for some of those. I've started 'Chip Wars' by Chris Miller, which my manager read and said it was very good. President Obama as well mentioned this book as one of his favorites in 2023. But I won't be reading just tech-focused books. I hope to read a fiction book or two, or maybe some random non-fiction historical books. I'm taking it one book at a time.

So there we have it - these are the developer goals I'm shooting for in 2025. These are not resolutions, and they may not all happen. But it's something to work towards and share with others. 

What goals do you have for 2025?

Adding a modal to my portfolio page

As a note, at the time of this blog post, my portfolio site is at this URL: https://aaronmccollum.github.io/personal-site/. I plan to update it in the future with a custom domain, but I just need to buy it first. Also, in the future this site will probably change as I update it. So any pictures below may be outdated by the time you read this.

In the Codecademy career path for Full Stack Developer, one of the projects early on is to create a simple portfolio webpage that highlights your projects, and potentially includes a biography, picture, ways to connect on social media, and links to a blog (like this one). I've skipped some of the earlier Codecademy projects, since I've done similar things in the past, but this one was interesting and it was on my to-do list.

I mainly wrote it in HTML and CSS and did it in a night. I didn't wireframe it, but I did use Codecademy's sample site as a detailed wireframe of sorts. Here's how it looks:

 

It's pretty basic. I need to get rid of the underline for the Blog link, but other than that it's nice. When you hover over the links, there is a CSS animation rule that causes them to expand a bit - to add some fun little interactivity there.

One of the requirements though was to implement some JavaScript. For a site like this though, there isn't a lot of places to add it in a way that adds value to the page. Then it hit me - why not create a modal that appears when you click "Contact" that includes links to my social media page? That was a great idea! At my job, I've created a few modals already, but that uses low-code methods that are unique to Pega. How would I do it with HTML, CSS, and JavaScript?

Thank goodness for the internet. A quick search led me to this very useful guide from W3 Schools: https://www.w3schools.com/howto/howto_css_modals.asp

As you can probably tell, it's dated. The JavaScript uses var keywords and uses the .onclick method, both of which are older ways of declaring variables and adding event listeners. And the HTML isn't semantic - there is no <dialog> tag anywhere. As a note, I also didn't add a <dialog> tag in my HTML, but it's on my to-do list soon to get that updated.

The first thing I did was insert the HTML code. I updated some of the class and ID names to make it more related to my page. I added it around the top of the page, but due to the CSS rules hiding it, you won't see it by default.

I then went over to the CSS rules and added those in, making sure to update the rules to share the same names as my HTML classes and IDs. The CSS rules are great, but because the modal is hidden by default (and before the JavaScript is added, there is nothing to un-hide it), you won't be able to see it. Even if you click on the 'Contact' link at the top, no modal will appear. It's a ghost modal for now!

Lastly I added the JavaScript. Here is where I made the most changes:

• I updated all the variable declarations to use const
• I added my IDs and class names to the DOM calls
• I changed the .onclick methods to .addEventListener() methods instead, and used callback functions to cause the modal to appear and close
• I omitted the function to cause the modal to close if the user clicked anywhere outside the modal, as I didn't want that one (also, replacing it with the addEventListener() method doesn't work on it's own, which I'll need to figure out).

After testing it, I adjusted the size to make it smaller than 80% of the screen width, and I added some padding to make it longer after my social media icons were added. Below is how it looks:

The X will close out the modal, and the screen darkens a little to emphasize the modal. And each of these social media icons will link to my pages, so you can easily connect.

I'm pretty happy with this, and I will be using this project to build on future projects that require more complex modals. These are great for forms too - and next time, instead of an X, I can add a Cancel or Close button instead.