How I Structure My Projects

Photo by Octavian Dan on Unsplash

Ultimately, structure is determined by project requirements. If you’re contributing to an existing project, it’s important to keep the existing structure. But if you’re starting a project from scratch, you have some free room. It also depends if the project is truly your own, or if your company has guidelines for new projects.

If you’re new to the field and are still in the process of learning, however, then I hope this helps you as you develop your personal projects.

Firstly, structure is ultimately going to depend on the framework you choose.

React/Typescript

There are a few ways you can setup a React project. For small and some medium projects (depending on complexity), I use a monorepo.

MyProject
  |_.idea (IDE generated folder for IDE project settings)
  |_Backend
    |_config
    |_controllers
    |_middleware
    |_models
    |_routes
    |_tests
    server.js
    (and other global files)
  |_Frontend
    |_docs
    |_node_modules
    |_public
    |_src
      |_assets
        |_images (and so on)
      |_config
      |_components
        |_subcomponents
      |_containers (for different layouts a view/page might have)
      |_redux (or other state management stuff)
      |_types (if using Typescript)
      |_models
      |_pages (or views folder)
      |_css
      |_sass (if I'm using sass)
      index.tsx
    |_tests
    .gitignore
    .env
    Dockerfile
    package.json
    yarn.lock

For a split repo approach, the setup is overall the same, just two different project directories.

If you’re taking an SSR (Server-Side Rendered) approach, just concatenate the frontend and backend that I put up above (you won’t need the frontend models folder). I’d still at least put your server stuff in directory called server at root. This concatenated structure would also be how I’d approach using templating languages like EJS.

React Native

I use Expo’s setup, with the exception of adding a src folder

DHTML

DHTML (Dynamic HTML) is just a fancy way of saying a webpage built only with HTML/CSS/JS and DOM. Technically you could throw React and similar frameworks into this, but I don’t. This kind of setup is great for when you don’t need or want the complexity that node/npm gives.

As you progress in this field, you’ll very likely will not use this kind of setup very often if at all, but if you’re creating your very first project outside of a course, I’d definitely recommend doing so. It’s a good way to benchmark your vanilla HTML/CSS/JS skills. Try to create something that is heavy on JS, like a game, anyways, back on track.

This is how structure these kinds of projects.

MyProject
  |_assets
    |_images
    |_videos
    |_files
  |_stylesheets (or css/styles, depending on my mood)
  |_sass (if using sass...you can use sass without node.)
  |_scripts (or js/javascript, depending on my mood)
  |_pages (if there's more than one page)
  index.html
  README.md
  (other miscellaneous files that are not assets)

For clarification, assets are files that you may want to copy over from your computer into your project. This is for placing in your website directly (not embedding from an another website).

As always, I hope you find this useful!