Project Files: Alpha

Project Origin

On a regular Tuesday, a friend called me to see if I was willing to help with building a landing page for a local church ministry that he is involved with. I said yes.

But instead of doing it alone in a couple days, I asked him if I can open this up for volunteers who want to grow as Frontend Developers. He said yes.

The project was due next friday, so I didn’t take to long to write a post?here on LinkedIn to see was anyone is interested to help.

Building the team

To my surprise, there were a lot of people who were willing to help. Too many in fact, for the task at hand! So I had to choose only some of them to make the team.

It may be worth mentioning that the intention was to create a remote team, but contained in Romania, since the website language was going to be Romanian. I tried keeping the criteria as simple as possible, just to make the choice as objective as I could, but without taking too much time to decide. Here’s a short list of what I looked for in the candidates:

• Little to no experience in the IT field (even outside of programming)
• Self-thought or early CS student years
• Passionate enough to have some projects on GitHub (proof of work)
• Bonus points if the projects were hosted on Heroku, Netlify etc

Even after applying this criteria, about 10 people were still on the table, so I had to make kind of a random pick, to narrow the team down to 6 (including me).

By Friday I had a team, so it was time to create a collaborative workspace for us all, and also, create a prototype for the landing page to better understand what we had to do.

The Design

While the team was sending through their email addresses, I jumped on to Figma and created a new draft. The plan was:

• create a paper prototype
• Create the components in Figma
• Use the components to create a mobile prototype layout
• Use the components to create a desktop prototype layout

I only had a few hours after work to do this, before hopping on a call with the team and showcase the design. You can probably guess that I set the bar a bit to high, since I’m not a UI/UX Designer, and have little to no experience with Figma or any other such software.

What I ended up doing was:

• create some components in Figma
• Use the components to create a desktop prototype layout

And this proved to be enough. Before meeting with the team, I had a call with the “stakeholders” of the project to get some input and make some revisions to the prototype, and it was ready for team ramp-up.

Preparing a common workspace

Since the time was not on our side, we had to pick some collaboration tools that wouldn’t get in our way, but still help us see what needs to be done and who takes ownership for each part.

I chose the following apps:

• Slack - for team chat, asking for help and general communication
• Trello - for task management
• Google Drive - any documentation, content creation and sharing, media assets
• GitHub - source code management

I also chose GitHub since it’s so popular. I believe the contribution of everyone in the team will be properly highlighted there, rather than a public GitLab repository for instance.

The idea was to choose the apps that the team is already familiar with, or at least have the best learning curve so we don’t have to waste time on “the process”.

We closed that Friday on a call with a clearly sketched-out agenda:

Tour (5 min):

• ?Take a look at the design
• Make sure everyone was able to access GitHub, Trello, Google Drive.

Planning (15 min):

• Break down the design into small pieces of UI Components, and assign one to everyone in the team

Questions(10 min)

I assumed each one would inflate, so my plan was to time-cap the meeting at one hour. We almost did!

The best part is that people brought some awesome ideas on the table, and we made some changes to the design right there on the call. We also had the talk about commitment to help with the project and scanned just how much time each of us had to help with this, so we can properly assign a reasonable amount of work.

Development

The timeline for the project was pretty clear:

Friday night: ramp-up

Up to Wednesday: code, code review, refactoring (close all major components)

Thursday: handle whatever work was left

Friday: demo, small fixes

Saturday: deployment

Mid-week, I also decided that we shouldn’t use a third party form management system, since the host was going to handle a small backend and DB. However that meant replacing a plug-and-play solution with a custom one, and the time was short. But I know a guy. A really talented one and a mentor figure to me, and he hopped on the project and helped us with that part. Cheers to you Nicu, if you are reading this!

It’s interesting that for this project, the code wasn’t even the biggest challenge, for me at least. It was orchestrating the team, reviewing the code, keeping in touch with “the stakeholders” and managing the timeline.

I think everybody in the team had the chance to start learning the following essential skills for the IT industry:

• Teamwork
• Communication
• Managing your work (time, effort)

It was really nice for me to see how the light bulbs went on, from the first pull request to the last revision. We had

• People using a javascript framework for the first time
• People writing CSS with tailwind for the first time
• People coming from React and learning the Vue way on the go

Overall it was a great experience and I believe everyone had something to learn from the project. I know I did!

This to me means that it was a success, and I can’t wait for the next one???

You can see the results for yourself here: https://tryalpha.ro.