All solutions

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

In general, I am happy how the solution turned out. May be the most challenging part was implementing the DnD to reorder without causing unexpected behaviors due to the filtering.

Built with

• React / Next.js 14 / Typescript
• useLocalStorage & useIsClient custom hooks
• Dark & Light mode using next-themes, including system-preferences / manual control / localStorage
• UI components from Shadcn
• Reorder component from Framer motion
• Mobile first approach
• Tailwind CSS
• Responsive design with Mobile & Desktop view
• Line-clamp on the todo items with text reveal on hover
• Vertical scroll on the todo list with snap-y behaviors for nice UX
• Minor design changes

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

This definitely was an interesting challenge! As mentioned the reordering feature while having one array filtered 3 times was challenging. The reorder basically takes the original array, applies the new order for each index and then updates the array - this initially resulted in weird behaviors. For example I have Items 1 / 2 / 3 / 4 in my list. Item 2 & Item 3 are marked completed. When I go to the Completed view and reorder those two items, the array get's updated but in the process I lose item 1 & item 4. To tackle this I decided to:

• Add additional logic to onReorder property
• Set 3 different states for the same array
• Use separate tabs for each filter view, instead of using the same list and just change the rendered array based on filtering

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

Any and all feedbacks are welcome!

I would much appreciate any tips & tricks about:

• Improving my TypeScript usage;
• Sharing any "best-practices" that I might have not implemented;

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

In general, I am happy how the solution turned out. I though this will be tops 1 hour to build, but it turned out there are some tricky parts which was very interesting to tackle.

Built with

• React / Next.js 14 / Typescript
• useCopyToClipboard custom hook
• Custom Range Slider
• Switch component from Shadcn/ui instead of the design checkbox
• Mobile first approach
• Tailwind CSS
• Responsive design with Mobile, Tablet & Desktop view

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

There are many excellent range slider components through the existing libraries but for practice I decided to build one from scratch. The tricky part to be honest was the styling. Also I have quite the Prop drilling in my code (instead of using context for state mgmt), but this was intentional so I can practice passing props while using typescript.

The logic for generating the password was also something I had to brainstorm a bit and do some googling and asking AI chatbots, but I think it turned out fine.

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

Any and all feedbacks are welcome!

I would much appreciate any tips & tricks about:

• Improving my TypeScript usage

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

In general, I am happy how the solution turned out. My main focus with this project was to practice fetching data. For this purpose at first I implemented server side data fetching, but later had to switch to client side in order to add the button functionality.

Built with

• React / Next.js 14 / Typescript
• useFetch custom hook
• Custom Loading Spinner
• Mobile first approach
• Tailwind CSS
• Responsive design with Mobile, & Desktop view

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

It was surprisingly simple to fetch data on the server side, but adding interactivity was a headaches... so at the end I switched to fetching on the client side.

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

Any and all feedbacks are welcome!

I would much appreciate any tips & tricks about:

• Server side fetching and serverless functions/ server actions

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

In general, I am happy how the solution turned out. My main focus with this project was to practice charts in react & start working with TypeScript.

Built with

• React / Next.js 14 / TypeScript
• Mobile first approach
• Tailwind CSS
• Responsive design with Mobile, & Desktop view

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

As this was my first time using recharts library it was a bit time-consuming to get some of the styles right, but I think this is fixable with more practice.

Using TypeScript for the first time did get a bit tricky, so I decided to go with the simplest implementation of types etc.. instead of trying to pull off some overcomplicated best practices, which might not be necessarily needed for the scope of this project.

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

Any and all feedbacks are welcome!

I would much appreciate any tips & tricks about:

• Charts in React;
• TypeScript in React.

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

In general, I am very happy how the solution turned out. My main focus with this project was to practice the use of browser local storage & to learn more about custom hooks.

• React Context for state sharing;
• Custom Hooks for WindowWidth & LocalStorage
• Build from scratch Carousel/Sliders with different logic for mobile and desktop in order to achieve more native experience. TBH there are many great pre-build components for those, but building one from scratch gives a lot of practical knowledge

Next time I would like to be faster and actually plan the steps a bit more before starting to code.

Built with

• React / Next.js 14
• Mobile first approach
• Tailwind CSS
• Responsive design with Mobile, & Desktop view

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

There were some hiccups when building the img carousel or the hamburger menu due to lack of practice, but may be the most interesting challenge was the hydration error due to server side rendering for my cart badge.

Basically the server sees the cart as empty therefore the value in the badge is 0 and not rendered, while there is a different value stored in the browser localStorage. This leads to hydration error.

My way out of this was to not render this badge on the server, using useState and useEffect combination

const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);
// On client side first render - set's the value to true

{* Other Code *}

{isClient && ( badge jsx code.. )}

// renders the badge only if isClient is true, meaning on the client side

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

Any and all feedbacks are welcome!

I would much appreciate any feedback related for better solving hydration errors/warnings

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

In general, I am very happy how the solution turned out. I decided to challenge myself even more and implemented the following:

• Dynamic notifications loading, instead of hardcoded html;
• Universal template for each notification item, that adapts based on the data passed for the respective notification;
• Added functionality to click on unRead notification so it can be changed to Read.

Next time I would like to be faster and hopefully include more real life scenarios and best practices.

Built with

• React / Next.js 14
• Mobile first approach
• Tailwind CSS
• Responsive design with Mobile, & Desktop view

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

I am not very experienced with state managements libraries in React, so I used the "natural" parent to children relationships.

I hope the code is fine enough, but in the processes I had some issues when implementing the logic for mark all as read and click to mark as read.

Thankfully this was very rewarding once completed and I am happy with the result.

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

Any and all feedbacks are welcome!

I would much appreciate any suggestions that will update my code to the "best-practices" and make it more efficient and easy to maintain!

----- Feedback Welcome -----

Built with:

• React / Next.js 14
• Mobile first approach
• Tailwind CSS
• Components from Shadcn UI
• Custom tweaks on the design solution
• Responsive design with Mobile, & Desktop view

I decided to add a carousel navigation instead of the original challenge view. I don't know if this leads to better user experience, but surely was a nice exercise! I ended up using the Shadcn ui components for card, carousel and switch (toggle) - they surely are nicely done, but got to admit... it takes time to fully adjust them to the specific project design.

Hope you guys like the solution, and as always any feedback is appreciated!

Most Wanted 📜

Any feedback to help me improve my solution or optimize the code!

----- Feedback Welcome -----

Built with:

• React / Next.js
• Mobile first approach
• Tailwind CSS

Fun little challenge to complete fast and get a small confidence boost.

Side note: Great job to the UI team - the design it's simple, but very modern, clean and aesthetically pleasing!

Most Wanted 📜

Any feedback to help me improve my solution or optimize the code!

----- Feedback Welcome -----

Built with:

• Semantic HTML
• Mobile first approach
• React / Next.js
• Tailwind CSS
• Fetch
• Loading Skeleton
• Responsive design with Mobile & Desktop view

Hi guys, I tried to challenge myself even more and simulated an API fetch using local data.json file and useEffect. Also I added timeout of 1sec for the data fetch, so I had an opportunity to implement a Loading Skeleton as well.

I am sure, there are some optimizations to be made for my code so every possible feedback is welcomed and appreciated!

P.s. I could not implement a SSR (Server Side Rendering) or SSG (Static Side Generation)... If anyone has insights on how to update the code, that would be amazing!

Most Wanted 📜

Any feedback to help me improve my solution or optimize the code!

----- Feedback Welcome -----

Built with:

• Semantic HTML
• Mobile first approach
• Tailwind CSS
• React & Next.js
• Responsive design with Mobile & Desktop view
• Dialog Modal for "Thank you" card

This is my first non-tutorial react & next.js app. I tried to make it good but surely there are many optimizations to be done, so please do not hesitate to share your tips!

Most Wanted 📜

Any feedback to help me improve my solution or optimize the code!

----- Feedback Welcome -----

Built with:

• Semantic HTML
• Mobile first approach
• BEM naming
• CSS Reset and custom variables used
• Responsive design with Mobile, Tablet & Desktop view
• Grid & Flexbox layouts

Most Wanted 📜

Any feedback to help me improve my solution or optimize the code!

----- Feedback Welcome -----

Built with:

• Semantic HTML
• Mobile first approach
• BEM naming
• CSS Reset and custom variables used
• Responsive design with Mobile, Tablet & Desktop view

Most Wanted 📜

Any feedback to help me improve my solution or optimize the code!

----- Feedback Welcome -----

Specific For The Challenge:

It took me far longer than I hoped, but I finally realized that for layout positioning it can be handy to use

transform: translateY();

Built with:

• Semantic HTML
• Mobile first approach
• BEM naming
• CSS Reset and custom variables used
• Responsive design with simple custom hover based on the screen size

Most Wanted 📜

Any feedback to help me improve my solution or optimize the code!

----- Feedback Welcome -----

Specific Question to the Community:

Hi guys,

In the Hover section of my code, I have commented out the CSS nesting part, as it was behaving weirdly in Safari (the cards were growing on Hover, but not returning to the original size afterwords). I am using the latest Safari version and based on the info checked - it is supposed to support the CSS nesting. Any ideas of what & why went wrong?

Built with:

• Semantic HTML
• CSS3 Accessibility in mind
• Mobile first approach
• BEM naming
• CSS Reset and custom variables used
• CSS Pseudo elements for styling

Most Wanted 📜

Any feedback to help me improve my solution or optimize the code!

----- Feedback Welcome -----

Built with:

• Semantic HTML
• CSS3 Accessibility in mind
• Mobile first approach
• BEM naming
• CSS Reset and custom variables used

Most Wanted 📜

Any feedback to help me improve my solution or optimize the code!

----- Feedback Welcome -----

Specific Question to the Community:

Hi guys,

At the moment, the hover/focus is making the button background to be transparent, therefore matching the parent background. But I am wondering if there are other good or better options to achieve this effect.

Built with:

• Semantic HTML

• CSS3 Accessibility in mind

• Mobile first approach

• BEM naming

• CSS Reset and custom variables used

Most Wanted 📜

Any feedback to help me improve my solution or optimize the code!

----- Feedback Welcome -----

Built with:

• Semantic HTML

• CSS3 Accessibility in mind

• Mobile first approach

• BEM naming

• CSS Reset and custom variables used

Most Wanted 📜

Any feedback to help me improve my solution or optimize the code!

---- Feedback Welcome -----

Built with:

*Mobile first approach

*BEM naming CSS Reset and custom variables used

*CSS Pseudo Elements used for styling

Any constructive feedback is welcomed and appreciated!

---- Feedback Welcome -----

Built with:

*Semantic HTML

*CSS3 Accessibility in mind

*Mobile first approach

*BEM naming CSS Reset and custom variables used

*CSS Pseudo Elements used for styling

---- Feedback Welcome -----

Built with:

• Semantic HTML
• CSS3
• Accessibility in mind
• Mobile first approach
• BEM naming
• CSS Reset and custom variables used

Hi Guys,

I built this using flex box only as a layout tool. I would greatly appreciate any suggestions (constructive feedback). I also mapped CSS custom variables as they have many advantages in my opinion.