All solutions

I first used the useLocalStorageState hook from the react-localstorage-hooks package to store the links on the localStorage.But due to some version conflicts I replaced with an good old custom hook. I also used react query to do the shorten url requests to the API. I'm not the experienced with React Query, but it seems quite similar to RTK query which I've used before. In general, it's a nice fun challenge.

Any tips or questions you might have are welcome!

Well I didn't expect this to be this challenging, I enjoyed it a lot though. I had to rewrite the timer hooks to be able to setup the different timers accordingly and reset the controls when any change happens. The SVG animation was also hard, at the end I just tailored it for tablet and desktop dimensions and scaled it down for the mobile screen size using scale class in tailwind. It's probably better to try regular CSS for animations, rather than trying to use tailwind for everything.

I struggled a bit with the SVGs that sometimes need some modifications in the source to be able to fit correctly in the page. Also, Sass has some issues with CSS grid and makes mistakes using the shorthand version of grid-template. Some images were incorrect, so I had to re-export them from the Figma file.

I still need to work on the animations of the cards. There seems to be issues with backface-visibility on webkit. So I might try another approach.

Any suggestion is welcomed

Designing how to style the page using the validations for the date fields (day,month,year) was the challenging part.

The overlay was the bigger challenge. Mostly adjusting the layers with the icon and the opacity overlay.

In general my challengen was masking the SVG with the gradient so that the nice effect on the card can be rendered.

I struggled a bit styling and importing SVGs within Astro. I initially tried to code the interactivity without JS at all, but there are many issues with pseudo-classes, like :has in Firefox, so I removed the CSS and refactored it back to JS.

I had some issues again with SVGs. Apparently if they have a "fill" property set, you have to remove it to be able to style it with CSS. Also, I had some issues with positioning but at the end I managed to fit the components correctly.

Importing SVGs with Astro for the icons without losing quality and being able to style was the challenging part. I tried to use the design system provided with the figma file, but I wonder if I imported correctly the fonts.

In general I tried to use semantic HTML tags for the basic structure. The first signup page is a section and the notification is an aside element that's hidden initially. I wrote the script code using plain vanilla javascript without any framework. Also, I use preventDefault to stop the submission of the form, so no backend connection is made. The javascript is loaded on the window.onload function and it's separated into 3 sections: elements/document objects, handlers and finally events. I think this generic structure works fine for small implementations like this. Any recommendation is welcome. Thanks!