DEV Community

Cover image for I built 3 Hackathon projects in 3 months, and won 1500$ in Prizes 🥳🎉
Madza
Madza Subscriber

Posted on • Originally published at madza.hashnode.dev

I built 3 Hackathon projects in 3 months, and won 1500$ 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 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 and Netlify hackathon.

image.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 - React application framework

React-cropper - For core cropper functionality

Flaticon, React-icons - For the icons

Chakra UI - For the components

GitHub - To host the code

Netlify - To deploy the project

ESLint, prettier - For linting and code formatting

Namecheap - For custom subdomain (configured on Netlify)

Project links 📚

✅ Full hackathon article: read on Hashnode

✅ Live project: deployed on Netlify

✅ Source code: available on GitHub


2. VoiceCue

From mid-March to mid-April, I came up with VoiceCue, 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 and Deepgram hackathon.

image.png

Features list 📋

  1. Voice recognition - based on the Deepgram API

  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 - React application framework

Deepgram - for AI-based speech recognition

compromise, sentiment - for text processing

react-tagcloud - to generate word cloud

react-tabs - for navigation panels

react-drag-drop-files - for drag and drop support

wavesurfer.js - to generate the audio waveform

GitHub - to host the code

Vercel - to deploy the project

ESLint, prettier - for linting and code formatting

Namecheap - for custom subdomain

Project links 📚

✅ Full hackathon article: read on DEV

✅ Live project: deployed on Vercel

✅ Source code: available on GitHub


3. Audio Player

From mid-April to mid-May, I participated in a Writeathon by Hashnode.

I described how I created a custom audio player to showcase my tracks in my portfolio, 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

Features list 📋

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

The tech stack I used 🛠️

React - Frontend interface library

GitHub - to host the code

Vercel - to deploy the project

Namecheap - for custom subdomain

Flaticon - for icons used in the player

Project links 📚

✅ Full hackathon article: read on Hashnode

✅ Live project: deployed on Vercel

✅ Source code: available on GitHub


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!


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, LinkedIn and GitHub!

Visit my Portfolio for more projects like these.

Top comments (16)

Collapse
 
victoreke profile image
Victor Eke

Awesome post, Madza. Thanks for sharing your experience. Are you participating in the current Hashnode Hackathon? 🙂

Collapse
 
madza profile image
Madza • Edited

Thank you for the kind words! 👍✨
Nope, haven't done more hackathons since May, been pretty busy lately 😉

Collapse
 
victoreke profile image
Victor Eke

Lol. I know the feeling.

Thread Thread
 
madza profile image
Madza

Haha, yeah as developers I guess we all know 👍✨😄

Collapse
 
huydzzz profile image
Pơ Híp

amazing guy

Collapse
 
madza profile image
Madza

Thanks a lot 👍💯😉

Collapse
 
andrewbaisden profile image
Andrew Baisden

Awesome well done!

Collapse
 
madza profile image
Madza

Thanks a lot, Andrew! 👍💯✨

Collapse
 
bobbyiliev profile image
Bobby Iliev

That is awesome! Well done!

Collapse
 
madza profile image
Madza

Thanks a lot, Bobby 👍✨💯

Collapse
 
iabdsam profile image
Abdul Samad

how do you guys find such good hackathons. I searched for active ones and not one popped up

Collapse
 
madza profile image
Madza • Edited

These were hosted by Hashnode and DEV, but Im sure there are many more if you do some research 😉👍

Collapse
 
sehgalspandan profile image
Spandan Sehgal

Congratulations. Keep it up .

Collapse
 
madza profile image
Madza

Thank you so much! 👍✨💯

Collapse
 
yusufxcode profile image
Yusuf

Amazing projects. What an inspiration.

Collapse
 
madza profile image
Madza

Thanks a lot! 👍💯✨