Boom! What an awesome experience this weekend, being my first taste of a 2-day hackathon! The opportunity was introduced to me via a friend, and I was highly encouraged to take part. This particular hackathon was React Riot. While I still have so much to learn, I decided to push myself to partake. After those 48 hours, I can confidently say, that was the best learning experience as thus far.
Still being fresh in the realm of programming, I was still unsure of a few things:
- What even is a hackathon?
- Am I even allowed to go?
- Do I need to bring my backpack? Pack a lunch?
- Does this need to be the best application of human creation?
Truly, I was hesitant at first, but looking back, there were so many great lessons learned. For those of you who are curious about a first timer's hackathon experience, I'd love to share my thoughts and insight - hopefully this will urge at least one person to take part in one!
548 commits later...
The Application
I wasn't entirely sure what was going to happen. I wasn't sure if we had to conjure up our own project idea, or if it would be provided to us. Shortly before it began, we decided on creating a simple CRUD application using only front-end work.
This would be an application for charity work. Upon registering, you are provided with the option to select whether you are a charity, or a volunteer. This is when the fun came into play!
My team was a group of 4 people total - including me. On Friday evening, at 7:00 pm, the event officially started. My friend Rane provided a handful of wireframes for the general idea of the application, after that - it was grind time!
Registering as Charity
Once you registered as a charity, you are faced with a blank dashboard for the charity tasks. You are given the option to create new tasks for volunteers to sign up for. We built out a task form that allowed you to create your own task to post to the dashboard, including a file input for uploading local images!
These tasks, including the images, were local storage persistent thanks to one of the developers, CJ. This was super awesome!
As a charity, you are given the option to view your created tasks on the main dashboard, as well as click them to view an expanded version of the task. In this view, you are provided with the option to update or delete the task. I feel that this process had flown together real well!
Registering as a Volunteer
On the opposite side, you could register as a volunteer, which was also a really fun task. Upon registering for the application, the user is sent to the dashboard with a few different options than the charity. As a volunteer, you can view all tasks that have been created by charities, as well as save your favorite ones to a separate list, specific to your account.
The Challenges
I can confidently say, there were a lot of challenges, that I feel great for overcoming! The beauty of learning something new in coding, is you know your code is going to be spaghetti - everywhere!
Redux
As we completed the general format of the application, there was not much that I already knew how to build. I had a basic understanding of React Router, but beyond that, Redux seemed out of my league!
As others were busy, I decided to challenge myself to wrap my head around how the Redux store in our application was working. Being used to only holding state within the React component itself, this seemed way over my head. Thankfully, Rane did an excellent job of walking me through each step.
Without handing me the answer, and allowing me to struggle through the process, I eventually got a basic understanding of how Redux was implemented into our application. I was pumped!
I was able to implement the actions into our application, and have a relatively solid idea of what went where, and how to incorporate everything together so it performed as it was intended to!
React Router
While I have experience with React Router, this was a great test of my skill implementing it. It's easy to start getting confused with how everything is fitting together:
- Where was this route going?
- When is this route supposed to be accessed?
- Wait, how come this route isn't going where I need it to?
- Wait a minute, this route just broke the entire application?!
This brings up my next challenge: Private routes.
During my project week at school, our more experienced React developer handled the private routes, and while the concept isn't too difficult, the implementation seemed foreign!
I realized the log-in/registration process would be meaningless if anyone could simply route to the dashboard! So, I made sure I figured out how to hide most of the application behind private routes, until the user created an account.
Incorporating private routes into the app was super fun - it was like a sneaky cheat code, haha!
Local Storage
Local storage is one of those things that is super fun to me. With it first being introduced to me, I was so fascinated by the browser being able to retain information from something like a to-do app, or a make-shift blog site application. When I began incorporating the log-in/registration process, my team brought to my attention that:
- Volunteers should be able to view their own specific list of saved tasks.
- Charities should only be able to update/delete tasks that they created.
Small modifications like this a week ago, while not seeming impossible, definitely seemed.... difficult! However, with the assistance of my team, I broke down the process and concept of what needed to be done.
Eventually, I discovered how to keep track of the user's ID in local storage as they venture through the application - this way, all information is relative to that user. Upon logging out, that information is removed.
While this process may seem simple, and wasn't done the most ideal way - I am so stoked on my first implementation of these concepts. It was definitely out of my comfort zone, and I learned so much.
Merge Conflicts
Wooooo-wee! This was a great learning experience! Before this project, I wasn't faced with many merge conflicts, at all! Maybe something simple like - "There is an extra indentation here." Haha!
This time around, it was more challenging! While we did a great job at not overlapping work, there was most definitely issues with different packages, different code formats, mistakes in files, etc.
Such an experience provided a great test of reading through other's code, and troubleshooting wherever the conflict was. I learned a lot about:
- Slowing down during your work every once in a while
- Fully comprehending what is happening (If not, you may just make a wrong move when merging to master)
- Coming to an agreement with the team on how to handle the conflicts (If they are affecting the whole team, and other's decisions).
This was one of the most valuable lessons I learned this weekend!
Application Summarized
All in all, this was such a wicked cool weekend! I was definitely pushed out of my comfort zone and tested my knowledge with React. Also, shoutout to Mike for crushing the structure of the application's pages.
For me, although cliché, this weekend wasn't about winning a competition. It was about creating bonds with other developers, testing my skills, and learning new lessons. I couldn't thank my team enough for all the assistance, guidance, and practice they allowed me to gain - it was such an eye-opening experience, super grateful!
If you would like to check out the deployed application you can view it here:
Do keep in mind: This application was designed with mobile users in mind, so it would most likely be best viewed on your phone!
While the project is far from polished, and has a lovely group of bugs, I am super stoked with what our team was able to produce in two days. This only excites me more for the future group projects to come, when you have a team like ours this weekend, you really learn to appreciate team-based projects. Super awesome!
Also, if you're curious to learn more about React Riot feel free to read about it on their website: https://www.reactriot.com
Top comments (5)
Good job Dylan. It was awesome working with you and you grew exponentially in those two days. You were able to pick up on good git habits quick and learned to add features on your own even if you are at first unfamiliar with the implementation. You'll be an excellent addition to any team.
Cecil, thanks so much! Means the world! It was a great time building together. I could say the same! Grateful for every lesson I learned that weekend!
Enjoyed reading your articles.
Looking to start writing myself.
Inspired!!!!
I'm so glad you enjoyed it! I can't wait to read yours when you start, be sure to let me know Jacqueline!
Will do so.