Have you tried looking at a professionally set up codebase?
Just the appearance of it can be confusing. There are lots of folders and
.whatever files that you've never seen. You may have a folder structure that feels uncomfortably different from your typical create-react-app folders.
└── src/├── components/├── contexts/└── hooks/
On top of that, there’s usually a lot going on behind the scenes. For example, you have tools that help you
This can be confusing as heck. It's hard to grasp how different parts of the codebase are intertwined and how a developer gets code from their local machine to production. It's like a puzzle of a 1000 pieces that you have to assemble in your mind.
Obviously, it would be great if you had a guide. Somebody with experience who explained to you how things work. And that's typically what you get when you start a developer job (at least if you're lucky). But before that you're on your own. Struggling to fit the pieces together. Or simply giving up.
Good news though: For the past months, I’ve been working on such an advanced project for a training program. And you can get a tour through that codebase right now. To start with here is the source code.
I created this project based on my experiences from real-world projects as well as community recommendations. The project is built with:
You might be used to or have heard of some of this. Some things might be completely new to you.
In any case, this tour through the codebase helps you fit the pieces together. I explain the folder structure and the tools used in this project with examples of how they work in action.