Our Experience at Civo Hackathon 2021
Tags: react, kubernetes, webdev, docker
Published: 2021-11-29 07:49:33


The first-ever Civo Hackathon was an initiative to bring together developers, architects, experts, and students from across the globe to develop innovative Kubernetes projects on [Civo](https://www.civo.com/). It provides a learning experience towards hosting applications on Kubernetes while exploiting the blazing fast speed and the simplicity of Civo’s Kubernetes platform.

There were 3 members in our team.
1. [Prajwal Jaiswal (me)](https://www.linkedin.com/in/prajwal-jaiswal/)
2. Bala Yokesh Mani
3. Aditya Simant

None of us knew each other before the hackathon. We randomly connected with each other through emails and Discord groups. It was a wonderful experience meeting and collaborating with new people. 

Though our main goal was to learn and explore new technologies, we feel proud to share that our project won 3rd Prize in the Hackathon. 

## Our Project 

For the hackathon we created the Speech Companion. It was a simple application but a complete project. We tried to focus on how we can solve a small daily life problem using our project. 
{% youtube kBOad8bGarw %}

### What was our Inspiration?

We as students always struggle with assignments and projects. Most of this work requires reading a big amount of text. We always wished there was a technology that can read the given text for us and also write the given text. So we built a project named Speech Companion.

Speech Companion can convert your given speech into text for convenience. It can also read the given text for you making your work a lot easier.

### How we built it?

How we built the application: We made use of `ReactSpeechRecognition` npm library for implementing the voice to text functionality.  We also used JavaScript's inbuilt `speechSynthesis` module for text to voice conversions.  We chose to use`reactJS` as our frontend library since it offers quick state refreshes and component based approach.  We used `fontawesome` icons for implementing icons on the user interface.  We also wrote our custom `CSS` for designing the home page with the best possible User Interface for users.

Then comes the deployment. This was done in just a few simple steps. We first containerized our app using Docker. Then we created a kubernetes cluster on the Civo Website and added three simple .yaml files in our application.

`deployment.yaml` file - 

```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: speech-companion
spec:
  replicas: 2
  selector:
    matchLabels:
      app: speech-companion
  template:
    metadata:
      labels:
        app: speech-companion
    spec:
      containers:
        - image: prajwalj27/speech-companion
          name: speech-companion
```

`service.yaml` file -

```yaml
apiVersion: v1
kind: Service
metadata:
  name: speech-companion
  labels:
    app: speech-companion
spec:
  ports:
    - name: "speech-companion"
      port: 3000
  selector:
    app: speech-companion  
```

`ingress.yaml` file -

```yaml
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: traefik
  labels:
    app: speech-companion
  name: speech-companion-ingress
spec:
  rules:
    - host: speech-companion.ae150322-a780-4657-a1e0-604a842c2fc0.k8s.civo.com
      http:
        paths:
          -
            backend:
              service:
                name: speech-companion
                port:
                  number: 3000
            path: /
            pathType: "Prefix"
```
You can find all the code on our GitHub Repo.

### What's next for the project?

Speech Companion has a lot of improvements to make yet. We can design it such that it can also be used in different languages, also we can give users the best experiences by changing the accent and speed for the better.

## Use of Civo Kubernetes

Before the hackathon, all the members of our group had experience in making web applications using React or other frameworks, but none of us had ever worked with cloud platforms. To participate in this hackathon it was mandatory to make use of the services provided by Civo in our project.

So one week before the hackathon we started exploring some of the core concepts related to DevOps. We got to learn about containers, containerized applications, Docker, Kubernetes, etc. And the best place to get started with learning and using Kubernetes is the Civo Academy. Most people find it difficult to start learning Kubernetes right away, as a result, the videos in the Civo Academy are structured in such a way that is easy to understand for most of the beginners.

Talking more about Civo, I would say the simplicity and the ease with which we can work on our applications is really impressive. With just few clicks here and there, selecting some options and within a few minutes we can have our fully running clusters. The people in the slack community are also very helpful. Even if there is a small problem or a thing that we are unable to understand, people in the community are always willing to solve our problems at any time of the day.

Overall I would like to say it was a wonderful experience participating in this hackathon.

### Links

Here are the links to our Project.

Github Repo - https://github.com/balayokesh/speech-companion

Demo - https://balayokesh.github.io/speech-companion/

Devpost Submission - https://devpost.com/software/speech-companion

Civo - https://www.civo.com/