Project Structure

Folder Structure

In this project, I'll be aiming towards a clean and organised project setup. As of writing this, the folder structure is as follows:

.
├── public/
│   └── ...assets
└── src/
    ├── components/
    │   ├── atoms/ # Single-element (mostly) 'dumb' components
    │   │   ├── Button.svelte
    │   │   └── ...
    │   ├── molecules/ # Multiple atoms working in relation to each other
    │   │   ├── BarChart.svelte
    │   │   └── ...
    │   └── organisms/ # A combination of molecules and atoms to form a bigger whole (sections, forms, etc.)
    │   │   ├── Header.svelte
    │       └── ...
    └── modules/ # Moduled JS files that can be reused across multiple components and scripts
        ├── utils.js
        └── ...

I'll be using Brad Frost's Atomic Design Principles to structure and organize my components. It's a methodology I'm very familiar with and is a great way to force utilizing seperation of concern across my code.