Madza

Posted on Jul 12, 2022 • Originally published at madza.hashnode.dev

I built 3 Hackathon projects in 3 months, and won 1500$ in Prizes 🥳🎉

#webdev #nextjs #react #javascript

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.

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.

Features list 📋

Voice recognition - based on the Deepgram API
General stats - an overview of voice recording
Sentiment analysis - positive and negative word detection
Word cloud generation - most used word classification
Entity name recognition - categories such as person, place, etc
Activity tracking - find actions in past, present, or future
Interactive transcript - see progress or click to control it
Speaker detection - total number of speakers in the recording
Cue word usage - short text samples for better context
Custom search - extended ability to query for cues
Waveform preview - see the dynamics of voice, identify silences
Audio controls - play, pause, fast forward, and backward
Drag and drop support - drop audio in the file select area
Upload MP3 files - the most commonly used audio format
Progress loaders - improved UX for loading transcripts
Fully responsive - works fine on mobile and tablets
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.

Features list 📋

Play and Pause audio
Next and Previous tracks
Repeat the track
Shuffle track order
Progress slider
Time left / Total time
Volume slider
Search track
Filter tracks by genre
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.