My First Full-Stack Hackathon: Lessons from Building a Mobile App

Oarabile Koore — Tue, 01 Oct 2024 14:15:34 +0000

This post has been sitting in my drafts for months, gathering dust. Finally, I’m ready to let it see the light of day and share the experience of my first full-stack hackathon with you.

I will disclose that I am a self taught dev and this hackathon was the first time building a full-stack app.

The task of this hackathon was to build a mobile application for a housing corporation, and implement basic functions like sending house reports, house applications, viewing rental statements, querying for help and to view the FAQ's.

I was the android developer, and the other team mates went toe to toe battling with Xamarin for IOS and building the website portfolio for the project.

Btw, don't ask me why we did not use Xamarin for all the platforms, we are quiche eaters.

At the same time the competition rules did not take the fact that Apple binaries cannot be handed out without Big Brothers review.
So we planned to build an Android app and compile it to an IOS platform binary through Xamarin.

( ...one of my team-mates suggested this - I don't know what compilation magic is going on, i have built a language before and i know changing language bundles to another is not simple )

For android we used Javascript running on the DroidScript Framework, additionally the other team-mates battled with another hackathon and being at my request for feature implementations.

I chose DroidScript for its unique way of reducing ui complexity on android and its access to native api's while producing a small binary.

Furthermore I chose it basing on experience with ui development using it, I had ported the material design 3 library to DroidScript as a plugin recently therefore ui won't be an issue.

I decided not to add Node.js for the client application, because Node is way too heavy but for the admin app I used node with esm flavorings everywhere.

We completed the project in 4 days, and started drafting the admin app on the same day of submission but we didn't manage to complete it.

So, what was the result? Well, we didn’t win or even make it to the final round. In fact, we never received any feedback or updates, which was frustrating. I’m not disappointed by the loss but by the lack of transparency.

Despite everything, there were some valuable takeaways from this hackathon:

Write Tests, Even in a Hackathon
We skipped tests initially due to time constraints, but it came back to bite us. Testing would have helped us avoid making over 5000 Firebase calls during development. Lesson learned.

Don’t Underestimate XML DOM in Android
We struggled with UI performance, especially when adding multiple elements dynamically. The way Android’s XML DOM is handled by DroidScript turned out to be slower than expected. I should have used Enjine.IO, a web based version of DroidScript (written by core DroidScript Devs) but faster plus the benefits of being cross-platform.

Think Twice About Excluding Node.js
We thought excluding Node.js for the client app would save space, but it cost us functionality. Firebase was significantly slower when integrated as a script, compared to using it as a Node module. Next time, I’d reconsider the trade-offs.

Thank you for reading! This blog post may have taken months to finish, but the lessons I learned will last much longer.

You can check out the project here: Hackathon Project.

Let me know your thoughts!

I think the web is broken, or i am

Oarabile Koore — Fri, 05 Jul 2024 19:59:35 +0000

Huhhm... (a sigh of lost hope)

The world of a quiche eater isn't openly documented, well here is everything looming in my mind at-least just about how
i think ui dev should be.

Here is the backstory :

I started my development journey by building android apps using DroidScript (a javascript framework), the issue is it's not cross-platform.

NOTE : I refer to the native way of building ui.

The native way looks something like this:

function OnStart(){
  let main = app.CreateLayout('linear','fillxy')

  let btn = app.AddButton(main, 'A simple Button', 0.8, -1)

  app.AddLayout(main)
}

I've gotten so used to building ui this way it seems correct,
I feel at peace, I feel at home.

I have built direct copies of popular design schemes for DroidScript using the native android ui api's provided like Material Design 3.

I find my-self having to compromise I hate the thought of typing so much HTML and CSS to get something i feel proud of, the switching between these too is annoying.

Well, you could say why not learn a framework like React or Vue.

They all have that xml syntax and i don't like it, while i love web components they make me hate the xml syntax so much more...
now i have to add a f*** dash.

I have tried a multitude of frameworks,

I did React and i love the way i can call functions and build ui, i just don't feel well with React Query and how much i have to learn and things don't come pre-built. I hate thinking about a which state management solution.
I did bits of Vue to be honest i did like it, but i feel so much away from the development i like, keep in mind i hate xml syntax so as Vue is catching strays Svelte isn't safe too.
I did Solid online though, yeah i think I'm fine.
Before this, i did install Next.js i might give it a try looks fire, but i may have to swallow the hard pill this time.

Okay but what have i done since i dread xml syntax

I made my own framework i called it SquidBASE.js and i didn't go through with my promises, deleted it and gave up.

The hate boiled up again,
I tried a different approach, i built innerscope.js and it flopped i just
couldn't get it to align with what i want.

I previously even made an article about innerscope.js bashing how frameworks are getting it all wrong, i won't delete it though >3.
Now i am on my third attempt viewml.js
The motivation i will succeed is low, the development of it is a major
blow to my ego, i hate having to ask that dreaded LLM for help.
I'm just copying i want to be that 10X developer, but everything feels so hard.

Anyway my plan is I'm not going to copy exactly how DroidScript operates, but i have figured out why it felt so good its the separation of concerns, lets you write ui, and up-to good ui without involving css nor html.

Now look I'm not that bad of a quiche eater, CSS is great so i decided to call everything from the js side, embed element focused styles onto that element using a css-in-js way.

Here is the hierarchy of the project :

/* As a class glazer, Application class 
is the top level and we have an onStart function to be the start*/
class Application {
onStart(){
  let main = vml.addLayout("main", "linear", "vertical");

  let bannerdiv = vml.addHtmlEl(main, "div",'center,vertical');
  /* With Any Div, or Element, its children can be aligned
  *  a certain way thats why we got the center, certical options
  *  now you dont have to add the css for that, and call from
  *  a function
  */
  let banner = vml.addHtmlEl(bannerdiv, "h1");
  banner.textContent = "The framework for staying in the flow";
  banner.id = 'banner'
  banner.css`
  letter-spacing: 0.5px;
  margin-top: 15px;
  font-family: "Inter", sans-serif;
  font-wight: 700;
  font-size: 48px;
  color: #213547;
  text-align: center;
  overflow-wrap : break-word;
  `;
}
}

I can't demonstrate this well, in a blog post but i'd advise you check the App.js code in the github : viewml App.js File

Now all of this takes me in all different places.

I feel like i have got everything mixed up, sometimes i think maybe it's not for me, or its just that maybe I'm the issue, the world loves that
xml syntax and i haven't found someone who shares these thoughts.

Also with job concerns this even takes me on a scare loop, will i find a job or this will be a hobby that cannot elevate me because i don't want to fit in the world that exists and the way it works.

Or i am overthinking advise me.

Forem: Oarabile Koore

My First Full-Stack Hackathon: Lessons from Building a Mobile App

I think the web is broken, or i am