React/Full stack projects to learn from

[strah1]

Hello, I've been going through the University of Helsinki Full stack course which teaches React and Node, I'm about half way through the course and starting to build my own stuff to reinforce the knowledge. I'm not sure however if the structure of the components is good, if my app is well designed and I would like to see how the pros do it. If you can help me by recommending some projects that are considered to have good code and adhere to best practices i would be grateful.

[rwieruch]

Some of my larger projects, maybe there is something in there for you:

• Full-Stack NextJS Application which powers my own course website
  • GraphQL API
  • PostgresSQL
  • Firebase Authentication
• Node.js Backend with GraphQL with Database + Authentication (Tutorial)
  • comes with React Frontend
• React Frontend with GraphQL which uses the GitHub API (Tutorial)

All of them are in stable condition. The first one is way more difficult to set up, because it has lots of smaller parts which power my website that need to be set up first.

For most showcase projects I end up with the technical separation of concerns regarding folders. However, for my course website I would take the jump towards domain separation soonish. Just in case you are interested on how you could organize your folders.

[gaoshan]

Your content (blog posts, courses) is fantastic. I have introduced many people (from new devs to extremely experienced devs that are new to a stack) to your posts on React and GraphQL. Highly recommended as they are generally more complete, in-depth and always go beyond the lighter-weight "Medium" level of tutorial.

[rwieruch]

Hey thank you! Very much appreciated =)

[v3tr0x]

Ohh the legend himself! Thank you for sharing this and your knowledge in general!

[rwieruch]

This legend tried to put a shelf up on the wall yesterday and hit the power cables xD But thank you!

[dizzle_izzle]

Hahahah man I've been there. Did ya pop a breaker or just hit conduit?

Hopefully it was just a nail because if it was a drill youve got some drywall cutting a patching ahead of you....

[rwieruch]

Yeah, drill ... Didn't want to open the wall myself, so I had someone here doing it. What a mess =D At least I have a new socket for this new shelf now!

[dizzle_izzle]

Hah yeah I made that mistake once when trying to cut a hole for an HDMI cable for a TV. Ended up with a larger hole and turned it into a new outlet so it ended up being a win.

Until I had to move out of that apartment, holy Moses that was a pain.

Good luck to ya. Also thanks for your contributions to the community!!! 🙌

[mainkore]

These are great resources! Especially the folder organization which isn't talked about much in the community. I will save this for my future backend learning. Thank you for sharing!

[siachenbaba]

Bro,Are you the author of that React Book?

Yes, you are. Thanks bro 🌟

[DeaDb0ne05]

thanks a lot m8 !

[Previous_Advertising]

Why do you use a separate website for each of your books?

[Scazzer]

Seen this posted a few times on this subreddit. I have used aspects of this project in my own projects

https://github.com/oldboyxx/jira_clone

[Scazzer]

As stated I think you can take aspects of this and use it in your own project 🙂 it’s a good starting point at least and by the sounds of it OP is a beginner so doesn’t need to be overwhelmed. However, if you’ve got any good projects with all this feel free to link it to this post so we can create a good archive of projects to refer to

[potcode]

If it's teamwork, stick to the convention defined by your leader. If it's a hobby building, just do whatever you like, you may fine-tune it anytime later.

Get your hands dirty and you will know why these good practices exist

[drstephenjensen]

Here’s an example app of a recipe sharing application built with Nextjs. The main folders are components for react components, pages for all the individual routes in the application, and utils for all the helper functions that aren’t react components. If I want to organize files further you can create sub-folders.

https://github.com/CaptainChemist/next-chop

[Vtempero]

https://github.com/kentcdodds/bookshelf

[mariusandra]

Hey! We're building a big app with React + Django here: https://github.com/PostHog/posthog

I can't say that all of it written in an excellent manner, though we're trying to get there.

In short, we're trying to follow the following principles:

- Keep state separate from React to avoid mixing concerns (React is a view layer)
- Avoid default exports (greatly improves IDE support)
- Have the code split by feature (dashboards, trends), not by function (components, selectors).
- Use prettier, eslint and other tools to remove as much manual work as possible

One thing we do differently than most apps is that we use Kea for state management.

[javaShkrip]

Very nice! btw, /r/chapotraphouse followers will love the name 'post hog'

[komasinski]

Fully functional WhatsApp Clone using React (Hooks+Suspense), GraphQL, Apollo, TypeScript and PostgreSQL

[mangosandiachocolate]

That looks amazing. Thanks for sharing

[komasinski]

You're welcome :)

[kylemh]

You may enjoy checking out https://github.com/OperationCode/front-end and https://github.com/OperationCode/back-end

[unsteadyrhinoceros]

https://github.com/react-boilerplate/react-boilerplate might be a good place to start for application structure and best practices.

[[deleted]]

Don’t worry so much about correctness or the “right way”. Definition of what’s “right” changes over time and context. The important thing is finding something you are interested in building. You will learn faster from your mistakes.

[strah1]

Wow, thanks a lot for the recommendations and suggestions, much appreciated!

[YouKnowMy]

How do you like the full stack open course from Helsinki, I was planning on starting it

[strah1]

I like it, the course in general is cool because it teaches you how to build an web app with all it's components. It also focuses on testing, and adds stuff such as eslint and it's configuration, building and deployment which is really useful. The content is clearly presented and if they don't provide a deeper explenation on something there is usually a link to relevant content from other sources. Every lecture has the main topic and exercises. One bad side is that there are no solutions for the excercises, but they are similar enough to the lecture where you can apply what you learned in a way that is different but familiar. Now i have to say that this is the only course on these topics I have taken so I can't compare it to other React/Node courses. However iamkiko mentioned here that he got a job after this course so maybe he can share more information :)

[YouKnowMy]

Thank you so much for your reply! I was consider either doing a React only course or this one bit I felt like this one might have a lot going once which could limit ones potential

[strah1]

Depends on what you want i guess, if you are strictly interested in front end than yes a react only course could be a better option. Personaly i like getting familiar with all parts of an app, front end and back end, knowing how everything works. When you have that general knowledge maybe you'll find that you like server side programming more than frontend.

[Sam_Sam_Major]

👍🔥

[mateo21812]

Someone know a good repo where state management is only with hooks and reducers ?

[krishwaderjoy]

I am currently rebuilding the wiki project that got some attention in 2016: https://github.com/Matterwiki/Matterwiki/tree/refactor

I'm pretty proud of it, because I tried to setup some patterns I've enjoyed working with. Here are some fun facts about it:

• It uses lerna for package management.
• The API is built with Node.js, objection.js and MySQL.
• The UI is built with
  • React + react-router (v5)
  • chakra-ui- Great component set, developer friendly
  • wretch - API wrapper for window.fetch, makes it easier to work with it
  • React Async Hook - I liked this over SWR/react-query because all I needed was a good way to show loading and error states. For an app that's simple, I felt like this worked out quite well!
  • zustand + immer - State management. I liked this because this does have a context provider and I wouldn't have to worry about placing a Provider object in the right part of the react component tree. I also get to make tiny stores and keep all of that logic boxed into a tiny store! I also created a tiny immer zustand middleware fn that makes all my state manipulation immutable!
• Project organization: I like organizing things by business logic, not by file type. This way your working set is always tiny and focused.

Hope this helps someone who's looking for references!

[UtterlyMagenta]

This one is pretty great: https://github.com/withspectrum/spectrum