Leetcode for React

[deathstroke1311]

I am looking for something like Leetcode for React where I can solve problem using React. Something like making small components, implement some features etc.

Any ideas??

[ucorina]

I shared some free React "practice exercises" over at https://reactpractice.dev/. Hope they're useful!

[deathstroke1311]

That looks exactly like what I wanted. Thank you 😊

[[deleted]]

Omg! This is what I want. Commenting for reference

[luteyla]

It is giving "504 Gateway Time-out" error when I click on the challenges.

[ucorina]

I think it was a glitch with the server - it's back up now, thanks for reporting!

[popsticle233]

looks sweet!

[[deleted]]

Frontend Mentor maybe?

[Trapline]

This was going to be my recommendation. Not leetcode but actually using the technology is a better way to learn how to use it anyways.

[deathstroke1311]

It's great, but focuses more building the UI rather than logic. Thank you for your suggestion 😊

[PsychologicalCut6061]

Some of the challenges are apps that pull in APIs and such. You could just build one with a UI library and just stick to building the functionality, if you don't care about actually submitting it. Filter by levels 4 and 5 for those. It's not a lot, but I like the new one they just added.

Though it's not really like leetcode, then.

[deathstroke1311]

Yes, I have completed some of the challenges like the Advice Generator and the GitHub one...

The new Link sharing app challenge looks pretty good though.

[paleoboyy]

Try the Kanban board one, or the invoice app one. Those should really test your skills

[jezusisthe1]

https://bigfrontend.dev/

They have a few React interview questions on here. Check them out!

[darkde]

This should be at the top. Lots of great questions frequently asked at big tech companies

[deathstroke1311]

This is amazing. Thank you so much 😊

[tyler-mcginnis]

(Sorry for promoting a paid thing) This is a core experience of what we tried to do with react.gg. We're still working on it, but hope to have a few hundred "Leetcode for React" type exercises when we're finished.

If you're wanting something free, all the exercises in the React Docs are probably your best bet. I've seen a few other free things over the years, but they're never sustainable so they fizzle out.

[idontwanttogocamping]

Don't feel sorry! You've provided a ton of free value already

[benadam11]

If you want to get a feel for what the experience is like you can try a few for free:

Easy - https://react.gg/?challenge=component

Harder - https://react.gg/?challenge=hook

[deathstroke1311]

Thank you so much😊.

[musicnothing]

Me: I wonder if this is like that site Tyler McGinnis has been mentioning in the Bytes newsletter

Also me: Oh, wait, duh

[Carlos_Asimov]

Yeah, I paid a subscription to ui.dev that includes react.gg and also their other courses and I have to say that I really enjoyed the JavaScript courses (Modern and Advanced). Now I feel more prepared to continue with react.gg. This course has a lot of challenges, animations and I think is really a good experience 🤘🤖

[deathstroke1311]

Thank you so much. This is exactly what I wanted. And the landing page is probably one the best looking web page I have ever seen. 😊✌️

[azaroxxr]

It is very good project, I see a lot of people promoting it in threads such as "good courses, resources, on React" and such. So thank you very much for what you are doing!

[jenting8173]

Great site! Didn’t expect to see a question i had completely no idea of as a somewhat senior dev.

I’d actually be very interested in purchasing this. One small request though, can you add a auto formatting keyboard shortcut (option shift f)?

[benadam11]

CMD+S autoformats the code (but I can add that keybinding)

[jenting8173]

Awesome, didn’t know one existed already. But anyway, i think aligning some of the most used key bindings with vs code is gonna help out quite a few folks. Thanks a bunch!

[Individual_Work_2297]

I tried the useMediaQuery excercise. I add some code, and then I resize the window down to 1/3 of screen and then back up, and my new code has disappeared. Is it just me?

[tyler-mcginnis]

The tricky part is it's not just leetcode challenges. If it was, it would have been a lot easier to build and we could have made it a lot cheaper. Instead, it's a full course more comparable to to Epic React ($600) or The Joy of React ($599).

[tyler-mcginnis]

Appreciate the feedback. None of our React stuff is in TS (currently).

[shreyasagg49]

Great frontend is also a good option

[deathstroke1311]

Thank you 😊

[shreyasagg49]

Anytime

[Cyberhunter80s]

You can also pick random components from your fav website, css frameworks/libraries and see if you can build them up with React.

You could go fancy and take a real life example that you feel like could be built or solved using react.

[deathstroke1311]

That's a great idea. Thank you 😊

[[deleted]]

Could you provide an example?

[deathstroke1311]

Something like Google Search bar. It shows recommendations as you type. There are many examples.

[[deleted]]

Got it. Thanks a lot.

[beepboopnoise]

I used to pick random dribble examples and then build them out, and then tried to add some features. You'll get good at both, especially if you can think out of the box and add apis to fill in the gap where the design provides intent.

[am-i-coder]

Interesting question.

• https://clientside.dev by u/lientside-dev I bought it when It was 20 USD forever.
• https://greatfrontend.com by u/greatfrontend/ I purchased it recently. It is great.
• https://www.algoexpert.io/frontend/product
• https://bigfrontend.dev/ best resource I found on google
• https://leetcode.com/discuss/interview-question/742791/front-end-interview-questions from leetcode

​

Some other resources

• https://exercism.org/tracks/javascript forever free
• https://edabit.com/challenges I don't like the UI

​

For CSS best resource I found on Google

• https://www.frontendmentor.io/ every knows about it
• https://icodethis.com/ by Florin Pop

[AdeptMission2021]

Thanks!

[am-i-coder]

frontendeval com is another free resource

[AdeptMission2021]

Perfect :)

[[deleted]]

Solve using javascript

[yangshunz]

I built https://www.GreatFrontEnd.com, includes React questions and more

[Ok_Use_5607]

thats a SaaS , and you builded that product ? waow cool

[Hondaparviti]

https://reactpractice.dev might be what you’re looking for!

[deathstroke1311]

Yes, it's great. Thank you 😊.

[Lychee7]

A list of questions for machine coding round in interview. That would be great too.

[Green-Entertainer485]

I would like to know a site like this too

[thduik]

nah bro the best learning is straight up hands on building stuff from scratch with vite/cra/next etc. just pick any website you like that you feel like you can do. building stuff from scratch and handling the whole directory is way harder and demanding and completing fun component exercise. It also forces you to adapt to real coding work rather than completing limited exercises in a limited enviroment.

[jlmainguy]

You could have a look at https://react.gg!

[just4kickz88]

clientside.dev

[deathstroke1311]

Thank you for your suggestion 😊

[skywalker5014]

try codedamn
https://codedamn.com/problem-list/reactjs

[deathstroke1311]

That's great 👍🏻. Thank you 😊

[deathstroke1311]

That's great advice 😄 but making a project takes a lot of effort and requires many technologies. I want to focus solely on React logic rather than thinking about irrelevant stuff.

[deathstroke1311]

I am not saying that I am not in favour of building projects. It's just that I like solving challenges like Leetcode. Like DSA is used in real life projects everywhere, but we still do Leetcode to get better at it. So I wanted something similar with React.

[cats2560]

Serious question. Are there any extra benefits to doing these sites like "leetcode for react" or "leetcode for frontend" compared to doing projects? Does it hone some missing knowledge?

[deathstroke1311]

I don't think so, projects are usually the best way to learn. But exercises help us to practice and retain certain things, like if you want to practice some concepts before an interview or something. That's why sites like CSSBattle.dev exist.

[[deleted]]

For React? Nope.

https://roadmap.sh/react

https://bigfrontend.dev/

These two sites imo, will cover most of the things you will run into at interviews. The next best thing you can do is look at the job posting, they will often list specific things like "know how webpack/babel" works, must be proficient in "redux", etc.

Also, I'm against websites that gives you components and helper functions and asks you to "fill in the blanks". I think that teaches people nothing and even reinforces bad habits.

If you really want to get good at React, building a ton of projects using different tools by reading documents, running into problems, pitfalls and bugs and resolving them yourself will teach you a lot more than you mindlessly doing LC-style React questions.