Inspiration
We arrived at Technica yesterday confused with the current seating situation, as well as the organization of the hackathon as a whole. Finding seating in the venue was difficult because there were no assigned seats, and we could not find 4 seats together. There was even a point where we were asked to move after we had been working for about 6 hours. This was inconvenient and effected our work on our project. In addition, the process of forming teams was tedious. Some people even attended the conference without knowing who would be on their team.
What it does
theSeatingChart is a webpage that displays a map of the current Technica venue. With this map, a participant can conveniently hover over a table and see the names of all of the people at that table. It is a pre-assigned seating chart that will allow for a decrease in disorganization and confusion. We hope we can update the program so that people can choose their own group, and so that people can view if there is less than four members, and request to connect with the team members. This webpage can be integrated in the current and future Technica Apps and Websites.
How we built it
The reading of hackers, classifying them into groups and assigning them to tables, and then exporting this information for use in the website was done using Java in Eclipse. We found Java to be the easiest language to implement the logic with as it is an object-oriented programming language. We had four classes: Person (the hacker information), Table (table information), a Team class (Includes tables and person objects), all put together with our Driver class. The logic simply took in a text file with information separated by commas, read each line in to get Hacker information, added each Hacker into a team of 4, added the team to the next free table, and then wrote the Team information to a new text file. Currently, all variables are set to Technica specific details (Team Size = 4) which can be easily adapted to adhere to other conferences.
For the front-end of the program, we had to use a combination of JavaScript, HTML, and CSS. The HTML code was used as a webpage to display the interactive image-map. We had to map out the coordinates of the certain areas we wanted to highlight (i.e. the tables) so that we can assign team members to those highlighted areas. We then used CSS in order to design the basics of coloring, text, etc. JavaScript was used to connect our Java backend program to the HTML front-end
Challenges we ran into
Choosing an idea that wasn't already implemented. This was our third idea and we started it after 7 hours of working on 2 other projects that ended up already being products.
Another challenge we ran into was getting the exact coordinates of the areas we wanted to highlight on the png file. Since it was our first time trying to make an interactive image-map, we had to look up how to do it. There were various conflicting answers to our problem, and so it took a while to write up the code that we actually needed.
The last main challenge we came across was trying to extract the data that we had in a text file to display in a certain area of the image-map. We didn't really have experience with JavaScript and GitHub so it took a while to be able to use those tools.
Connecting the Back-end to the front-end also took some time. We had to get help from mentors and learn how to integrate Java and HTML together.
Accomplishments that we're proud of
We learned how to utilize GitHub, which is a very valuable tool. We also learned how to make an interactive image-map. How to style text in HTML and JavaScript.
We're also submitting a working product in our first Hackathon. This is a very big accomplishment because we did not know what we were walking into when we came here.
What we learned
We learned JavaScript, GitHub products planning, HTML, Java, and how to work with people outside of our majors and skill sets.
We also learned that even though we are in college, we can still ask for help from our mentors and peers. We collaborated with mentors in our project.
What's next for theSeatingChart
To make update so that people can choose their own groups. We also hope that we can make it so that a group who has less than the given max of members can search for other attendees to join their group. This could be made by making members take some type of mini-survey about their interest and skills they have. This will then put people who are not already in a group together so that they can work on a project together. We can use machine learning to best implement this idea.
Log in or sign up for Devpost to join the conversation.