All solutions

This challenge was completed a while ago, I just forgot to submit it.

My first try using tailwind. This challenge is probably the worst to try tailwind for the first time lol. Especially considering that I wanted to have a game-like feel with smooth animations. Also I didn't use anything like classnames to properly merge all the classes, and just used inline ternaries and stuff, so the code looks pretty unreadable :)

Other than tailwind, I used Transition component from Headless UI to make animations and zustand for the state. Much better choice for this project in my opinion would be styled-components for styles, Framer Motion for animations and XState for state.

Although I haven't tried XState in any project yet, I think here it would fit very well. I used their editor to visualize the state flow, and it really helped me. But in order to implement delays between state transitions I had to write seTimeouts in useEffects, which is kinda ugly. With XState it would be done much easier and cleaner.

Maybe I will try to do this challenge again with XState.

Stuff used:

• react-router for storing filter states in search params, had to write a custom hook for it. It's a shame react-router doesn't have such hook built-in.
• RTK query for fetching, I like that it stores cache right in the redux store, so it's easy to see how it's organized.
• Headless UI for region select. It worked fine with styled except for Transition component that receives class names as props, so I had to create global css classes and pass their names. If you know a better way to use Transition with styled, please share.
• useDeferredValue for keeping the input field responsive while the long list of countries is being rerendered. I could have used debouncing instead, or paginate the list so it's not very long, but wanted to try these new hooks (actually I tried useTransition at first, but as it turned out, it works only with useState/useReducer states, and as I said above, my state was in the search params via a custom hook)
• added not so noticeable animation to the magnifying glass icon when the country list is stale (the new list is deferred and being rerendered)
• since it's too boring to search only in the country names, it also searches in translations provided by the api.
• duplicate native names are removed, so instead of

  Native Name: Namibië, Namibia, Namibia, Namibia, Namibia, Namibia, Namibia, Namibia, Namibia
  

  we have

  Native Name: Namibië, Namibia
  

• also had idea of adding the settings menu where we could enable/disable some options like search in translations, showing only independent states, search only from the start of a word etc. Maybe will implement it some day.

My first experience with react router and framer motion. Actually did this solution a while ago, so react router is set up using older syntax.

Stuff worth mentioning:

• Tried different approaches of using framer motion, and ended up just writing its code into styled().attrs

  const Header = styled(motion.h1).attrs({
    variants: {
      hidden: { opacity: 0, y: 100 },
      show: { opacity: 1, y: 0, transition: { duration: 0.8 } },
      exit: { opacity: 0, y: 100, transition: { duration: 0.5 } },
    },
  })`
    padding: 0;
    ...
  `
  

  Don't know what are the best practices of pairing styled components with framer motion, but I like this approach. Animations belong to styles, so why don't just write them within a styled component?

• Using framer motion with react router was a bit tricky. I couldn't find a way for nested routes to animate properly on exit. So the links in the navigation bar trigger exit animations, but the nested links don't. And the white underline doesn't animate between links. Maybe should've added another layer of AnimatePresence? Or add a key attribute to nested routes the same way it's on the Routes so react explicilty rerenders them? I probably tried both, can't remember. Anyway it doesn't matter since react-router now has different syntax.

Stuff from todo that I didn't do:

• preloading of images
• make drawer scrollable on small screen heights
• extract isMdUp and isLgUp to a custom hook (useThemeBreakpoint?)
• extract duplicate styled components
• make sub routes swipeable on mobile?

I changed expected behaviour to make the challenge more interesting:

• You can reply to any comment at any depth (so it's a comment tree like on facebook)
• You can change the current user (via the button in the top-right)
• No sorting of first-level comments (it's easily done but boring and kinda useless here)

Also:

• Ctrl+Enter in the textarea submits the form
• You cannot add empty comments
• You cannot vote on your own comments
• A user can vote only +1 or -1 (no multiple votes)
• You can cancel your vote by voting the opposite
• Your vote is shown
• Cancel button is shown when updating the comment

Very interesting project, took a lot of time though. At first I implemented the majority of functionality using props-drilling 😈. Then moved the state to a context 🤷‍♂️. Then rewrote everything with redux 💪

• Used redux-thunk's synchronous action-function to move comment creation non-pure logic(time and random id) out of components
• Used timeago.js to format the time
• react-remove-scroll-bar and TrapFocus from @mui/base for the delete modal
• Drawer from @mui/material for the users drawer
• React.memo with redux docs best practices to minimize rerenders

❔ Questions:

• Are there best practices for writing synchronous thunk actions? Redux docs don't tell where to put them. I'm pretty sure slices are the place for them(since normal action-creators are exported from the slices and components don't need to know what kind of action they import), but I'd love to confirm and see them in action(pun intended) in the real projects.
• Did I do well with minimizing rerenders? I think I did, but would love to get feedback on this.
• The Comment component looks pretty intimidating. I thought about moving some stuff from it to separate components, but to me nothing makes sense to extract. What do you think? Also there are so many handler functions, maybe I should've implemented it differently?

Feedback is appreciated!

I used vercel's serverless function backend stuff here for the first time. Decided to try free ip-api.com to avoid all the api-keys hassle, but it lead to two problems:

1. My adblocker blocked access to ip-api.com
2. After the first deploy to vercel I found out that it's forbidden to fetch via http when you are on the encrypted https site.

I thought that a bit of backend should solve both problems and it did.

Apparently there is no native fetch in node.js so I thought it's a good moment to try axios. This solution uses both, axios on the backend and fetch on the front.

At first I tried using Leaflet.js but it looked very blurry with my 125% scaled ui. I went with Yandex maps as the easiest option with no api-keys needed.

Also made a couple of custom hooks for the first time!

I'd appreciate any feedback on my api or react code.

It was a really intense challenge for me. Stuff I used here for the first time ever:

• redux
• styled-components
• react-beautiful-dnd
• redux-persist

I really really liked styled-components and moderately liked redux :) I mean I get and respect how redux works, but I need time to get used to it. As for styled-components, it's definitely going to be my go-to css solution in react. I've stayed away from css-in-js libraries favoring pure css/sass, but it turns out that with VSCode syntax highlight extension styled-components are just like pure sass but better!

Working with react-beautiful-dnd was also fun. I set it up following their egghead.io tutorial.

Also I'm really proud of how I implemented reordering logic with Active/Completed filters. It reorders only within current filter, and keeps how finished/unfinished todos are arranged relatively to each other. In my opinion it's the most natural way to implement reordering and filtering at the same time. What do you think? Maybe there are better ways or even best practices in such situations? 🤔

Any feedback is appreciated!

• Used useCallback hook for the first time here, did I do it correctly? I realize that it's not needed here at all, but wanted to try it.
• Is it ok to use <article> the way I did here? I suppose so, but not sure.

Any other feedback about react and html+css is appreciated!

Didn't manage to make the bottom-right bg element with ::after and position: absolute on body. It overflows to both bottom and right and I couldn't find a way to fix neither. overflow-x hides horizontal scroll but it's still swipeable on mobile. Bottom overflow was really strange as it overflowed past itself and even html tag.

So I did that second background shape by making an svg file and using it as a background, it worked flawlessly.

If you managed to do it with ::after on body and so it matches screenshots and not overflows, please leave a comment, I'd love to know how it's done.

I'm also open to any feedback regarding html/css. Did I use that aside tag correctly? What would be the best semantic structure here?

My first landing page, I really tried to make it very very close to the design in both desktop and mobile view, I think I did well. Tried Figma for the first time, just used the free jpegs inside it, and it went like a breeze! It's so much easier to measure all the stuff there than in Krita(which I used previously).

Questions:

• What are the best practices of making a burger button and a menu? I think the method I used is fine, but maybe there are others?
• I made the tip of the mobile menu and links' bold underlines with ::before css alchemy. Maybe there are better ways?
• For widths between 375px and 1440px I used my judgements about how the design should respond, does it feel good?
• I also set max-width of the whole page to 1700px, not sure, maybe should've set wider?

I'd also appreciate any feedback on html and css, I spent a bunch of time on this simple project and not sure whether it turned good or not, maybe I should've gone for simpler approach with fewer @media queries?

Kinda proud of this one. In the previous challenge I encountered strange(for me) behaviour of type=number inputs with react+ts, and this time I decided to do all validations manually. It ended up pretty wild, I basically hardcoded every button's behaviour in every situation following my idea of how a real calculator should behave. I like how it came together, this is not the code to be proud of, but it does the job well! I could find only one sequence of actions that lead to NaN on the calculator screen, and it's not a straightforward one(can you find it?)

The stuff I wanted, but failed to implement:

• Make screen overflow to the left and stay aligned to the right when there are lengthy numbers. It's working now with justify-content: flex-end but for some reason it's not scrollable with flex. Without flex, overflow: auto does it's job, but it overflows to the right despite that the content is aligned to the right. I tried approaches with direction: rtl - no luck, I tried scrollIntoView - it kinda does the job, but it also scrolls vertically and that's bad UX in my opinion. I went with flex in the end.
• Issue related to the previous one - what to do with number with a lot of digits? Given that I chose flex with no scroll I decided to round decimals to 12 digits so a number like 0.333(3) is visible on the screen. It doesn't work for big numbers but it's something. I also made the screen expandable into two lines when there are long numbers, not sure about this decision.
• How to handle all ⌨keyboard 👇events of the whole page? Now keyhandler is on the main div, but if we click away it loses focus. We can't put a keyhandler on the body, can we?

That was a great challenge which I really enjoyed, I appreciate any feedback!

Decided to try react+ts. It was pretty hard for me. Not sure whether hooks are supposed to be used like that. I'm just starting to learn them and I'm not sure I understand them. Also encountered strange behavior of input type="number" input fields with react. I should probably have instead used inputs of type="text" and do all validations by react. I don't have any specific questions(or rather there are too many of them), but I'm not against any suggestions or feedback! :)

Also there is an Easter Egg 🥚🐣 Type 123456 to the bill and press reset :)

Please 😭 tell me how to align damn li vertically relative to its bullet image. I tried many stackoverflow suggestions and neither worked :(

My second challenge. First time dealing with css animations and I have a question:

• what's the best way to retrigger css animation from vanilla JS? I used this rather hacky looking way of re-adding a class:

  radios.classList.remove('card__radios--alert')
  radios.offsetWidth //wtf
  radios.classList.add('card__radios--alert')
  

  but I think in modern css/js there should be a better way

My first project here! This site is awesome! I'm in my n-th attempt to learn frontend stuff and this community is just perfect for that!

So problems/questions I got during this project:

• What's the best way to make a button in a situation like this? Is it ok to just put img inside a button? I suspect the way I did is not great for accessibility.
• I couldn't make attribution footer behave normally in mobile view(so i just hid it). I tried to overwrite position: absolute with static, but couldn't find proper flexbox parameters so it would stick to the bottom or scroll when the advice is long. Probably I shouldn't have positioned it absolutely in the desktop view(and should've started with mobile-first approach).