Andrew Rodebaugh - Hackath.io

Project URL: https://hackath.io/hack19


Abstract:


My goal with my capstone was to find a way to make it more accessible to create and join hackathons. A traditional hackathon is a group of people going to a place coding for 24 hours. This model is a lot of fun but is not accessible to people that can’t get there or only have a couple of hours to spare. I decided that creating an online platform for hackathons would address all of these issues allowing more people to join. Over the first few months of school till March 15th I created a platform with my existing programming knowledge that allows for easy creation, running and monitoring of hackathons. I ran my own hackathon on March 15th-16th from 5 pm to 5 pm with the theme “How can we improve STEAM Education using code?” People could submit websites, apps, code, or presentations which explain the projects they did/wanted to create. I was able to get $175 worth of prizes from Braskem which allowed me to push more people to join. At the end of the day, 20 unique people visited my site but only 8 entered. Overall I learned a lot about creating large projects, time management, planning events and social media/online ad management. This project was stressful at times but was an overall rewarding experience.


Bibliography:

“Angular Documentation.” Angular Docs, Google, angular.io/docs.


I rely heavily on this site for figuring out how to program the website. Angular is a web framework that allows me to quickly program interactive and dynamic user interfaces. This allows me to create profile pages, hackathon pages and other pages with only one template. The documentation allows me to see all of the different commands I can program, what they do and the different properties allowed in the function. I choose Angular over alternatives like Vue or React because it’s created by and used by Google so I know it is well optimized/trustworthy.


“Typescript Documentation.” TypeScript - JavaScript That Scales., Microsoft, www.typescriptlang.org/docs/home.html.


Developing Web Apps with Angular requires the use of the Microsoft’s compiler languages called Typescript. It allows complex object-oriented programming to be done in Javascript. So I write code in the Typescript syntax and then compile it down to Javascript to be readable by browsers. This documentation helped me learn what that syntax is and lets me quickly refer back to it if I forgot/broke something. I don’t use this as much as I use Angular Documentation but it kind of shows why Typescript is a great language because of how natural it is to Javascript programmers.


“Bulma Documentation.” Bulma: a Modern CSS Framework Based on Flexbox, bulma.io/documentation/.


    For people to use a website it has to be functional and pretty. To make my job easier I am using a UI Components Framework for the web called Bulma. So now all I have to do is glue together buttons, navigation bars, textboxes and other components found on web sites to make a pretty User Interface.


“Adobe XD Tutorials.” Conceptos De Modos De Color En Photoshop, Adobe, helpx.adobe.com/xd/tutorials.html.


    Adobe XD is one of the applications I used to create the User Interface prototype. This site includes some of the tutorials I used to learn the software and a reference I referred to when needing help. Adobe XD allows me to get a bunch of components I designed using Bulma/Affinity Designer and make them interactive. This helped me quickly turn my visuals into working code. I also was able to grab feedback from people on how to improve the User Experience before I put into too much work into programming the visuals.

LIMITED, SERIF EUROPE. AFFINITY DESIGNER WORKBOOK. SERIF EUROPE LTD, 2016.


Affinity Designer is the software I used to create the components I used for the Adobe XD prototype. I learned the software through this book Affinity Designer Workbook which goes step by step all the different tools that Affinity Designer provides. Affinity Designer is a cheaper alternative to Adobe Illustrator that is made especially for macOS and a tool I have been using a lot for the last 2 years.


“About Ludum Dare.” Ludum Dare, ludumdare.com/compo/about-ludum-dare/.


    Ludum Dare is the inspiration of this whole project and where I got a lot of inspiration for how my website will work. Ludum Dare is a 48-hour game jam that has been going on for the last couple of years which happens every couple of months. It can be done from anywhere in the world and has a couple of real-world meetups. Some of the games made on this site ended up making a big impact on gaming and I help that the same happens with my hackathon.


“How Should You Promote Your Hackathon? 8 Tips.” Westminster, westminster.impacthub.net/2014/02/04/how-should-you-promote-your-hackathon-8-tips/.


This website talks about how I can promote my Hackathon to make sure they are actually people participating in it. From this site, I know that I should make a website landing page for people to be compelled to sign up for my Hackathon also promoting that site through social media helps. Putting a Hackathon on a website that tracks what Hackathons are going on is a great way to push to outside influences.


“How to Run a Successful Hackathon.” Hackathon Guide, hackathon.guide/.


This is a well-done guide that goes over everything you need to create a successful Hackathon. Since my Hackathon will be themed I used this guide to help me create a compelling theme that is broad enough to have an unlimited amount of interpretation and solutions. It also gives some more helpful advice on how to promote my Hackathon. I also got the idea to make a chat room/slack/email for communicating with the participants.


Timothy, and Timothy. “5 Ways to Improve Angular SEO – Timothy – Medium.” Medium.com, Medium, 2 Dec. 2018, medium.com/@timofeybm/5-ways-to-improve-angular-seo-cf0aeb542e48.

Before I advertise any site I need to make sure that people will easily be able to find my site. This means I need to increase my Search Engine Optimisation Score (SEO Score) which is what search engines like Google use to rank what site is more relevant to the user. This guide helps me find out what tricks I can use in my code to make my website look better to Google thus improving my score. I will be implementing these tips in the future and testing out how well it works using some tools.


“What Is Web.dev?  | Web.dev.” Web.dev, Google , web.dev/about.


    This site web.dev is what I will use to make sure my site is as quick, accessible and user-friendly as possible. This tool was made by Google based on their research on what makes a compelling and accessible site. I will use the tool and using the suggestions try to make as many of my scores 100% as possible. This will also improve my Search Engine Optimisation since search engines like faster sites.

Comments