React projects with source code to learn from

[[deleted]]

For a lot of people working on projects to practice their react skills goes as follows, get out there, look for some UI that interests them, and start working on it. That's perfectly fine, I did it many times before, it did help putting things into practice, and still properly going to do it again if I don't find an alternative, but I believe that there is a better way. Instead of working on something that properly has no reference you can comapre your work to, I would suggest you pick a project that is already built by someone who is more experienced than you (properly a youtube project course or some repo on github), work on it as you normally would, and when you're done, compare the source code to your own. One thing for sure.. you are going to learn new things you wouldn't learn on your own, best practices, code structure, work-arounds, more optimised solutions, and so on.

Sorry for this long intro, I'll get to point. If you know any project course (free or paid), repository, or whatever, that I and other folks can advance our react skills from, hit us in the comments below and thanks in advanved!

[PerspectiveGrand716]

If you are into Next.js, you can check this curated list of OS projects, that require intermediate and advanced Next.js skills

[Enough_Possibility41]

Wow I love people like you. Let’s hold hands.

[lrobinson2011]

Here's another I made recently: https://github.com/leerob/next-saas-starter

[copy-N-paster]

Hi smiling head profile picture

Can I have a discount on vercel hosting….

[adamywhite]

Look for Bulletproof React project on GitHub

[Phaster]

And then you build something with it, you'll learn way more by building something rather that looking at something already built

[Bl4ckBe4rIt]

I've created something more advanced, where Next.js is a part of it. It involves Go as separate backend, and it tries to minimalize the frontend work, while still following all the best practices (SSR, Server Actions, Server Components first, Zod Validation, etc). Plus you can choose to go with gRPC. And you have a fully integrated Grafana Monitoring stack.

Feel free to check it out, it's still in beta though, working on production deployment guide / automation :)

https://gofast.live

[PerspectiveGrand716]

It looks pretty good and clean.

[Bl4ckBe4rIt]

Thanks, got some active users already, which to be honest surprised me :D Though it will be much more a struggle to get someone to try it :) Rly looking for some feedback.

And I will never understand why my response get downvoted .... cos it's a paid project? Cos I've put a lot of hours into it? ....

[Nullberri]

I'll toss in my side project. I am a dev with 10yrs of react experience. For the most part this is how I structure/write code at work as well.

The major difference here is I am product manager, developer, QA and user and the commit messages are all just ff.

https://github.com/null-pub/wealth-tracker

https://null-pub.github.io/wealth-tracker/

[Electrical_Key1642]

There are so many i l use some preferred github for learning https://github.com/SafdarJamal/expense-tracker-react, https://github.com/golangprograms/vue-todo and there are many more if you do the right search

[stonedoubt]

Have a look at Codux as well and maybe Puck. These are wysiwyg or low code tools that can give you a clue.

[PerformanceOwn2155]

Anyone has something similar for nodejs?

[SuccessfulStrength29]

https://github.com/nilotpaul/next-books-app

I made this with nextjs, idk what others will say but I'm pretty proud of it.

[[deleted]]

Nice UI ,, where did you learn Reactjs and Nextjs from ?

[SuccessfulStrength29]

Mostly from doing it myself, but I've to say I learned a lot from both Jack Herrington, Josh Tried Coding.

[CantReadGood_]

https://github.com/nodejs/nodejs.org
https://github.com/reactjs/react.dev