Inspired by Adrian on dev.to I am trying to complete 100 frontend challenges to improve my skills and learn new things. I will be documenting my progress here. I am planning to use React, TailwindCSS, and Typescript for most of the challenges. I will also try to use other technologies like Three.js, D3.js, and other libraries to complete the challenges. I will be updating this page as I complete the challenges.

1. Profile Card

This is a simple profile card with a user image, name, and description. I used TailwindCSS to style the card and React to create the component.

Rares Sandu

Frontend Developer

I am a frontend developer enthusiastic about building apps, scripts, and web magic. I enjoy cooking and spending time with family and our three cats.

FollowMessage

This is my interpretation of the profile card from the challenge. I used TailwindCSS to style the card and React to create the component. For the code example, you can see it bellow. For generating the wavy background I used SVG generated with Get Waves.

Check the code for the profile card:

2. Add to Cart component

A simple dynamic shopping cart that allows users to add items to the cart. I used React to create the component and TailwindCSS to style the cart.

POLO RALPH

Custom Fit Polo Bear Oxford Shirt

Blue polo with a classic cut. Made of smooth and soft coton

$99.99

-25%

Choose Size

• XS
• S
• M
• L
• XL

Add to cart

This is my interpretation of the Add to cart from the challenge. I used TailwindCSS to style the cart and React to create the component, I also used images from Pexels. For the code example, you can see it bellow.

Check the code for the add to cart component: