All solutions

Just to pass some time. Used Next.js 14 / Tailwind / Typescript / useSound hook.

:)

Finding the right time to tackle these challenges is always a bit of a hurdle.

For this particular project, I opted for the cutting-edge Next.js version 14, incorporating minimal Typescript type checking. My go-to for styling, as always, is Tailwind CSS.

To enhance the user experience and prevent unnecessary re-renders during text input, I integrated Lodash's default debouncer.

Additionally, as users input their height and weight, I've included a feature that returns the recommended weight based on their height.

Cheers! 🥂

First guru challenge :)

I've observed that incorporating animations can significantly increase the overall weight of the project. I've experimented with both framer-motion and direct manipulation of SVG files.

Also, instead of redirecting the user to another page, I've opted to make a modal which seems more similar to real pages (imho).

Initially, my intention was to develop a full-stack application. However, given the current job market conditions, it seems quite challenging to secure a position. Therefore, I have decided to specialize exclusively in front-end development until I gain more experience in the field.

Hi fellow coders!

I finally had some time to code again this month and complete this challenge. 🎉

I used my favorite stack, as usual: Next.js 13.4.7 (completely hooked on using Next.js.. it simply rocks!) + TypeScript + Tailwind. I'm still adjusting to TypeScript, but I'm finding it progressively easier to work with, and its invaluable feature of providing immediate feedback is incredibly helpful in spotting any errors or inconsistencies.

For this project, I decided to keep improving on how to create a Full Stack application with authentication using Clerk.

The entry points in my app are authenticated, but unfortunately, all users have access to the same data in the database. So, if user A changes the bookmarks, it will also affect user B. Surely it's not ideal but it was a good learning experience. Seems like Firebase and Next.js 13 don't work well together, especially in terms of SSR. For the next challenge, I plan to use PlanetScale or Prisma to deploy to a proper database.

There are a few small improvements that could be made, such as opening a modal to play the video instead of embedding it directly in the div.

Quite happy with the results. 🥳🎉🎊

If you have any suggestions, please do so.

Also, feel free to follow me on Twitter: https://twitter.com/ackdeckard

I approached building my first full stack application with a primary focus on dynamic data serving rather than the interface design.

Although I was new to Typescript, I found the Matt Pocock courses extremely valuable and highly recommend them.

For image storage, I decided to utilize Firebase Storage, while Firebase Database was chosen to store all the application's data.

As always, I relied on Tailwind for styling the entire project.

My favorite project so far!! 😁 It required a lot of thought and attention to detail. I plan on continuing to improve it over time.

The project uses specific arrays and objects to serve all the content, which simulates what a server might return. This means that adding more items is as simple as adding them to the desired array, without the need to change the code.

To make the code cleaner, I used the Context API instead of passing props everywhere. The core of the website is based on three components: <NewStory>, <ReadStory>, and <ViewFeatures>.

This was my first time using React-Aria, specifically the Button component. I believe that the website is fully responsive and should work well on most devices.

Also, my preference is to use Grid instead of Flexbox so I'm heavily using it everywhere.

Lastly, I used the /app directory from Next.js 13 (actually running a canary version of it cuz of some Nextjs bug that appeared during the coding 🚀)

My next goal: ♿ - enhance the accessibility by adding more React-Aria components.

First time doing a project of this magnitude! 🎉🥳

Do you have any suggestions? Please, be my guest and suggest improvements!

Woohoo, I'm so excited to share my advanced challenge 🎉 🥳

I've learned a lot of useful things doing this exercise - never used Framer Motion before and let me tell you, figuring out how many props is enough was a real head-scratcher at times.. also added small extra bits like a proper logo, sounds and an autostart which makes more sense, so you don't have to keep pressing a button after each interval.

I stuck to my go-to stack - React, Next 13, and Tailwind. They never let me down!

Unfortunately, I'm still grappling with a pesky bug. When I pause the timer and restart it, the animation gets out of sync with the timer. I think useEffect might be the culprit here, but I'll get it sorted eventually .... good enough for now. 😌

Also: the colors are not looking good in edge/firefox.

If you have any suggestions, please be my guest!

Pablo

So, I finally bit the bullet and got myself Frontend Mentor premium, and man, it's such a game-changer! Having access to the design file has made everything so much easier.

Building this dictionary using React, Tailwind, and NextJS 13 was quite the adventure. I mean, there were a ton of little details to figure out, but the end result is totally worth it. I'm seriously stoked with how it's looking right now.

I generated all the different sections dynamically. Some words have adverbs, nouns, and adjectives, while others barely have anything.

Used a couple of different hooks, also first time that I've used useSound to play the specific word pronunciation.

Overall, I'm just feeling really good about this whole thing.

(Except abusing and adding a bunch of things in layout.jsx which is probably a BIG no to do 🤣).

If you have any feedback, please do so :)

Regards, Pablo

My first Intermediate Project! I've decided to jump directly to intermediate ones to better sharpen my skills.

I've done it using NextJS 13 and the updated appDir features. It took me a long time to figure out how to do it, especially the variable background images if you add the transparent header in the RootLayout - as I would have to attack my <body> tag to change it. I resorted to using usePathname and checking which path I'm currently in. What's a better way to achieve this? The use cases using Next13 are scarce so I doing it the way it works (and probably not the best way).

To change what's shown on the page I relied on the useState variable.

onClick -> setChange(index) -> update the page.

The fonts are configured using CSS variables + Tailwind, for example:

const barlow = Barlow({ subsets: ["latin"], weight: ["400"], variable: "--barlow", });

and then sending it to <body> via ${barlow.variable}

Overall, I'm happy with how it is right now! If you have suggestions or feedback, please do it.

Changing from show ip ospf 1 to :wq is not quite easy but surely it will be a worthwhile adventure :D

Hi! 🙌

I'm using useEffect hook to update the Notifications counter and instead of creating a static page, I have decided to simulate a "dumb" data file with all the necessary information and put it on a useState variable.

It updates everything based on that file, from the date the action happened to verify if the notification has been viewed or not. It's possible to mark everything as read or simply clicking on the notification.

I have tried to use more server-rendered components but not quite there yet - hydratation errors popped everywhere so I changed everything to be client rendered.

Surely there's lots of improvement to be done but I'm happy with how it is right now. 🎈🎉

Also, I am quite familiar with Tailwind now and seriously thinking about purchasing the Tailwind UI. As someone who wants to do FrontEnd, it seems to be a superb investment (and no, that's not a free ad hehe ).

If you have any suggestions on how I can improve my code, please do so! 🙏

Pablo

My first project in the Junior category!

For it, I have used the experimental Appdir feature in Next13 and styled everything using Tailwind.

There are five components:

<MainBody />

<Categories />

<MostViewed />

<NavBar />

<NewArticles />

There are a lot of improvements to be done in the NavBar. For example, there's a bug if the user keeps the mobile menu open and increases the window size. I'll tackle it someday tho :D

Next13 is incredible <3

As usual, any improvements you could provide, please do so! Thanks, Pablo

My last project on the novice category - every project has its perks, so I set the goal to do all of them (at least in the Free tier)

On to the Junior level we go! 🎈🎉

I have done this exercise to learn how to properly deal with SVG images using Tailwind.

Just one challenge left in the Novice level 🎉🥳

:)

I've re-used some of the components from the previous exercise.

To verify the fields, react-hook-form comes in clutch once again.

My question for this exercise: I'm repeating the same code in the <input ...../> part four times. They're quite similar, so would it make sense to create another component? Will it affect the overall performance of my app by doing so as I'll be calling the component to render it and also calling my <Errors ... /> component four times.

My </Errors /> component takes a prop like so:

• if it's a non-email field: <Errors word={"Last Name"} />

• if there's an email field: <Errors email={"true"}

and then render it conditionally in the component below:

{props.email ? ( <div>Looks like this is not an email</div> ) : ( <p>{props.word} cannot be empty</p> )}

Any improvement and feedback you could give me, please do so :)

Only 4 novice exercise left 🎉

Hey!

For this project I've used the package React Hook Form to deal with the form validation and errors.

I had a question during the development that I couldn't understand: how to reproduce the background image the way it's shown in the design file. It doesn't look like the svg provided lol (repeated? stretched? cover?... urgh).

Anyway, 5 projects to go until i start the Junior's project.

Tyty

Simple project to get one step closer to complete all the novice exercises :)

That was an incredible exercise to do it via react components!

I've created two components:

• <Stars /> to generate the stars section and also the number of stars
• <BuyersCards /> to generate the testimonies card

Everything is pulled via .JSON file including the number of stars to be created.

There was lots of learning to do on how to do it via NextJS using the new appDir folders. Also, even the simple example created by the "create-next-app@latest" has Hydratation errors poping aaaaarrrrrgh.

I'm super glad on how I've done this exercise!

But, as usual, any feedback you can give me, it'll be greatly appreciated.

Thanks, Pablo (and follow me on twitter pls :D @ackdeckard )

That required a bunch of learning not specifically on the project requirements but on how to achieve the desired effect using Next13 and Tailwind.

I had to download an external package - React Responsive to determine if the device was Mobile or Desktop. There's only two possible layouts tho. Also using Next/Image and Next/Link.

My questions:

• Why does it make a weird effect the very first time I click the button but not the subsequent times? I'm using my components improperly? I had to set everything to "use client" because of some Hydratation errors that keep poping. That's the reason?

• The way I've changed the color of the Arrow icon is by using a conditional and then applying mix-blend-screen to it if my state changed to true:

const arrowColor = clicked ? "mix-blend-screen" : null;

Anyway, first time doing it via Next13 and the hydratation error really got me good. I'll need more time to understand when to put things on the server side or client.

As always, any feedback you can give me will be greatly appreciated.

Thanks, Pablo

I think I could move most of the contents in App.jsx to a specific <Card /> component and leave only the functions on it but I'm content for now. Had to really knock my head until I understood how to position the Orange box always in the same spot regardless of the screen size. Weew.

As usual, be my guest to give any feedback you can provide to improve my solution :D

Thank you!

I have used mix-blend-screen to achieve the proper hover effect and a transparent border initially so that it doesn't shift upon hovering.

It's a good exercise to do via components. I have tried a multitude of variations until I got a proper solution using Tailwind and React components. It's kinda bummer that Tailwind doesn't have nth child support ;x

I'm satisfied with the results but would enjoy it if you could give me some improvements to do!

Loving Tailwind and React more and more each day :D

Added a "dump" data file to simulate data fetching and sending them down to the <Stats /> component

Tailwind is love, tailwind is life!