All solutions

Welcome to Game Zone 👾

Well well well, looks like I've got another project to add to my portfolio. This one's a doozy, let me tell you. When I first started, I didn't have a clue how much work was ahead of me. But, as they say, ignorance is bliss. And I must admit, I'm feeling pretty pleased with myself now that it's all said and done.

I wanted this project to be the epitome of a social media platform for gamers. And I daresay I've succeeded in that regard. I used some new toys in this project, like React Query. It's a real treat to work with. I also got to flex my muscles with Firebase and Framer Motion. I also was able to deepen my understanding of TypeScript. I can honestly say that this project took my skills to a whole new level.

Now, I'm not one to rest on my laurels. I've got plans for this project, big plans. More functionality, more improvements, you name it. I'm not done yet. And let me tell you, it wasn't always going to be a platform for gamers. Oh no, this project started as a social media site for book lovers. But I soon discovered that the books API I was hoping to use just wasn't up to snuff. So, I pivoted and here we are.

In conclusion, this project has been one wild ride. And I'm thrilled with the end result. It's proof of my prowess as a web developer, and I'm eager to take on more challenges like this one in the future.

And yes, you can leave your feedback in the comments' section 👨🏻‍💻 Cheers 👾

This was a great project to practice working with time, user inputs and multiple themes. I chose to use React context for state management, because it's not a massive app and I didn't want to over-engineer it with redux or any other state management system. As I already mentioned in one of my previous projects, Tailwind makes it really easy to build multi-theme websites, and in general it simplifies styling of the page. The more I use TypeScript the more I understand how it's getting more popular day-by-day. As always, I wanted to add my personal touch to the project, so I added some sound effects to enhance the interactivity of the app. Also, this will actually help to know when the time's up (I won't spoil anything anymore, go experience it yourself). I also didn't change dials for number inputs and left it as browser defaults. Why? Because of inconsistency of the browsers, some browser won't even hide the default dials, so it becomes very annoying to interact with the app when there are 2 types of dials. Other than that, I loved this project a lot, hope you will too.

Feel free to leave feedback or suggestion in the comments' section 👨🏻‍💻 Cheers 👾

Hey lovely mentor community 👋🏻

The main purpose of this project was to practice my TypeScript skills. To me, it seemed a great project specifically to practice TypeScript because there was a lot going on in terms of types. Before using TypeScript, I thought that it's going to make things difficult, because my code will become more verbose and hard to read. On contrary, the code may have a couple more words, but it will definitely help you to understand of what the code is supposed to do. There's much more to learn in TypeScript and to practice it as well. However, for the first project, I think this was perfect.

Feel free to give some feedback, especially on TypeScript, see you in the comments' section 👨🏻‍💻 Cheers 👾

Hey there 👋🏻 I'm back with my 40th solution on Frontend Mentor 🥳

This is my very first full-stack application, and I'm really happy how it came out. With this project, I learned not only Firebase and user authentication. But also improved my React skills, and got more comfortable working with NextJS. So, let's start from the beginning. When I saw this project, I liked the whole concept, because I had so many challenges in one application. However, I knew that if I'm going to build it, then it has to be full-stack. Otherwise, it loses the whole point and there won't be much challenge left other than making the layout as close to the design as possible. Therefore, I went researching on how to build full-stack apps without back-end knowledge, because I knew that learning back-end would take a pretty long time. I already knew a bit about Firebase and what it does, but I never had a chance to get my hand dirty with it. So this was a perfect opportunity to learn Firebase and achieve the main goal of the project. It took me a couple of days to get to know Firebase, after reading their docs. And watching a bunch of old and new YouTube tutorials, crash courses, etc. I slowly started writing my code and with every new piece of information and knowledge, improved my Firebase skills and code's quality. After getting all the functionality done, I started working on the layout and thanks to TailwindCSS I made it quicker and easier. TailwindCSS's typography was a life changer, and without that I might've spent a week only trying to get the markdown's styles correctly. And I'm not even talking about how easy it makes to add dark mode in your website. Of course, building this project literally from scratch, meaning creating a whole "library" to deal with markdown would've made this 10X harder, and thanks to open-source project that make our lives 10X easier. In this case, thanks to react-markdown for making this cool project that lets you add markdown editor in your project and customize it so easily. I'd never think that one day I'll need a library that will help you synchronously scroll two divs at the same time. But here we are my perfectionism made me search for a solution for that particular problem, and it's called react-scroll-sync. It's possible to create a such thing on your own, but why struggle when such a cool thing already exists. For the modals, alerts and switch buttons, that would've taken a pretty long time to build on my own, let alone make them accessible, I went for Flowbite. Easy to use, customizable, and more importantly accessible. I also added some transition to make things smoother, with Headless UI transitions. Lastly, although it took me more than expected to build this project, I'm really happy and proud of the way it came out, and the things it taught me along the way that I could never learn otherwise!

Feel free to leave your feedback in the comments' section 👨🏻‍💻 Cheers 👾

This project helped me to learn and practice manipulating states in React. Although, I used useReducer in the last project, I left like I need more practice with it. So, to-do app was a perfect opportunity to play with useReducer a bit more. I also used context for the first time, createContext and useContext hooks were pretty easy to use. I felt kind of lost in the beginning, but then got back on the track with them. Thanks to TailwindCSS implementing dark mode was really easy. And with the help of custom context that I made to toggle the theme, everything felt way easier than if I tried to do it with pure CSS or styled-components. So I can surely say that TailwindCSS is becoming one of my favorite, if not the most favorite, tool in terms of styling technologies.

One of my favorite projects that and a project that I wanted to create since day one of learning web development. It feels ten times cooler because now I'm built it with modern tools such as: React, TailwindCSS, etc. TailwindCSS came in handy to make all the themes and change the colors easily. I feel like every other option out there, such as using CSS :root variables would've made the matter a lot harder than it is. What comes to the main functionality of the app, I was planning on making it with just useState, but once I managed to do that pretty easily, I wanted to make this a bit more challenging. So, I went to research useReducer, after a bunch of videos, articles and reading the docs, I managed to build it with just useReducer. Will definitely use useReducer in the upcoming projects. As an addition I added a small section in the main display, that will show the previous number, current number and the operation, so the user doesn't have to guess what's happening behind the scenes. I hope you'll enjoy using it as much as I enjoyed coding it!

Don't forget to leave your feedback in the comments' section 👨🏻‍💻 Cheers 👾

This was my first Intermediate project, and I'm really excited about the stack that I used. It wasn't a really big project, but it was big enough for Tailwind CSS. I used Tailwind CSS before in a small project, however, this time around it was a completely different experience. Although, I like Tailwind CSS a lot, I don't think one can use it in each and every project. Sometimes, I want to take the control in my hands, and in that case styled-components come to help. In brief, a cool project, that helped me to know Tailwind better and decide in what type of project I'd like to use it in the future.

And as always, if you have a feedback or suggestion, you can leave a comment 👨🏻‍💻

P. S. I intentionally didn't implement light box gallery, because it seemed out of context for me. However, I did a small similar implementation in codesandbox, you can check it out here

This was my first challenge completed with Tailwind CSS. As most of the people, at the beginning, I was skeptical about Tailwind CSS, but after playing with it for a while I decided to give it a try in one of the challenges. Since this was I small challenge, I decided to add a bit more functionality, so I created a data.json file and included some of my previous projects, their screenshots, links to live website and repository. I think it came out pretty cool. And yes I liked Tailwind CSS, I'm planning on using it on a bigger project.

If you have any feedback, please let me know in the comments' section 👨🏻‍💻 Cheers 👾

This wasn't the first time of me working with API, but a similar project was on my list for a while. Now, thanks to Frontend Mentor's good-looking design, I've got a random Stoic advice generator that I'm using on a daily basis. Although the initial API was different, I wanted to build something that my friends and I will use on a daily basis. And when I add the website to my phone's home screen, it feels like a legit app. I'm pretty pumped on this, and as would Epictetus say, "He is a wise man who does not grieve for the things which he has not, but rejoices for those which he has.".

If you have any suggestions, leave a comment 👨🏻‍💻 Cheers 👾

Right after seeing this project, I knew what I wanted to do with it and what I wanted to add to make it more functional. Although it took me a bit longer than I anticipated, I got the result I desired. I'm not much of a designer, but I tried to make the input panel as close to the original design as possible. The most challenging part of this project was creating a canvas from the generated card and making it downloadable. And thanks to a couple of packages, I managed to accomplish, which seems to be the main goal of the project.

Feel free to leave your feedback in the comments' section 👨🏻‍💻👾

This small but really cool project has taught me a lot and helped me to practice my newly learned React skills. I've worked with class components before, but working with function components seems to be a lot cooler. The code is more concise and easy readable. When building stuff with Vanilla JS, I was used to making everything by myself, however, now that's not the case anymore. It's not that I stopped liking making things by myself, but I think that I don't have to know how to write a code that'll generate a QR code, when I can easily add that functionality in my React project. This is just the beginning, but I can surely say that I already like working with React a lot!

This is my very first React project, so if you have any suggestion or feedback, make sure to leave a comment 👨🏻‍💻 Cheers 👾

P. S. It feels so good to be back!

That's it, this is the last challenge in JUNIOR level 🥳, and I managed to finish the whole section within a month. Which also means that I've reached my goal of finishing all projects in JUNIOR level before the end of the year 🤩 I'm really excited about this and what's coming next, in terms of projects and all the cool stuff that I'm going to learn and practice. Before starting the next level, I'm planning to learn React and start the upcoming projects with it, because I feel quite confident in Vanilla JS and DOM manipulations. So, I don't want to miss the chance of practicing React with all those awesome projects in INTERMEDIATE level. I wish you all happy holidays and happy coding 👨🏻‍💻 Cheers 👾

If you have suggestions, drop them in the comments' section 👨🏻‍💻 Cheers 👾

This project brought me closer to the end of the JUNIOR level. There's only one project left and a couple of days till the end of the year. Which means that I'm so very close to achieving my goal of finishing every challenge in this JUNIOR level. Not a lot to say about this project, the only challenge I had was the pattern image, but it wasn't much of a challenge at the end of the day. One more challenge and I can call it a year!

If you have any suggestions, feel free to leave them in the comments' section 👨🏻‍💻 Cheers 👾

The overall layout was simple and easy to put together, the only tricky part was the background pattern. As for the last couple of projects, I added some IntervalObservers as well. I really like how they can make a single page simple layout to be more interactive. That's why I tend to add some simple animations ever since I've learned about this technique. In brief, fun and cool project, I'd also like if it had a theme switcher from dark to light. I'd implement it by myself, but I still have two projects left to do.

Got some feedback? Feel free to leave a comment 👨🏻‍💻 Cheers 👾

There's not much to say about this project, other than it was really fun to put together. I like such projects where you can take a full control of BEM methodology. For example, the blocks in the middle section are identical, the only difference is when on the desktop layout one of them is reversed. So by adding a modifier class, one can easily change it. Till the end of the year, 3 projects left to do. On to the next one!

If you have any suggestions, comment them 👨🏻‍💻 Cheers 👾

P. S. ATTENTION

Hey there, before you jump in to check out the solution, I just wanted to let you know that I've started to write articles on Medium, and my first article should be up soon. If you have an account, and you like what I do here, please consider following me on Medium, because I'm also going to write some articles that will teach a bunch of stuff related to Frontend Mentor's projects.

Here's the link to my Medium's page

Thanks in advance ✌🏻

I liked the layout of this project, it was pretty simple and had a lot of white space, which is one of my favorite aspects in web design. I didn't necessarily learn much, I should say that I practiced more. I practice more on scroll-in animations with JS. Again, nothing crazy, I just thought this is another great opportunity to practice some new skills and build a good fundamental knowledge about them with these simple projects.

Leave your thoughts in the comments' section 👨🏻‍💻 Cheers 👾

In the Blogr Landing Page, there were sections similar to this project. The image was slightly out of the screen and when I was first implementing it, the part was a bit frustrating for me. However, that experience helped me to build this project a lot faster and a lot cleaner. This was the last small project of this level, the rest are whole landing pages. And I've got only 5 projects left to finish this level completely. I'm going to finish them by the end of the year.

Leave your thoughts in the comments' section 👨🏻‍💻 Cheers 👾

Another simple project to practice some other skills other than layout. I've been putting a lot of work towards practicing animations. And this project was not an exception. I could finish the project with the bonus challenge and build it with HTML and CSS. However, I really wanted to make it more interactive. Every developer knows that when you want to make something interactive, JS is the ultimate tool for that. And adding these animations might have been possible with the checkbox hack, but I wanted something more professional.

If you've got a feedback or suggestion, leave a comment 👨🏻‍💻 Cheers 👾

This project helped me to experiment with some new ideas about layouts. I've experimented with containers and how to position them correctly, so I can control it from a single place. Another thing that I wanted to accomplish with this project was to add some scroll-reveal animations with JS, I was expecting it to be a lot more complex with Vanilla JS. However, it turned out to be a single API called IntersectionObserver that will help you to add the stuff. I didn't do anything crazy, but definitely got some practice and had some fun with it. That pretty much was the main goal of this project, and I'm glad how it came out. For the future project, I'll most certainly implement similar things. Moreover, I'll try to come up with more complex animations and how to achieve them with Vanilla JS. Super excited about this feature and how it can help to make the website come alive.

Got some feedback, comment it 👨🏻‍💻 Cheers 👾

I learned a lot of new and awesome stuff, and I'm really pumped about how this project came out. At first, I was wandering around the Internet to find an article, a video, something that will help to help me to build this project with SCSS and its features. However, if you've done a similar project, you know that most of the tutorials out there suggest using CSS variables. I didn't want to use that technique, since it would make my code pretty messy and mixed up with two technologies, CSS and SASS. So, I kept searching, and I ran across a couple of articles, which were really helpful, but they were lacking a couple of details. Finally, after hours of testing and reading, I came up with my own way of accomplishing this concept. I used SASS, mixins and I've got to admit that this came out to be a lot easier than I anticipated it to be. Although it took a several hours and bunch of small projects in CodePen to test things out before coding the actual project, but it was all worth it.

Feedback? leave it in the comments' section 👨🏻‍💻 Cheers 👾

Believe it or not, this was my first time building a slider. Whenever I'm going to build something for the first time, I always try to conquer the challenge by myself. I highly suggest you do the same, before jumping into YouTube or Google to find solutions. First, try to come up with a solution that just works, and doesn't matter how messy your JS looks at the moment. Next, try to refactor that messy code, so that when you need to work on that project again you can figure out what is what just in a glance. Lastly, if along the way you've come across a problem that you cannot solve by yourself, then try using Google or YouTube to figure out what you did wrong. And trust me, this simple process will help you a lot. If you're someone who's trying to come out of tutorial hell, then you should definitely stick to this routine. Otherwise, you'll always be watching others' videos on YouTube and copy and paste their code from CodePen or GitHub repo.

You already know what to do, if you have any suggestions 👨🏻‍💻 Cheers 👾

Always loved this fun little components that are just there to practice all the skills you've got before (of course if this is not your first project, and you've been nailing some challenges for a while). For me, the main challenge with this small projects is to get them as close to the design as possible. And every time I get thrilled like the first time when my project looks really close to the design.

Feel free to leave some feedback 👨🏻‍💻 Cheers 👾

This was the fastest project that I've done on Frontend Mentor. It took me literally 2 hours to finish the whole thing with animations, and responsiveness. However, I understand that this is the result of daily practice and nothing makes me happier than seeing these results.

If you have any suggestions, feel free to drop them in comments' section 👨🏻‍💻 Cheers 👾

I really enjoyed this one, because it was a mix of a lot of things with some small, but nice challenges along the way. I also liked the modern and clean look of the design. Not cluttered, straight to the point. I've realized that these challenges not only help me to practice HTML/CSS/JS skills, but also train my eye for some good design. Because as a front-end developer, you need to have some basic understanding of UI/UX design. In brief, I achieved all the goals within the project, provided by Frontend Mentor and also the ones that I came up with. On to the next one!!!

If you have any feedback, leave it in the comment's section 👨🏻‍💻 Cheers 👾