Companies usually want to test a specific area of knowledge. Quizzes are an engaging method to measure your expertise in the particular field.

That's why I created [DevQuizzes](https://quizzes.madza.dev), an online platform where you can test your knowledge across various DEV topics.

Over the last 6 months I read a lot of official documentation and studied dozens of tutorials to create the content basis for initial launch.

I ended up creating over 500 questions in 20 categories.

### Features
1. 500+ questions
2. Review Questions
3. Reward Badges
4. Save Progress
5. Submit and Edit
6. Top Contributors
7. Social Sharing

### Tech stack
The project is created using [NextJS](https://nextjs.org/).


DevQuizzes GIF

DevQuizzes

Creating a radio app was a project that I had in mind for quite a while. I have always felt a special connection to music. It has always inspired me and boosted my productivity.

It was initially meant as a pet project for personal use, but the more time I spent on it, the more it started to take shape of something the developer community could benefit from as well, so I decided to make it accessible for the public.

### Features
1. Change stations
2. Change backgrounds
3. Play/pause
4. Repeat track
5. Volume controls
6. Recent played list
7. Save last settings
8. Responsive design
9. Loading screen
10. Keyboard controls

### Tech stack
The project is created using [NextJS](https://nextjs.org/). The audio source is [SoundCloud API](https://developers.soundcloud.com/docs/api/explorer/open-api). Deployed on [Vercel](https://vercel.com).


Online radio with various genre stations to boost productivity.

DevTunes GIF

DevTunes FM

If you are a content creator, the chances are you have come across stretched, shrank, non-centered or pixelated images after the posting of your material. Those are mostly caused due to uploading images with a low resolution or inappropriate aspect ratio.

I came up with a solution, that allows you to forget about all the technical issues with resolutions and aspect ratios.

### Features

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

### Tech stack
The project is created using [NextJS](https://nextjs.org/) and [Chakra-UI](https://chakra-ui.com/).

The project is under the [MIT](https://choosealicense.com/licenses/mit/) licence and the code is available on [GitHub](https://github.com/madzadev/cropper).

### Final notes

The full article on the making of the app can be read [here](https://madza.hashnode.dev/introducing-cropscore-an-image-cropper-for-content-creators).

CropScore GIF

CropScore

An easy to install music player with custom controls, playlist, filters, and search functionality. Initially designed to play my own tracks.

Includes customization options on available features and design.

### Features
1. Play / Pause
2. Next / Previous
3. Repeat / Loop
4. Progress slider
5. Time left / Total
6. Volume slider
7. Search track
8. Filter by genre
9. Playlist items

### Tech stack
The project is created using [React](https://reactjs.org/).

Icons are taken from [Icons8](https://icons8.com/).

### Final notes
Project is available as an [NPM package](https://www.npmjs.com/package/@madzadev/audio-player).

Any feature requests are welcomed on [GitHub repo](https://github.com/madzadev/audio-player).

Music player with custom controls, playlist, filters, and search functionality.

Audio Player GIF

Audio Player

A real-time chat application, that allows multiple participants to join the chat via the room name.

Active users are being listed in the users panel and the connection messages are being displayed by the chat bot.

### Features
1. Log-in screen
2. Online users list
3. Input field
4. Message board
5. Chat bot messages
6. Connecting via room name

### Tech stack
The project is created using [React](https://reactjs.org/), [Express](https://expressjs.com/) and [Socket.io](https://socket.io/).

### Final notes

The project is under [MIT license](https://choosealicense.com/licenses/mit/).

Any feature requests are welcomed on [GitHub repo](https://github.com/madzadev/chat).

Real time chat app using React, Express and Socket.io.

Chat Rooms GIF

Chat Rooms

Whether it is web development, writing articles, or achieving personal goals, proper planning has always been crucial. That allows us to split the main task into smaller bits, track progress and set realistic deadlines for each.

I came up with self-hosted project management tool.

### Features

1. Authentication
2. Statistics page
3. Action history
4. Event calendar
5. Add/delete boards and columns
6. Add new cards
7. View/update/delete cards
8. Input validation
9. Move cards around
10. Vertical/horizontal scroll
11. Search cards by title
12. Logout

### Tech stack
The project is created using [NextJS](https://nextjs.org/) and [Appwrite](https://appwrite.io/).

The project is under the [MIT](https://choosealicense.com/licenses/mit/) licence and the code is available on [GitHub](https://github.com/madzadev/kanboard).

### Final notes

The full article on the making of the app can be read [here](https://dev.to/madza/introducing-kanboard-your-personal-project-management-tool-4a0a).

Installing intructions are available [here](https://github.com/madzadev/kanboard#installation-).

KanBoard GIF

KanBoard

Many of us have come across the tidy task of voice recording analysis, where you had to listen to the whole audio to identify the most essential parts.

Manual processing can be very time-inefficient. Just listening from end to end would often not be enough. You would have to double or even triple that time since you would have to pause and replay some parts of the audio.

I came up with 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.

### Features

1. Voice recognition - based on the Deepgram
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 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

### Tech stack
The project is created using [NextJS](https://nextjs.org/) and [Deepgram API](https://developers.deepgram.com/).

The project is under the [MIT](https://choosealicense.com/licenses/mit/) licence and the code is available on [GitHub](https://github.com/madzadev/voice-cue).

### Final notes

The full article on the making of the app can be read [here](https://dev.to/madza/introducing-voicecue-find-sentiments-tags-entities-actions-like-a-dj-4kjk).

Find sentiments, tags, entities, actions instantly.

VoiceCue GIF

VoiceCue

I've always liked to write, code, and do some music production in my spare time, so I wanted my portfolio to reflect all that.

I wanted my portfolio to be simple, clean, and easy to navigate on both mobile and desktop devices.

For more details on how I created it, read the [blog post](https://madza.dev/blog/hooray-i-created-my-first-portfolio).

### Features
1. Landing area
2. Blog section
3. Projects section
4. Music section
5. Markdown highlighting
6. Content sharing
7. Load progress
8. Scroll to top
9. Search and filter
10. Contact options

### Tech stack
The project is created using [NextJS](https://nextjs.org/) and [Contentful](https://www.contentful.com/).

Extra modules include [Framer Motion](https://www.framer.com/motion/), [Nprogress](https://www.npmjs.com/package/nprogress), [React-Syntax-Highlighter](https://www.npmjs.com/package/react-syntax-highlighter) and [React Share](https://www.npmjs.com/package/react-share).

[Varela Round](https://fonts.google.com/specimen/Varela+Round), [Quicksand](https://fonts.google.com/specimen/quicksand), [Poppins](https://fonts.google.com/specimen/poppins) and [Inter](https://fonts.google.com/specimen/inter) fonts are used for typography.

### Final notes

The previous placeholder version of my portfolio is available [here](https://mylandingpage.vercel.app/).

Personal portfolio website including a blog, projects, music and contact info.

Portfolio GIF

Portfolio

An easy to use image slider with auto/manual mode, loop options and background customization to fill the space for smaller images.

Designed to use for website headers, article hero images or any other space, that needs some interactive visual content.

### Features
1. Arrow switch
2. Dislay progress
3. Behavior customization

### Tech stack
The project is created using [React](https://reactjs.org/).

Icons are taken from [Icons8](https://icons8.com/).

### Final notes
Project is available as an [NPM package](https://www.npmjs.com/package/@madzadev/image-slider).

Any feature requests are welcomed on [GitHub repo](https://github.com/madzadev/image-slider).

Image slider component with controls for your pictures.

Image Slider GIF

Image Slider

[Breakout](https://en.wikipedia.org/wiki/Breakout_(video_game)) is an arcade game developed and published by [Atari, Inc](https://en.wikipedia.org/wiki/Atari).

In Breakout, the goal is to destroy all the bricks at the top. A ball bounces off the top and two sides of the screen. When a brick is hit, the ball bounces back and the brick is destroyed. 

The player loses a turn when the ball touches the bottom of the screen; to prevent this from happening, the player has a horizontally movable paddle to bounce the ball upward, keeping it in play.

### Features
1. Moving paddle + ball
2. Bricks generation
3. Collision detection
4. Score keeping
5. Level system
6. Lives tracking
7. Game over / reset

### Tech stack
The project is created using [Svelte](https://svelte.dev/).

### Final notes
The project is under [MIT license](https://choosealicense.com/licenses/mit/).

Any feature requests are welcomed on [GitHub repo](https://github.com/madzadev/breakout).


Breakout game with levels, speed modes, lives and score count.

Breakout GIF

Breakout

I created this landing page as a temporaly placeholder for my personal domain while I was working on my portfolio. It's designed keeping simplicity in mind for both setup and UI.

Since I no longer host it on my personal domain, I decided to make a template from it, so other devs looking for a landing site could benefit as well.

I also made a [tutorial](http://localhost:3000/blog/create-a-landing-page-in-less-than-100-lines-incl-css) on how to create it from a scratch.

### Features
1. Info about the dev
2. Icons linking to social media
3. Interactive hover effects

### Tech stack
The project is created using [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) and [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).

Icons are from [Font Awesome](https://fontawesome.com/).

### Final notes
The project is under [MIT license](https://choosealicense.com/licenses/mit/).

Any feature requests are welcomed on [GitHub repo](https://github.com/madzadev/landing-page).

Landing page template initially used for madza.dev.

Landing Page GIF

Landing Page

I wanted to create some practical app that I could use do do some quick calculations in my daily routine. It has come in handy from time to time, hopefuly others can benefit from the app as well.

### Features

1. Add, subtract, multiply, divide
2. Support decimal values
3. Calculate percentages
4. Invert the values
5. Reset functionality
6. Format larger numbers
7. Output resize based on length

### Tech stack

The project is written in [React](https://reactjs.org/).

### Final notes

The project is under [MIT license](https://choosealicense.com/licenses/mit/).

Any feature requests are welcomed on [GitHub repo](https://github.com/madzadev/calculator).

Calculator with decimals, negative values, percentages.

Calculator GIF

Calculator

Tic-Tac-Toe is a popular two-player game, where users take turns marking 'X'es or 'O's in a 3×3 grid. 

The player who succeeds in placing three of their marks in a diagonal, horizontal, or vertical row is the winner.

### Features

1. Built-in moves calculation
2. Winner detection
3. Reset functionality

### Tech stack

The project is written in [Svelte](https://svelte.dev/).

### Final notes

The project is under [MIT license](https://choosealicense.com/licenses/mit/).

Any feature requests are welcomed on [GitHub repo](https://github.com/madzadev/tic-tac-toe).

Play the Tic-Tac-Toe game against a computer.

Tic Tac Toe GIF

Tic Tac Toe

[2048](https://en.wikipedia.org/wiki/2048_(video_game)) is a single-player sliding tile puzzle game initially written by Italian web developer [Gabriele Cirulli](https://github.com/gabrielecirulli) in 2014.

It's played played on a plain 4×4 grid, with numbered tiles that slide when a player moves them using the four arrow keys. Every turn, a new tile randomly appears in an empty spot on the board.

The objective of the game is to slide numbered tiles on a grid to combine them to create a tile with the number 2048.

### Features
1. Slide tiles on X and Y axis
2. Sum tile values on collision
3. Color scheme for specific values
4. Score keeping
5. Best score memory
6. Winner detection
7. Game over / reset

### Tech stack
The project is created using [Svelte](https://svelte.dev/).

### Final notes

The project is under [MIT license](https://choosealicense.com/licenses/mit/).

Any feature requests are welcomed on [GitHub repo](https://github.com/madzadev/2048).

Slide numbered tiles on a grid to create a tile with the number 2048.

2048 GIF

2048

Memory games comes in different forms and variations.

I decided to go with traditional approach, where users have to remember the positions of the cards and open two exact images sequentially to score points. Once all the cards are opened user is victorious.

I used Unsplash API to fetch images from their site.

### Features
1. Moves tracking
2. Match percentage
3. Win state detection
4. Reset functionality

### Tech stack
The project is created using [Svelte](https://svelte.dev/).

### Final notes
The project is under [MIT license](https://choosealicense.com/licenses/mit/).

Any feature requests are welcomed on [GitHub repo](https://github.com/madzadev/memory-game).


Fun memory game, matching image cards from Unsplash API.

Memory Game GIF

Memory Cards

A player who decides to play rock will beat another player who has chosen scissors, but will lose to one who has played paper; a play of paper will lose to a play of scissors. If both players choose the same shape, the game is tied.

The type of game originated in China and spread with increased contact with East Asia, while developing different variants in signs over time.

### Features

1. Round tracking
2. Score keeping
3. Choice display
4. Computer selection
5. Winner detection
6. Reset functionality

### Tech stack

The project is written in [React](https://reactjs.org/).

Icons are taken from [Icons8](https://icons8.com/).

### Final notes

The project is under [MIT license](https://choosealicense.com/licenses/mit/).

Any feature requests are welcomed on [GitHub repo](https://github.com/madzadev/rock-paper-scissors).

Classic Rock, Paper, Scissors game with nice UI.

Rock Papers Scissors GIF

Rock Paper Scissors

With this app my aim was to be able to check the weather conditions across the world. I used Openweather API to fetch data from their site.

To make it a bit appealing to the eye, I decided to combine it with some icon graphics that correspond to the conditions displayed.

### Features
1. User's ability to search cities
2. Metric vs Imperial system
3. Current local time and date
4. Temperatures and humidity
5. Wind speed and direction
6. Sunrise and sunset times
7. Error handling and loading info

### Tech stack
The project is created using [NextJS](https://nextjs.org).

### Final notes
The project is under [MIT license](https://choosealicense.com/licenses/mit/).

Any feature requests are welcomed on [GitHub repo](https://github.com/madzadev/weather-app).


Current weather across the world using OpenWeather API.