Inspiration

We had no idea what kind of project we wanted to work on prior to the hackathon, but we knew we wanted to create something together (Luke and Jake), as we are both CS majors at KU. After participating in the "Building a Sick React Frontend in Like an Hour" workshop, we decided to use the React framework to build a fully functional site. Jake and Luke had prior experience with JavaScript and HTML, and both had heard about React but never used it. We both wanted to learn something new during the hackathon, as well as implementing current knowledge that was already established. Many internship opportunities online referenced React in their list of requirements or preferred skills, so we both felt that using the React library was a good way to not only learn the ins-and-outs of React, but also to apply our programming knowledge gained while studying at KU.

What it does

It is a simple website, that holds information about Jake and Luke. There is current information about Jake, as well as future aspirations. Includes a list of skills, facts, and images. Luke's pages need future development, but it is hopeful that his pages will be similar in style to Jake's.

How we built it

Using the React framework (I think I am using the word "framework" in the right context). Thanks to the React workshop that was hosted during the Hackathon (thanks Colin!), we implemented our project using the create React app that was bootstrapped to the React workshop. The project involves typescript and html. Primary code editors that were used were VS Code, Atom, and Notepad! Jake and Luke worked together on the project, with Luke watching and following along Jake as he explained how React worked.

Challenges we ran into

The biggest challenge we ran into was organizing the site. Using different routes housed within the project, it was a struggle implementing the right buttons and functions that would allow the user to navigate the different webpages. Since this was our first time using React at all (and our first hackathon!), we both ran into issues consistently, and would have to reference the React workshop, as well as various forums and threads on Google. The entire project was a challenge for us, but in a completely positive way! We learned a lot, and are hopeful in further developing our React knowledge.

Accomplishments that we're proud of

We accomplished what we wanted to after the React workshop, and that was to gain a better understanding of React, and well as learning Typescript and implementing html code within different components. We both started the project completely blind to React and Typescript, and we both feel more comfortable and familiar with the ins-and-outs of the libraries. We both wanted to learn something new, especially something that is used in the modern day industry. While the entire website still has tweaks that can be made, we are both proud of the work we put into this project.

What we learned

We both learned how to better code in VS code, as well as utilizing different abilities within the command line. We learned a ton about React and typescript, such as: Creating components, conditionally rendering components, and routing components. The ability to create different types, reference different files, and downloading and installing the necessary libraries are also skills we learned while coding together on this project.

What's next for HackKU - 2021 - Beesley Bros

We both hope we can optimize the website, and implement new features now that we have a basic understanding of React and Typescripting. There are almost a limitless amount of features that can be added to the website, and there is no reason that this project needs to be set aside after the hackathon is over. We both hope to develop and learn more about React, and consistently update our GitHub repo in order to try out new things. This project for HacKU was only the beginning, as we both hope to maintain and continuously develop this website in order to demonstrate first-hand knowledge of our programming expertise. We look forward to continuously updating our website over the upcoming weeks/months/years!

Share this project:

Updates