What does your file structure look like during project development?

Question

Frontend

Hello, I learned how to work with SASS, PUG, I got acquainted with JS a little, I want to make a project, but make it as competent as possible in terms of its file structure, i.e. that each file would be in its place, as is the case in companies where web development a group of people is involved, because there is no such experience and so far there is nowhere to take it from, please help.
Can you share what your project folder looks like during development and release to production, preferably with an explanation of what each file or folder is responsible for.
At the moment my structure looks like this ~

dist/ - папка с готовой работой
  assets/
    css/
       index.css
    js/
      vendors.js
      index.js
    fonts/
    img/
       photo1
       photo2
index.html
page2.html


src/
  components/
    global.sass
    service/ - служебные стили
       fonts/ - папка со шрифтами
       fonts.sass
       variables.sass
       mixins.sass
       functions.sass
    sections/  - папка которая содержит в себе большие секции типа footer/header
       footer/
         footer.sass
         footer.pug
         footer.js
    block/ - небольшие блоки - панели навигации, формы
    items/ - кнопочки, прочая мелкая ересь, 
  pages/
    base/
      base.pug - шаблон для страниц
      includes.pug - подключаю сюда все sections
    index.pug
    page2.pug
index.js - Точка входа в webpack подключаю сюда все js и sass из папки components вот такой вот функцией

function requireAll(requireContext) {
    return requireContext.keys().map(requireContext);
}

requireAll(require.context('./components', true, /\.(sass)$/));
requireAll(require.context('./components', true, /\.(jsx?)$/));
requireAll(require.context('./pages', true, /\.(jsx?)$/));

Perhaps such a file structure is completely messy, please tell me and not troll, there is absolutely no experience in developing a file or application for more than 1 page or 1000 lines.

UPD
For work at the moment I use pug, sass, jQuery (some plugins for jQuery), I plan to master react or Vue

Answer 1

assets/
  /css
  /fonts
  /img
    /icons
    /svg
    /del
  /js
    /libs
    /components
    script.js
  /scss
    /base
      fonts.scss
      base.scss
      header.scss
      footer.scss
    /common
      animation.scss
      buttons.scss
      elements.scss
      grids.scss
      typography.scss
    /components
    /libs
    /mixins
    /pages
    /vars
      breakpoints.scss
      colors.scss
      fonts.scss
      transitions.scss
    style.scss
  index.html

This is how the front looks like, which is further built and transferred to the back (we work with WP). Gathering everything at a gallop.