All solutions

What are you most proud of, and what would you do differently next time?

This is my first project with Flutter. I'm really proud to share this with you. The only thing i think i'm missing to achieve the full solution is the hover state for the desktop version

What challenges did you encounter, and how did you overcome them?

Working with widgets was a challenge, coming from HTML and CSS perspective, it wasn't intuitive for the first part, but then things started to click

What specific areas of your project would you like help with?

I'd like to know if there's anything i can do to centralize more my styiling. I feel like i wrote a lot just to make this card and i couldn't find a way to make a Theme that would work for all this project, but maybe there's a solution

What are you most proud of, and what would you do differently next time?

• Protein based macros adaption: In the details of a recipe, you can insert your personal macros and that recipe will be adapted to reach your protein level

What challenges did you encounter, and how did you overcome them?

• Database: i made use of Supabase and Prisma to host and create a consistent relational database for my recipes. I also used Vitest to test my queries.
• Backend: i had a decent grasp of React, so i wanted to give my project a structure with NextJS and Vercel to host it.
• Frontend: i used Tailwind to style my project. Very easy to get into and with the help of a very good design from FrontendMentor i was able to get started.

What specific areas of your project would you like help with?

• Authentication: this would let me choose which users can access the site. Also i could give different permissions to users to let them edit their own recipes, while others can only see them.
• API: ingredients are a bit complex to create and not as user friendly as it should be. Making use of an API would help a lot creating recipes without caring much about macros
• Error handling: i'm not sure how to handle errors in my app. It's not clear what part of the app is responsible for throwing errors.

Hey there! i've uploaded a new challenge!

This time i just wanted to use vanilla HTML and CSS to provide a simple solution for this challenge

I hope you'll like it!

Hi! i made it through this challenge using React!

This calculator was harder than expected, but i think i've made a good working solution

Let me know what you think about it in the comments!

Hi! I built a solution with React and Framer-motion!

This time the challenge provided a Figma file to get a more detailed look to the style of each component, so i've been using Figma for the first time. It's very user-friendly to use and i liked it a lot

To make it all more challenging, but adaptive, i used the JSON to create all the components, so adding, removing and updating the "data.json" changes components

For a more professional look, i've implemented animation with the Framer-motion library for the first time. I'm quite satisfied for my first try

i would like to receive tips on how i can improve my solution

Hi everyone! i made it through this challenge!

The hardest part was to manage states for every component and passing everything to the "add to cart" button to fill the cart list

Hope you will like it!

I would like to get any tip on how to improve my solution!

Hi! I completed this challenge using React!

This looked easier than the last few challenges that i made, so i just worked with components and state to open and close the menu in mobile view

I tried to go with tailwind for styling, but it looked so messy that i decided to go back with CSS modules. Tell me if there is any way to avoid long classname strings or if i'm missing something

Hope you will like it!

Hi! I've made a solution for this challenge using React!

This time i worked with prop drilling to pass switch state to plan components so that they change their plan price when the switch is triggered

Plan blocks are reusable components that accept a "dark theme" class to change their appearance

I would be glad to receive tips on how to improve my solutions

Hi! I made i through this challenge!

This time i managed to use the useState of React to change menu icon onClick

Issue: I couldn't make the intro background shorter than the image it contained

It would be nice to receive any tips to improve my code and my solution

Hi! I made it through this challenge!

I'm currently learning React and i tried to redo this challenge to start with something easy

This is just my first attempt with React and Next.js, so i would like to receive any tips to improve my current and future solutions!

Thanks in advance!

Hi! I made it through this challenge!

Features:

-Components: Follower and overview cards are built from a script instead of repeating HTML, so that one component can be repeated without filling lines and make repetitive code

-Dark mode: I built a switch that changes color scheme if you prefer a darker view

-SASS: everything is built with SCSS to keep things organized and reusable

Hope you will like it!

Hi everyone! i've made a solution for this challenge!

I wanted to create something reusable, that could take multiple reviews, so i made a code in JS that stores testimonials objects and changes content when you click arrows

Using setTimeout, i managed to animate transitions between slides, making a smoother experience, or at least i hope :)

Tell me if there's something i can do better or reduce code to achieve the same solution!

Hi everyone! i've made it through this challenge!

This time i wanted to give the nav bar a little animation in mobile flow, so i worked with setTimeout to make every option appear smoothly one by one

To avoid repeating all the creation blocks, i made a unique JavaScript component that iterates through a list and creates every element. If we had more creations, it would be easier and cleaner to add images and text into the arrays to show a new creation

Hope you like it!

Hi everyone! i've made it through this challenge!

I tried to use a backface to make a good animation

My only issue with this was overriding bootstrap spacing rules when changing to desktop view. Help me if you know a better solution than using "!important"

I hope you'll like it!

Hello! I've made it through this challenge!

This was such a small challenge, so i tried using Bootstrap for the first time

It's still weird how to override properties and use breakpoints, so i made use of "!important" to apply some styles for bigger devices

Tell me if there's other way to achieve the same solution using Bootstrap!

Hi everyone! I made it through this challenge

I have made things more complicated by creating a universal component for the reward list, so adding variables to an array creates new rewards, if needed

I would appreciate any tips on how to improve my solution!

Hi everyone! i managed to complete this challenge!

My only concern is that the dropdown menu part has a lot of code to make it fit both the mobile and the desktop views, so it looks like there is something i'm missing

Is there any way to achieve the menu part with less code? do you recommend a framework like bootstrap to make this easier to tweak with?

Thank you all for the support!

Hi, i've made it through this new challenge!

Working with input validation was the hardest part. I wrote a long script just to avoid wrong inputs so that the amount total couldn't give a NaN error I feel like i wrote too much code just to validate this few components

I would be glad to receive a feedback from you to reduce the script code

Hi! i've completed this challenge!

This was my first time trying to create a component in JS so i don't have to fill an entire HTML with the same element

Making it work with JSON was a challenge too, but i'm proud of how it came out

I've added a small animation when you hover activities to give it a personal touch.

Hope you'll like it!

Tell me if there's any way i could improve my code!

Hi, i've had a lot of fun completing this challenge

This was the first time i've used API starting from scratch, but i think i've got it working

Tell me if you have any tips on how to improve my code!

Hi, i'm happy to share with my solution to this challenge

I've had a lot of fun trying to use the JSON to dinamically size the bars

i hope you'll like it!

Hi everyone! i completed this challenge!

The hardest parts were the date validation and age number animation using promises, but i may have found the right solution

Tell me if there's something that can be improved!

Hi everyone! I've made it through this new challenge!

I made the form responsive validating it using eventListeners on JS

Cards update on user input and reset when the input element is cleared

If form is valid and you get to the "thank you" part, the continue button resets form and cards text so it's ready to receive new datas

I hope you'll like how i split the code in different components to make everything easier tomanage and reuse

I would like to receive any tips on how to improve my solution