Project Structure
================

## Why

- Easy to read
- Modularity
- Separation of Concerns

## How

Directory setup:
```
my-project
└── src/
    ├── components/
    |	├── Component/
    |	|	├── index.ts
    |	|	├── Component.test.ts
    |	|	└── Component-style.tsx
    |	├── form/
    |	|	├── Component/
    |	|   	|	├── index.ts
    |	|	|	├── Component.test.ts
    |	|	|	└── Component-style.tsx
    |   | 	└── index.ts
    │   └── index.ts
    ├── pages/
    │   └── Login/
    │   |	└── components/
    |	|		└── index.ts
    |   │       	└── Component/
    |	|			├── Component.test.ts
    |	|			└── index.ts
    |	├── Login.test.ts
    |	└── index.ts
    ├── hooks/
    |	└── useHook/
    |		├── useHook.test.ts
    |		└── index.ts
    ├── context/
    |    └── index.ts
    ├── services/
    │   └── Login/
    |		├── Login.test.ts
    |		└── index.ts
    ├── routes/
    |   └── index.ts
    └── config/
	 
```

- components: 
	- Contains the common or shared app components, each one should handle its own style, logic and tests.
- pages
	- Associated to `routes` . Would handle root view and logic.  If a component would only be used within a page, it could 	be included inside the page  module's name.
	- A `shared` folder could be included
- hooks
	- Global hooks folder
- context
	- For state management 
- services
	- High level app logic, could be grouped by modules 
- routes
	- All routing logic
- config
	- Global variables, constants, ...