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 📋

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.

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.