Group Chimp

The beginning...

In the beginning, our group The Hackstreet Boys started as a few underdogs. This was our first Hackathon ever so naturally, all the group members were nervous to begin. We started off on a discord call where we brainstormed some common problems students have on the day to day basis. We had a strong idea right off the bat - we discussed the problems of finding friends and finding group members in our college classes. The dreaded awkward moments when the teacher says this is a group project, we as a team decided that this was the problem we would tackle. We originally wanted our app to have a profile picture with a buildable profile- like DevPost or Linkedin, but we agreed that we would run out of time to create a functional social media app, so we decided to narrow our idea down and focus on the issue of finding those dreaded team members. This brings us to what our app actually does...

What it does

Our WebApp Group Chimp is a site where students and administrators can create an online "classroom" where students can join groups in real-time while seeing the already existing group members. It allows the process to be simplified and to create a fair and equal space for the people who might have anxiety about group projects. It would be extremely useful especially in events like a Hackathon 🧐. We designed this WebApp for students, classmates can create the classrooms and have no restrictions on who the admin can be. The app can be used across the internet at the same time as well.

How we built it

First, we brainstormed problems we as students face in college in google docs in a discord call. With the problem, we came up with a solution. We made low-fidelity, medium-fidelity wireframes and then created the final prototype to base our code on. These wireframes and prototypes were created in Adobe Xd. While the developers were working on the back-end code using Javascript, Firebase and NoSQL, the designers worked on the front-end code using HTML/CSS and Javascript. Our domain was made with domain.com. We came together after everything was done to troubleshoot some problems and link everything together.

Did you have any challenges?

Of course we did, as we mentioned before - this was our first hackathon. ~~We didn't even know what a DevPost was.~~ Our biggest problem was with our front-end development. We ran into problems with the CSS coding mostly, as you probably know formatting is no easy task. One wrong move and the whole website shifts. We had some back-end problems as well, one of the biggest was one of our developers didn't quite remember fully how to write JS so pretty much everything was a challenge for him (his words not mine). But he did have some help, don't worry he's okay. Back-end problems also spanned to figuring out the CRUD operations on Firebase and having everything properly displayed on the webpage.

Accomplishments that we're proud of

Honestly, our whole team is just happy we have a working WebApp that functions as planned. We are proud of working with complete strangers only to turn around in the next 72 hours to have completed a functioning WebApp. Our team had fun creating our product and are just happy we have something to hand in. We are also proud of the Database work involved with our product, some of our members even learnt how to deal with new software, and were even taken out of their comfort zones (with consent) to create the end product. We asked our back-end development team A.K.A. the techies what they had to be proud of while cleaning up the code and we don't understand a word so here are direct quotes instead "We used Firebase to benefit from Google's serverless infrastructure environment and stored our data as JSON objects. This allowed us to be more flexible and easily scale & structure the data." As you can see, they are very smart and are not to be messed with. Here's another little tidbit "I used firebase as a backend service to store all the data. Using firebase, I used the real-time database that they provide where I stored all my data. Most of my challenges were figuring out how to do CRUD operations on firebase and have it display properly on the webpage." They did however say that all the JS code was "vanilla" and that's definitely something we understand. Basically, our whole group including the developers and designers were vital to the process, development and implementation of our product and that's what we are proud of.

What we learned

Our group came into this hackathon as separate designers and developers. Very split down the middle, the coders didn't want to design and the designers didn't want to code. Not that anyone wouldn't be willing to pitch in where needed, but you know - we like what we like. Our team learned how to work as... a .. well.. team. We learned how to look at our work from a different perspective, which is something that normally doesn't happen in our respective programs. We (the designers) had to think of the developer's skills, while also keeping the idea realistic for the time we had available. The developers had to think of the design aspects all while keeping the WebApp consistent. It was a very enriching process and we all learned a little more about each other's professions and got us used to working with other people who might think differently than ourselves.

What's next for Group Chimp

In the future, Group Chimp will update live without having to refresh every time you press join or level. We want Group Chimp to become more customizable. Classrooms will have more customizable settings, such as different colour schemes. We would also introduce accounts where profiles can be customizable with a bio and "interests" and "skills" fields to fill out. This isn't the last you'll see from Group Chimp!!🍌