All solutions

Hey guys!

Hope you're having a great time working on Frontend Mentor challenges :)

I'm finally back with another lovely challenge that I had a blast working on, though it took me quite a while to finish it for reasons that you'll discover once you see the website and its Github repo :D

Frankly, I still wanted to try out a few more ideas, but at the same time, I had pretty much implemented all the features/customizations I wanted for this project.

Feel free to check it out and let me know what you think works / doesn't work for this project and where I could make further improvements/tweaks! :)

P.S: Thank you, to each one of you who checked out my previous challenge (QR Code Generator) and supported me. I appreciate it a lot and I hope these kinds of projects will also inspire you to try out your own unique and creative ideas! :D

See you in the next challenge - happy coding, y'all! :)

Hey guys!

This is one of the craziest projects I've worked on! :) Nothing prepared me for what was about to unfold with this seemingly simple project :D

Initially, this was supposed to be a straightforward Newbie-level challenge from Frontend Mentor. As far as I can tell, this must've been the simplest and easiest design for a Frontend Mentor challenge. Including the project setup (files, folders, etc), finishing this project required less than 30 minutes.

From what started off as ~25 minutes project, it ended up into a min full-stack project that spanned across hours and used multiple technologies (some of which I was either completely unfamiliar with or was still learning)

There's still some tweaking I'd like to make to it, but for the time being, I think the project is good enough to be reviewed by you guys!

Here are the technologies / tools I've used for it:

• Svelte
• Typescript
• SCSS
• QR API
• GSAP
• VanillaTilt
• Express
• MongoDB
• Mongoose
• Puppeteer
• Heroku
• Vite

Special thanks to @ApplePieGiraffe, @darryncodes, and @skyv26 whose works have really inspired me to keep growing as a developer!

Thanks a lot for checking out my project and see you in the next challenge!

Hey guys! Hope you're having a great time here on Frontend Mentor!

I'm back with another awesome Frontend Mentor challenge - the Project Tracking Intro Component.

I always enjoy building these projects, but I enjoyed building this one even more because it was the first project in which I've used Svelte, Typescript, SCSS, GSAP, and Vite all in one place. All I can say is that I'm in awe at how fast the development has become thanks to Vite and it's really a powerful match coupled with Svelte.

Since most of the project was mainly focused on the design and not any heavy data structures/logic, I'm naturally interested in the feedback regarding the SCSS I wrote for this project and what improvements I could make for the responsive design. I struggled in those regards mainly because of the background shape and devices illustration.

Let me know what you guys think about the project.

Thanks for taking the time to check out my project and see you in the next challenge! :)

Hey guys!

I decided I should work on my CSS Grid skills a bit more and this challenge was the perfect use-case for it.

This project has a lot of technologies in it:

• Svelte
• Typescript
• AJV
• GSAP
• VanillaTilt.js
• SCSS

The AJV and Typescript weren't required for such a project, but I decided I should finally work with Typescript and learn how to implement it in an actual project. I only started learning it two days ago, so I'm definitely eager to hear more about the best practices for this.

Also, there's an issue caused probably by the clip-path property that I'm using with GSAP. The two box shadows I used on the third and last card don't show anymore. If you know a fix to this issue, please let me know.

Hope to hear your feedback soon - thanks a lot! ;)

Hey guys!

I'm back with another lovely Frontend Mentor challenge. This is the last Newbiew challenge on my list and I decided to give it my best shot in building it.

If you're checking out the solution on a laptop / desktop screen, you'll get to see the scroll-based animation that I've implemented. I got the idea for the animations after seeing @ApplePieGiraffe's solution for this challenge. (obviously his solution is much better than mine :D) He's truly an incredible developer and his work has inspired me a lot. If you haven't checked out his work yet, I highly recommend you do.

I had a lot of fun building this project using Svelte and GSAP, even though it was quite difficult at times because it was my first time using GSAP on such a scale and also, it was my first using the ScrollTrigger plugin. You can imagine how many hours I've spent going through the documentation and watching tutorials ;)

The animations aren't yet available on the smaller screen sizes because the layout becomes quite messy. I'll need to see how to fix that. On top of that, I think the code for the GSAP animations can be improved, but since I'm still a beginner with this technology, I'm not quite sure how to approach it.

Any feedback about this or any other aspects of my project would be much appreciated.

Thanks for checking out my solution. See you in the next challenge! :)

Hey Frontend community!

After a little break, I've finally completed another challenge from Frontend Mentor: the Crowdfunding Product Page.

In short, I had a blast building this project using React, Redux, Styled Components, and Framer Motion. There were undoubtedly some moments where I became frustrated because I struggled with the Redux reducers and store, but with each component built and feature implemented, I got closer to a better understanding of how it all works.

I'm still working on improving my code in terms of maintainability and I'd love to know if you have suggestions on how I could do that with my Redux code. For example, I'm using multiple dispatch calls within a click function, but I think it'd be a better practice to have a single dispatch that calls multiple action creator functions.

Feel free to leave any suggestions / ideas you have on what I could do differently / better in my project.

Thanks a lot for taking the time to check out my project - you're awesome!

Hey guys!

I'm back with another little Frontend Mentor challenge. This time I decided to give the Equalizer landing page a shot. Since I took quite a long break from coding, I wanted to warm up with a more reasonable project, but I also wanted to keep it fun and interesting.

Working with different aspects of SCSS to make this project responsive was fun and I got the chance to play some more with mixin and best practices.

So, this was today's project. I recommend you try it out and I can't wait to see your solutions.

What would've you done differently?

Let me know what you think about this solution! ;)

Hey guys!

I'm back with another front-end project. This time, I decided to finally implement Redux in my project and I found it to be an incredibly fun and insightful experience. It was a bit more difficult in the beginning since I was learning on the go, but after I grasped the concepts, it became clear what I had to do.

What would've you done differently in this project?

Let me know your thoughts - much appreciated! :)

Hey guys!

My first fullstack project is finally here and I'm excited to share it with you. There are still a lot of improvements that can be made in terms of code reusability and feature implementation.

What are your thoughts on the project / code? How could I implement better animations? (especially for when the todos render on the page / are added to the list)

Thanks in advance!