I built 3 Hackathon projects in 3 months, and won 1500$ in Prizes 🥳🎉
Tags: webdev, nextjs, react, javascript
Published: 2022-07-12 16:46:51

---
title: I built 3 Hackathon projects in 3 months, and won 1500$ in Prizes 🥳🎉
published: true
description: 
tags: webdev, nextjs, react, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kaaqm3y906zn6whycg9.png
canonical_url: https://madza.hashnode.dev/i-built-3-hackathon-projects-in-3-months-and-won-1500dollar-in-prizes
---
In the first half of 2022 from mid-February to mid-May, I had some spare time on my hands, so I decided to try out a new venture - hackathons. My entries got nominated as runner-ups, so I decided to create an article to inspire you.

Kindly note that this article is not meant to brag in any kind of shape or form. I am still learning myself and my purpose for this article was to show that everyone can do it if you put in some work and believe in yourself and your ideas.

Down below I will list each of the projects I built, include the feature list, and describe the tech stack I used. I will also provide links to my full hackathon articles, links to the live deployed projects as well as links to the open-source code.

## 1. CropScore

From mid-February to mid-March, I came up with a solution, that allows you to forget about the technical issues with resolutions and aspect ratios. [CropScore](https://cropper.madza.dev/) calculates the score (since the name) of how well the real-time crop will fit for the target use.

This project was built specifically as an entry for the [Hashnode](https://hashnode.com/) and [Netlify](https://netlify.com/) hackathon.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657459306622/owV7osoQb.png)

### Features list 📋

-   Image upload - Supported formats .JPG and .PNG
-   Presets - Currently there are 33 presets from 10 commonly used platforms
-   Custom mode - User is allowed to switch to custom resolutions
-   Ratio lock - User can lock any custom aspect ratio
-   Input validation - Informative warning messages for invalid inputs
-   Move tools - User can move the image around
-   Zoom tools - Zoom the image in or out to get the precise crops
-   Rotate tools - Rotate image clockwise or counter-clockwise by 45-degree increments
-   Transform image - Swap image on the X or Y axis
-   Helper grid - Providing help for centering
-   Resolution data - Updated in real-time as you resize the crop window
-   Crop score - Real-time crop score of the fit for the target use
-   Image preview - The user is allowed to preview the crop
-   Reset - Reset image and crop windows as they were when the image was uploaded
-   Download - Download the image in .PNG and .JPG
-   Responsive - Use it on any device

### The tech stack I used 🛠️

[NextJS](https://nextjs.org/)  - React application framework

[React-cropper](https://www.npmjs.com/package/react-cropper)  - For core cropper functionality

[Flaticon](https://www.flaticon.com/),  [React-icons](https://react-icons.github.io/react-icons/)  - For the icons

[Chakra UI](https://chakra-ui.com/)  - For the components

[GitHub](https://https/github.com)  - To host the code

[Netlify](https://netlify.com/)  - To deploy the project

[ESLint](https://eslint.org/),  [prettier](https://prettier.io/)  - For linting and code formatting

[Namecheap](https://www.namecheap.com/)  - For custom subdomain (configured on Netlify)

### Project links 📚

✅ Full hackathon article: [read on Hashnode](https://madza.hashnode.dev/introducing-cropscore-an-image-cropper-for-content-creators)

✅ Live project: [deployed on Netlify](https://cropscore.netlify.app/)

✅ Source code: [available on GitHub](https://github.com/madzadev/cropper)

<hr/>

## 2. VoiceCue

From mid-March to mid-April, I came up with [VoiceCue](https://cue.madza.dev/), an app that generates cue timecodes that lets you find all the important parts of your voice recordings like sentiments, entities, and tags with just a click.

This project was built specifically as an entry for the [DEV](https://dev.com/) and [Deepgram](https://deepgram.com/) hackathon.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657459365308/cjoOBE5g8.png)

### Features list 📋

1.  Voice recognition - based on the  [Deepgram API](https://developers.deepgram.com/)
    
2.  General stats - an overview of voice recording
    
3.  Sentiment analysis - positive and negative word detection
    
4.  Word cloud generation - most used word classification
    
5.  Entity name recognition - categories such as person, place, etc
    
6.  Activity tracking - find actions in past, present, or future
    
7.  Interactive transcript - see progress or click to control it
    
8.  Speaker detection - total number of speakers in the recording
    
9.  Cue word usage - short text samples for better context
    
10.  Custom search - extended ability to query for cues
    
11.  Waveform preview - see the dynamics of voice, identify silences
    
12.  Audio controls - play, pause, fast forward, and backward
    
13.  Drag and drop support - drop audio in the file select area
    
14.  Upload MP3 files - the most commonly used audio format
    
15.  Progress loaders - improved UX for loading transcripts
    
16.  Fully responsive - works fine on mobile and tablets
    
17.  Colorful UI - for easier interaction and word highlighting
    

### The tech stack I used 🛠️

[NextJS](https://nextjs.org/)  - React application framework

[Deepgram](https://deepgram.com/)  - for AI-based speech recognition

[compromise](https://www.npmjs.com/package/compromise),  [sentiment](https://www.npmjs.com/package/sentiment)  - for text processing

[react-tagcloud](https://www.npmjs.com/package/react-tagcloud)  - to generate word cloud

[react-tabs](https://www.npmjs.com/package/react-tabs)  - for navigation panels

[react-drag-drop-files](https://www.npmjs.com/package/react-drag-drop-files)  - for drag and drop support

[wavesurfer.js](https://www.npmjs.com/package/wavesurfer.js)  - to generate the audio waveform

[GitHub](https://github.com/)  - to host the code

[Vercel](https://vercel.com/)  - to deploy the project

[ESLint](https://eslint.org/),  [prettier](https://prettier.io/)  - for linting and code formatting

[Namecheap](https://namecheap.com/)  - for custom subdomain

### Project links 📚

✅ Full hackathon article: [read on DEV](https://dev.to/madza/introducing-voicecue-find-sentiments-tags-entities-actions-like-a-dj-4kjk) 

✅ Live project: [deployed on Vercel](https://cue.madza.dev/) 

✅ Source code: [available on GitHub](https://github.com/madzadev/cropper)

<hr/> 

## 3. Audio Player

From mid-April to mid-May, I participated in a  [Writeathon](https://townhall.hashnode.com/the-epic-hashnode-writeathon?source=hashnode_feed) by  [Hashnode](https://hashnode.com/).

I described how I created a custom  [audio player](https://www.madza.dev/music)  to showcase my tracks in my [portfolio](https://madza.dev/), since quite a few people have been interested in its technical implementation.

I'm really glad I took up this one, since I covered the full app creation cycle from feature planning, wireframing, and designing, to creating components, implementing logic, adding responsiveness, and deploying the app.

![1657459515_1920x929.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1657459529692/QUIQ86MrE.png)

### Features list 📋

1.  Play and Pause audio
3.  Next and Previous tracks
4.  Repeat the track
5.  Shuffle track order
6.  Progress slider
7.  Time left / Total time
8.  Volume slider
9.  Search track
10.  Filter tracks by genre
11.  Playlist items

### The tech stack I used 🛠️

[React](https://reactjs.org/)  - Frontend interface library

[GitHub](https://github.com/)  - to host the code

[Vercel](https://vercel.com/)  - to deploy the project

[Namecheap](https://namecheap.com/)  - for custom subdomain

[Flaticon](https://www.flaticon.com/) - for icons used in the player

### Project links 📚

✅ Full hackathon article:  [read on Hashnode](https://madza.hashnode.dev/how-i-built-a-music-player-to-showcase-my-own-tracks) 

✅ Live project:  [deployed on Vercel](https://www.madza.dev/music)

✅ Source code:  [available on GitHub](https://github.com/madzadev/audio-player)

<hr/>

## Conclusion

So, what would be my main takeaways? I would like to encourage new and aspiring developers to challenge themselves and try out new ventures. Hackathons are a fun way to explore new technologies, learn new skills, and discover new contacts. 

Nevertheless the end result, you will still be a winner, cause the practical skills you will earn will be far more valuable than anything else. Plus, others will benefit from it as well, and could even contribute to it to improve the project in the future.

Most importantly, participation in the hackathon will give you the motivation to finish the project, since you are committed to a goal and a specific deadline. Working with side projects without these often lead to giving up, or starting new ideas on top.

Also, this way you will come up with something you can put in the resume and your portfolio, that will help you to find your next role. Be persistent and you will make it!

<hr>

Writing has always been my passion and it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on [Twitter](https://twitter.com/madzadev), [LinkedIn](https://www.linkedin.com/in/madzadev/) and [GitHub](https://github.com/madzadev)!

Visit my [Portfolio](https://madza.dev/code) for more projects like these.