So, I’m not giving an overview of everything I did. However, after reflecting on the experience, a few make or break moments stood out. In a future post I'll get more technical, but for now, enjoy this semi-cinematic retelling of these moments!
I had the pleasure of participating in the Girl Develop It Hackathon this past week. I'm in a group of friends that meet every Wednesday. One friend, a fellow bootcamper in her first dev job, put us on to this hackathon. The kick off was during our Wednesday meet. So we joined the session. My other friend, who's considering a career change in tech, pitched an idea!
From there we were joined by a back-end focused dev. She happened to be a bootcamper that turned instructor. Our pitch: Create a site that connects users with a health concern to a juice recipe. We called it, "Juicerie" With that, we were off to the races!
1
I'm sitting on the couch where I've been for the past 8 hours. The cats have come, gone, and come back once more. One is lounging sleepily across from me, perfectly juxtaposing me and my team’s furious strategizing. 12 more hours before presentations start. While my team watches through screen share, I connect the Juicerie repo to Netlify and cross my fingers. Alas, the repo doesn't deploy.
At this point, the project is working on our machines. But, our juices are showing up twice. There’s a strange double render issue on that page. One team member thinks that it’s something to do with react preview and should iron out once deployed. We also notice that the create-react-app is inside another git initalized directory. Like: juicerie → my-app css etc, instead of git being initialized inside my-app. We think, because of this, the repo can’t deploy. Netlify is running whatever it needs inside the juicerie directory instead of my-app.
The only thing we can think to do, given our mush brains and now 11 hour deadline, is to make a new repo. Reran create-react-app. Then once inside the create-react-app folder, I initialized git. Pushed to Github. Transferred the files from our first repo into our new repo. Then tested deployment with Netlify. Can you guess what we saw?
That’s right. Even though I transferred the files locally, I didn't push it Github or run the build command! Whoops. That said, it’s both good news and bad news. We deployed out first netlify site, but we still don’t know if our files will compile correctly.
2
Taking a look at the laundry list of error code in Netlify's deploy log, I in my sleep deprived haze, knew that there had to be a way to get the site to deploy. Especially since the site ran in our local host. All of my team members were sleep, which left me burning the midnight oil.
Time to prioritize. We decided that it wouldn’t be the end of the world if the site didn’t deploy. We could demo via our local host.
The styles, largely unfinished, would be important due to the presentation.
The double render is also a sore, but if it's just a local host thing, then that could be an easy fix.
Resolving our deploy issue would be the largest value add in terms of time, effort, and challenge. If I could figure out how to deploy it to Netlify, then we could create a link that could me shared around and our site would render properly. Priority set!
With that in mind, I got to searching. I knew I didn’t have much time before my body would shut down for the night, so I went to the official Netlify docs.
I checked. Googled. Checked again. They weren’t particularly helpful because it said that my build settings were typical.
So I googled the error. Stackoverflow confirmed that Netlify won’t build with warnings in the code. My heart dropped. We’d have to fix every single error that showed in our terminal. I have no idea where to start or how to debug react like that. There’s not enough time. What do?
In a flash of clarity, I thought “wait a minute. Our site runs on local host."
This isn’t a build issue, this is a Netlify issue. I googled Treating warnings as errors because process.env.CI = true and found a dev.to article that was the key. After following the steps in the article, I ran Netlify once more.
Voila — Built and deployed! My twilight roller coaster had come to an end.
Time to sleep.
3
After getting a total of 4 hours of sleep, and going down the debugging rabbit hole, I got on slack to say "good morning" to the ladies. It was then that I did some quick math. Only 3 hours before presentations.
Luckily, we were second to last and there was nothing I could do about the time. So after I said hi and gave the big deploy update, I got my hoodie on and went downstairs to greet and feed the ducks outside in the zen pond.
The cool air and happy duck sounds was the best way to get my mind ready for the coding challenge that awaited me.
I sat back down on the couch, shook the feather toy for the kitty to chase, and started in on the scss. At present, our app looked something like this.
We only had a few hours so I focused on making the site look good via desktop. This was made easier because our project manager found some super cute icons to use to indicate the health areas. She also took beautiful photos of the juices last night!
I’m not super familiar with how to style elements in react, but the hardest aspects were: how to figure out what component controlled what on the website, how to name classes systematically, and making sure to wrap elements in another element.
I wish I had more commits to show what I focused on, but I did global styles first: fonts, colors, and reset. I wasn’t sure what styles compiled in what order. I thought the index would compile first, but I’d need to poke around into it more. Then I worked on the front facing pages and worked my way into the site. Meaning, home page, then juices, then juice recipes.
Eventually, it came time to debug the double render issue on our juices page. I added classes to the elements in the component. It wasn’t exactly rendering twice, but still I wasn’t sure what the issue was. I noticed that the Outlet inside our component was rendering some extra code, after I commented that out the page was issue free. However further debugging will be needed.
I felt like styling the photos would be tough, so I waited to do that towards the end. By the time I was “done-enough,” the presentations had been going for an hour and a half. Our slot was approaching quickly. I put in more touches and light interactions such as zoom on hover.
Thankfully, I figured out how to get the site to deploy before bed. The only thing that was left for me to do was to deploy and live demo the site while our project manager presented. We did it!!
These 3 experiences made me aware of how much I’ve been exposed to since my last hackathon and how going outside my comfort zone is sorely needed.
My last hackathon was almost a year ago to the day we started this one. Since then, I:
- completed my bootcamp,
- job hunted
- found my first dev role as a solo dev.
Because I’m solo it’s hard to gauge how much I’m learning.
There were moments that I didn’t mention where I was like, “oh, I’ve been in a similar situation at work.”
And a lot of the time it was outside of writing code, like having to decipher error logs, how to clone a project, and how to tackle breaking down a project. It was a nice reminder that I am progressing and evolving as a developer!
Top comments (0)