All solutions

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

I'm proud I built the bundle using rollup and its plugins. Looking back, it was quite easy to do, but at first sight I was confused.

Next time, I would go a step further and use github actions to create the bundle automatically, but I've still got to learn some stuff before that can happen.

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

It was tricky getting the leaflet map to render inside a web component because it couldn't find the #map div, I solved it by selecting the div manually with querySelector and passing it to the map directly, like so:

const mapDiv = element.shadowRoot!.querySelector('#map');

// @ts-ignore
const map = L.map(mapDiv).setView(
  [locationData.location.lat, locationData.location.lng],
  13
); 

I used the leaflet map from a CDN and typescript was being fussy about not knowing the L variable, so I had to ignore the lines with L calls.

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

I'm proud of making the app work well with TypeScript, it's something I'm new at. I think I will work more on this project and add Storybook as well.

Hi there,

This is my second time using Tailwind, this time with React instead of Vue, I think Tailwind does deserve a chance, it has the benefit of not thinking how to name classes, but it also has the downside of searching for a css rule in the docs instead of writing it immediately (at least until you get used to it). I shamelessly stole the box shadow value from a different project because I'm not that well versed on creating multiple shadows at once with CSS. Implementing the game logic wasn't that hard but I did stumble on a bug/feature of React that renders the components twice because of React.StrictMode, it only happens on the development environment.

Do leave a comment if you have constructive criticism. Florian

Hi there,

I don't have big insights on this challenge, I started this challenge way ago, five months back to be more accurate. Somewhere along the way I got bored of it and I didn't finish it entirely, even now, the challenge is not 100% completed as I haven't figured out how to place the hero image correctly... As a note to myself: I should stick to challenges that revolve around JavaScript rather than big design implementations.

Florian

Hi there,

This is my first time using Tailwind, I still don't think it's a great option but it felt ok using it. For some reason, when I click on the generate new advice button there doesn't seem to be a new HTTP request being made, but when the developer tools are open, the click does trigger the request. It's a little weird, I haven't spent too much time debugging this. Some people told me that it's working perfectly fine. If the issue does appear on your side as well, let me know in the comments so that I can investigate further and fix it.

Florian

Hi there,

This is the sort of challenge that looks easy but it's not.

I'm not 100% satisfied with my solution but it does work, I ended up using a custom React Hook for the input fields and the trickiest part was not the part about working with the date, it was the part about setting error messages. I validate the inputs on blur and check if the given date is valid on button click. I used moment.js for handling the difference of dates.

Feel free to leave any criticism.

Florian

Hi there,

I wanted to write some CSS and HTML for fun and this is the result. I know that the testimonials section should've been a slider but implementing it would've taken more time than I planned to spend on this challenge.

The one thing I learned while working on this project is that the background image CSS property can take multiple images followed by commas.

I plan on revisiting this project and adding scroll animations.

Florian

Hi there,

I think the hardest part of this challenge for me was creating the light-dark theme toggle functionality, I think the light theme might need some more polishing but for a first time, this is as good as it gets. I made it so that the app recognize the default light-dark preference of the user and use the preferred choice when entering the website.

I thought the drag and drop would give me headaches but it didn't, I used a tutorial to create the drag and drop functionality, I haven't implemented a drag and drop for quite some years now.

I used Redux Toolkit to manage the todos state and for my surprise it was really easy (of course after I watched Maximilian's tutorial on Udemy). I also used fetch to retrieve the initial todos on page load.

Feel free to give any criticism.

Florian

Hi there,

I feel like I made fewer React mistakes in this challenge.

I didn't create any custom hooks in this project but I'm looking forward to doing so, what I'm also interested in doing is to use Redux, I see that a lot of employers are searching for people with Redux experience.

I used the useContext hook to implement the cart functionality, I'm well aware that I could've also used localStorage to persist the cart data but I thought it was unnecessary. I wanted to try something new so I created the project using Vite, I couldn't figure out how to use Github Actions so I followed a tutorial on Youtube and I managed to set up the Github Pages as well.

Feel free to give any criticism.

Florian

Hi there,

I worked on this project for quite some time and I don't know if I did it correctly. I used the useContext hook intensively and I feel like I'm misusing it.

If there's someone kind enough to take a look over the src/store files and give me some feedback I would highly appreciate it.

Thank you, Florian

Any feedback is welcome, I'm quite new to React and I wonder if the App.js file could be better structured, that file kinda got out of control at the end.

Any feedback is welcomed

Hi guys,

I set the width using percentage units to get the layout take the entire width of the screen. Is there any other way of achieving this without the percentages?

Any feedback is welcome!