All solutions

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

My first approach to the curved pattern in the first two sections was to copy the patterns from the figma file and use picture + source + img to implement it. Then I thought it would be overkill and should there be a simpler way. I experimented clip path, it was too hard and I don't know if is worth to learn svg paths to use with the css path() function.

Then I remembered that border-radius 50% creates an ellipsis curve with rectangles (this is why tailwindcss implements rounded-full with border-radius: 99999px). I went to investigate that and only then I realised that border-radius can get two arguments. With that information I could figure out a solution using border-radius.

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

Due to work, the only thing I've been seeing for the past eighteen months are systems built with Spring Boot + Angular + Angular Material and SCSS.

To be honest, I had doubts about whether I still knew how Tailwind worked. Tailwind, which had long been my preferred method for styling.

As for the project, my idea was basically to get a general idea of folder organization in SvelteKit and understand basic things like 1) where to place assets; 2) how folders work; 3) how to deploy; 4) how TypeScript works.

I ended up having trouble with deployment + TypeScript because the version of TypeScript/ESLint was incompatible with the most updated version of Node on Cloudflare. I simply uninstalled everything related to ESLint, but I would be happy to know if there was an alternative.

Hi community!

This is the first time I collaborate with someone to complete a challenge. Working with @KignaDev was an amazing experience and I've learned a lot.

Feel free to give any feedback. I will surely appreciate it.

I picked this challenge to test an approach to implement the masonry algorithm with React. Although it was not hard, I take six hours to complete this challenge, I was expecting something easier.

My solution is not pixel perfect - and that's fine. And although I refactored my code before submitting, the state management ended up being more messed than I would like it to be.

I used useState hook with Immer to the gallery state, and even now I am not sure if it was a good approach. I mean I could use useReducer but between useReducer and Redux-Toolkit, I prefer Redux Toolkit (or Zustand) or anything else. But I really don't think that the project is complex enough to justify a state management library.

Well, feel free to give a feedback. (Doesn't need to be about the React stuff.) I will surely appreciate it.

(I know there are some problems with hover effects (the main problem is I forgot to implement some of them :)) and my HTML is far from clean.)

In this challenge I created a small express app in order to hide the secret API_KEY from IP Geolocation API.

That's my first time using environment variables on Netlify, then I was not sure how to access these variables on development context. I ended up creating a .env file and used the dotenv library for development. It worked. But, I think it's better I do some more research about this topic. But if someone knows, I will be very glad to hear if I did the right thing.

That's not the first time "I build a bazooka to kill a mosquito", but this solution needs an explanation: usually, I use frameworks to build simple projects because the development process is faster. I mean is much faster to implement a landing page with, e.g., vite + react + tailwind than with html + vanilla css.

However, in this solution, I used Nodejs + Express + Ejs template engine, and the process development was quite slow (the main reasons were netlify dev does not have live reloading and I lost time searching for a good extension for ejs files in vscode).

And as if that weren't enough I had a hard time trying to figure out how to deploy the landing page to Netlify (Express running serverless functions is something pretty well documented, but not with template engines).

But the reason I chose to use Nodejs for this project is precisely because I am studying the deployment process of nodejs applications in Netlify and in serverless functions, in general, and I would like to test with a project as simple as possible.

But despite that, feel free to leave any feedback. I will surely appreciate it.