My experience in a remote hackathon (Design architecture and idea)
Tags: webdev, career, architecture, showdev
Published: 2020-05-21 13:48:26


In the past week, I participated in my first remote Hackathon, I have participated in some Hackathons before, but never as remotely, and to be honest I was a little bit nervous because I didn't know if the brainstorms and the communication will flow well as a face to face interaction.
The concept of this Hackathon was regarding or the situation that We are living now, the COVID-19. 

When the hackathon started was something different for me and my teammates, because we are not familiar with the organization but we adapted very quickly. 
The hackathon had a duration of five days, good time to refine the idea, and complete a functional product. Basically, we had 5 video conferences, one to introduce with participants, judges, and coaches and after that, we had one call every day with the coaches to explain our advances and problems, these calls were really helpful because they provide us good ideas to build a quick MVP. 

## Idea 👾
The thing that most enjoyed and I liked it from this hackathon, was the idea that we build. In the beginning, we didn't have clear what we want to do. The only thing that we knew is that we wanted to reduce the proliferation of the virus, first in close spaces, and then in open spaces.
So, one of my teammates had the great idea to build a **Face Mask recognizer** to detect if the people have the face mask correct or not, and even if they don't have.
The idea was heard great and very exciting and also the stack that we choose was challenging because we wanted to implement IoT, AI, and serverless.


## Development Stack 🖥
The stack that we chose was base on Microsft technologies, using some Azure services.
1. **Azure SignalR service:** basically we were using this service to have real-time communication between all clients and our backend.

2. **Azure IoT Hub:** We used this service to have communication between our backend and _Arduino_ board that was used to show feedbacks with some LEDs the user, in case if the detector found any situation.

3. **Azure functions:** We build all our backend using _serverless_ because We thought that transactions will be very short and we don't want to have a big application running all the time. The programming language that we chose was C# with .NET CORE.

4. **React and React Native:** All our client was made by _React_ and handling the state with react itself just using _Context_ and the endpoint call with _Axios_.

5. **[Custom Vision](https://www.customvision.ai/):** This is a new service of Microsoft that helps us to train a model and the service can detect any type of image and return values with the bounding boxes of the objects in the image.

6. **[TensorFlowJS](https://www.tensorflow.org/js):** The last and one of the most important services was the library of tensor flow, this library was useful to read and interpret the Custom Vision model. 

This is a high-level architecture diagram that we using to design the idea and the data flow through all the services.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xtqjo4ibej45ufa1815a.png)

## What finally we build?
The last product was pretty close to the design but we could not complete two very interesting items.
1. We didn't have enough time to build the mobile application and in the end, we build only the Web application with _React_.
2. The second thing was that we could not do the real-time recognition and we had to add a button to take a snapshot of the people that were in front of the camera.

I leave here how looks the product at the end of the hackathon.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/45n1d3xgizej1rvpvxja.png)


## Conclusion 👏

Participate in a hackathon is a great experience because you have the opportunity to go to the limit with your knowledge and also learn new technologies very quickly and applied.

If you are thinking to participate in a hackathon **I recommend these 3 important things** to enjoy more the experience. 

1. Choose this ambitious technology that you always wanted to know more about it (IoT, AI, or a new JS framework).
2. If you are remote, I recommend using a tool to draw diagrams in that way your team can share all the ideas that have.
3. **Enjoy it and don't take very seriously the event and at the end of the day, it is just a game. Don't make it a stressful situation.**

Hope you enjoyed this personal post and found it to be a good read! If you have a good or bad experience in a hackathon please leave in the comment section and we can discuss 😉