All solutions

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

Selecting the stack for this project has been tricky. Originally I picked NextJS. I thought it would be a good idea to create this project full stack from the beginning and I already had used NextJS. Mid project I realized that I needed to learn more about databases and backend. At that point I was more interested in practicing more with React so I decided to just use local storage. Using local storage with NextJS quickly becomes a mess of hydration errors. At that point I decided to just use React and Vite to get more practice building React apps. Further ahead I added React Router to the stack, which brought some additional challenges.

The most important lesson that I have learned doing this challenge is that no matter what stack you pick you're gonna face many difficulties. If I went back I would just keep on with my initial idea of using NextJS and learn more about backend development.

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

For this challenge I wanted to learn how to secure an API key. In the readme of the challenge it's suggested to simply not provide card details to avoid getting charges. I wanted to go the extra mile and learn how this would be done in a real project were exposing your API key is not an option.

My first idea was to use local .env files and avoid committing this to source control. The problem with this approach is that the API keys are still exposed in the front end. Anybody can look in the network tab of the developer tools where the API key is visible in plain text.

My next idea and what I ended up doing was using Netlify functions. Netlify functions allow you to run small snippets of code in the backend without the need to set up a server. This is the reason they are also known as "serverless functions". Netlify functions, along with the Netlify CLI and Netlify environment variables have allowed me to completely hide my API keys or even have the need to store them locally.

I just completed my first Advanced challenge 🎉

Any feedback is appreciated.

This was my first time using NextJS and my experience has been positive.

It was the second project where I used Tailwind. I have to say I didn't think I would like it much before I started to use it. With all the long ugly class names, no separation of concerns, ... But I have to say that I have come around. Here is what I like the most about it:

• No indirection or context switching. I can see what elements have which styles and I don't need to switch between html and css files, scrolling up and down to see where the styles for certain element are declared.
• Not having to come up with names for each element you want to style.
• Using the prettier plugin classes are neatly arranged and easier to visually parse.

Overall I think using Tailwind I can develop much faster.

I just completed a challenge, any feedback is welcome

I just completed a challenge, any feedback is welcome!

One of the challenges was to have the content of the cards being clickable while at the same time containing a button that shouldn't trigger the hover state of the whole card. To me clicking to that area would take you to some page that would contain a breakdown of that category. For that reason I think an anchor would be appropriate. But having a button inside the anchor is not semantically correct. For that reason I decided to make just the title (e.g. Work) an anchor element and make the whole area clickable using the redundant click event technique.

To avoid the button being hovered triggering the hover styles of the whole card I added mouseenter and mouseleave events handlers.

const handleButtonMouseEnter = () => {
  if (content.current) {
    content.current.style.backgroundColor = "hsl(235 46% 20%)";
  }
};

const handleButtonMouseLeave = () => {
  if (content.current) {
    content.current.removeAttribute("style");
  }
};

This could have been solved using the has selector but support is not enough at the moment, with it only implemented in Firefox under a flag. Anyway I included the necessary CSS to be able to remove the event listeners once support for has is sufficient:

.content:has(button:hover) {
  background-color: var(--color-blue-700);
}

I just completed a challenge, any feedback is welcome!

I found this challenge more difficult than expected. Getting the accessibility of the menu in mobile layout right was a challenge. I am happy with the result although I am sure there are things to improve.

I also got to play around with container queries for the first time.

I just completed a challenge 🏅, any feedback is welcome 💬

Here is some neat little trick that I tried for this one. Instead of creating the markup for all the cards, you can just create the markup for one and ask chatGPT to create the rest for you. It works like a charm and saves a lot of time and tedious work.

Any feedback is welcome.

I just completed a challenge 🏅, any feedback is welcome 💬

• I wanted to add a bit of pizzaz so I made the card flip to show the thank you state. What do you think about it?
• I tried to put special focus on accessibility but any improvement suggestions are welcome.
• Any other suggestions are welcome.

I just completed a challenge 🏅, any feedback is welcome 💬

• Since using only placeholders is not very accessible I included dynamic labels, let me know what you think.
• I think the javascript code turned out a bit ugly. How would you improve it?

What do you think about using relative units for images? I am using rems now all the time and here I used them for images too. Sizing images using pixels produces tiny images (relative to the text) if the user has a larger base font size. Of course, images that are not svgs might get pixelated but if someone is increasing their base font size they probably won't be able to see the image at its default size anyway.