All solutions

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

---------------------------------------------

PLEASE USE THIS LINK FOR THE LIVE PREVIEW: https://devlinks.thekim.ca/.

---------------------------------------------

This time I decided to use Vue.js, TypeScript and Pinia as my front end stack. I am quite happy with the DX.

I utilized Golang for the back end and deployed everything on AWS

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

I initially wanted to use a state manager for this project, but I decided to stick with the built-in features for state management. I ended up using Context API and useReducer. The result looks great, though the logic (context/GameContext.tsx) feel a bit cluttered.

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

The design file included elements with 'corner smoothing,' but CSS doesn't natively support this feature. To achieve the desired effect, I used a library. While it worked well, it has some flaws, such as having overflow: hidden by default, which prevented me from using it on certain elements.

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

How does my folder structure look? Each /view/ folder contains its own /components/ folder, holding components that are specific to that view and won't be reused elsewhere.

As i mentioned, GameContext.tsx might look a bit cluttered? I can navigate the file without any problems, but that might be because I wrote it :D. Any tips? Or is it okay overall?

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

I had nothing to do and decided to take on this simple challenge :D.

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

Importing a variable font xD.

Turns out i still have to specify format("woff2-variations"), even though the font i had is a .ttf.

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

All feedback is appreciated!

I would greatly appreciate any feedback you may have!

I would greatly appreciate any feedback you may have!

• Figuring out how to add a gradient outline to the checkbox on hover was probably the most frustrating part :)
• I'm not sure about the /components/ folder structure. Any tips?

I would greatly appreciate any feedback you may have!

Built with React, TypeScript and SCSS

It's actually my first time using TypeScript in a project :)

Some concerns i have:

• I think the ModifierForm.tsx is a little bit too long?
• Maybe i should've used a state manager?
• How does my TS code looks overall?

I would greatly appreciate any feedback that you may have!

I wanted to learn how to implement drag-and-drop functionality with react, so I took on this challenge as a base, even though it initially lacked drag-and-drop features

I would greatly appreciate any feedback that you may have!

Wanted to build something simple and stumbled upon this challenge :)

I would greatly appreciate any feedback that you may have!

I learned a lot about themes from this challenge. It took me a long time to get everything working, but now it functions as intended.

• I wrote a simple function that shortens links visually (https://www.frontendmentor.io/ -> frontendmentor.io). I noticed that if the link was too long, it would push the whole content, so I decided to shorten them, and I also set a max-width on each link. I'm not entirely certain about the max-width property, but it seems to work
• I used the fecha library to format the date
• I added a loading spinner
• I made a custom favicon :)

How does my theme switcher and JS logic look overall?

I was trying out a new code editor and decided to remake this component because the last time I made it, it wasn't accessible. I would still appreciate your feedback, though!

I would greatly appreciate your feedback!

• I used Context API to switch an active time span. Is my usage of it correct?

I would greatly appreciate your feedback!

• I used Leaflet to make a map for the location screen. Changing a marker turned out to be quite a challenge since it was my first time trying that. I didn't realize I needed to use a special function for it.
• I'm not too sure about the big title (h1) on the home page and how I made it have two colors. I tried using mix-blend-mode: difference for a two-color effect, but it's supposed to be just black and white based on the design. Unfortunately, because of the image, I couldn't get it to be completely black and white.

I would greatly appreciate your feedback!

• Generated utility classes and CSS variables with SCSS.
• Although there is no JavaScript in this project, i still decided to use React to get used to creating components end etc.
• Check my Button.styled.jsx. Maybe i should've created a separate component for a primary button? Almost every single property checks for props and it makes the component a little unreadable.

I would greatly appreciate your feedback!

This was a tough one..

• It was my first time building a carousel, and I used Swiper JS for it. The experience was quite challenging. I encountered numerous issues, such as flickering, and the carousel occasionally skipping some items. However, after investing several hours into it, I managed to fix the problems, and now it seems to be working properly.

• The grid part, on the other hand, wasn't as difficult as i thought it would be. It was my first time incorporating grid-areas in the project, and I found them incredibly helpful. Using media queries with them was a breeze!

I would greatly appreciate your feedback!

Heyo, everyone!

I have some questions and I would greatly appreciate your feedback!

• I'm unsure about a calculator component having an absolute positioning on desktops. Because a user can switch units to imperial and the whole layout would shift. Absolute positioning prevents that.
• Cards in the "Limitations of BMI" sections also have absolute positioning. I really tried to use grid, but i felt like absolute positioning would be easier and less frustrating to use..
• The curved lines. I'm not really sure if that's how you use SVGs for the background in React (background-image in the CSS file doesn't work). See App.jsx and /components/Description.jsx to see what I mean
• /components/Calculator.jsx might be too long? I think i could've handled input change inside of the Input component, same with the radio buttons?

I would greatly appreciate any feedback you may have!

One difficult thing was the form. I should've solved the problem first, but instead i started making everything up on the fly. It looks and works as intended, but the code is a little cluttered

I would greatly appreciate any feedback you may have!

• Was deciding if i should use hero images as image elements or as background images. Decided to go with background images
• Other difficult part was the blue overlay on the footer image. I made it by creating a stacking context and setting a bg image opacity to 0.1. Didn't take me too long, but I'm proud of how it turned out :)

I would greatly appreciate any feedback you may have!

The most difficult thing was the positioning of the app illustration and a price card :) I decided to go with a position: absolute, and I think it was the right choice. Would love to hear your opinion!

I would greatly appreciate any feedback you may have!

Which units should i use to set a background-size for the hero image? I used percents in order to make it responsive, but i think i made it worse and should've went with rems

This was a fun one. I tried to make it as close to the design as possible. I would greatly appreciate any feedback you may have!

I would greatly appreciate any feedback you may have!

• I utilized Formik for form validation. This particular aspect is something I'm uncertain about since it was my first time working with it. Initially, I attempted to create my own form validation by implementing hooks, and I achieved some success. However, I eventually decided to switch to Formik as it became increasingly frustrating.
• I'm quite unsure about the positioning of both cards. I employed position: absolute for them, but I wonder if using transform properties might have been a better choice. Additionally, I used absolute positioning for everything inside the card. Did I perhaps overuse it?

I would greatly appreciate any feedback you may have!

This was a fun challenge. Completed the main part in an hour, and for the next half an hour was trying to figure out why i get the same advice every time i make an API request. It seems like axios was caching the response, so i just added a random query parameter to a URL.

Some questions i have:

• How is my folder structure?
• Any accessibility problems I have in my code?

I would greatly appreciate any feedback you may have!

Some parts of the code I'm unsure of:

• The backdrop that appears when the hamburger menu on mobile is toggled. I had to use an empty div. Is there a better way to achieve this?
• The positioning of the main content. To name a few things, the main content wrapper uses a negative margin because the header was slightly too tall. I used a float: right on an image to stick it to the right of the container. I could have used flex, but float seemed to work just like I wanted it to, and it saved me a couple of lines. I heard from somebody on the internet that we shouldn't use float properties, so that's why I'm unsure about using it.
• How is my folder structure?"