Skip to content

Typical Codebase Structure

Codebase Jigsaw: How it all fits together!

Info

This presentation is only intended to be a brief overview of the typical codebase structure

If you want more information about anything mentioned feel free to reach out to CFC committee and project helpers!

Overview and Importance

  • Most codebase will follow almost the same pattern (if they change, it will only change with little quirks)
  • Structure helps every software engineer understand codebase and where to put it certain codes (better code readability = better collaboration = better profit!)
Profit

stonks

Frontend

Example: About Us - Coders for Causes Website

website

Different Folders and Purpose

Components

Components are individual parts/pieces of user interfaces

components

Pages

Pages are the direct components that are related specific to a route or URL

pages

Public / Assets

Assets are usually elements that are referenced E.g. Images, Videos

assets

Utilities / Helpers

Pieces of code that are used as utilities or helpers to other codes

helpers

Tests

  • Scripts that tests that code works
  • Usually E2E frontend

tests

Comparison with Two Codebases

Slight difference, look at software documentation or ask other engineers

codebases

Backend

Context - Role and Subject

In these example, when I mean "role", I mean the general role of file. "subject" means the feature or group functionality

Method of Organisation

Subject-Oriented Driven Structure

As it can be seen here, both different folders will have the same filenames based on its role. App grows, those files can itself become folders as well.

Example: erdem/DRF-TDD-example: An example Django REST framework project for test driven development. (github.com)

subject-oriented-file-structure

Role-Oriented Driven Structure

As it can be seen here, both both different folders will have the same filenames based on its subject

Example: our-lab-training/olt-backend: Our Lab Training - Feathers Backend (github.com)

role-oriented-file-structure

Different Folders and Purpose

Models / Database Connection

Object-Relational Model (ORM). Links the database into your app into objects

orm

Routing

Determines the rules for the URL pattern

routing

Views

  • In REST API, Views are your main “view” of the API

views

Tests

  • Contains unit testing (+ possibly e2e testing)
  • Most common candidate for transitioning from file to a folder containing more files

Other Resources