Codebase Tour Through An Advanced React Project - How The Pieces Fit Together (incl video)

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

• keep your code consistent
• detect potential bugs while you write the code
• test your app automatically to warn you when a feature is broken
• prevent merging broken code in the main branch.

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:

• Feature-driven folder structure inspired by Bulletproof React
• ESLint for static code checks
• Prettier for consistent code formatting
• TypeScript for type checking
• Husky & lint-staged for pre-commit hooks
• Cypress for integration testing
• Jest for unit testing
• Storybook for component documentation
• styled-components for styling
• GitHub Actions for Continuous Integration

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.