Project Structure

/Naming-Things            

└── Grouping

Design > No Design

Downloads/
  23sdfsdf.bas
  23sfsf~2
  23sfsf-2.bas
  23sfsf~2.bas
  23sfsf-2
  23sfsf_2.bas
  23sfsf__2.bas
  i-am-a.qt
  .murder-plot-SECRET.txt
  neil-breen-movies.txt

Small Scale

sass/
  style.scss
  ...
components/
  index.js
  todos/
    index.js
    TodoItem.js
    ...
constants/
  index.js
  actionsTodos.js
models/
  todos.js
api/
  index.js
  todos.js
index.js
rootReducer.js

Discuss...

index overload

Extracting and reusing a component is hard.

Adding a section involves touching (almost) every directory.

Medium Scale

actions/
	todos.js
	articles.js
	projects.js
	snaffle.js
	area-chart.js
	headlines.js
	snozberries.js
	history.js
	wiki.js
	popover.js
	portfolioCard.js
	portfolioChart.js
	portfolioDetails.js
	portfolioLegend.js
	portfolioSnippet.js
	portfolioTable.js
components/
	todos/
		TodoItem.js
		...
	articles/
		Article.js
	Projects.js
	Headlines.js
	Snaffle.js
	Snozberries/
		SnozBerry.js
	history.js
	Wiki.js
	Area-chart.js
	popover.js
	Portfolio/
		Card.js
		Chart.js
		Details.js
		Legend.js
		Snippet.js
		Table.js
constants/
	todos.js
	articles.js
	projects.js
	snaffle.js
	headlines.js
	history.js
	snozberries.js
	wiki.js
	area-chart.js
	popover.js
	portfoliocard.js
	portfoliochart.js
	portfoliodetails.js
	portfoliolegend.js
	portfoliosnippet.js
	portfoliotable.js
reducers/
	todos.js
	articles.js
	projects.js
	snaffle.js
	headlines.js
	history.js
	snozberries.js
	wiki.js
	area-chart.js
	popover.js
	portfoliocard.js
	portfoliochart.js
	portfoliodetails.js
	portfoliolegend.js
	portfoliosnippet.js
	portfoliotable.js
sass/
  style.scss
index.js
rootReducer.js

Technology
orientated
layout

Feature
orientated
layout

Ideas

Organise from 'business logic' not technology

name.tech.lang eg. homepage.constants.js

7+ items put in a subdirectory (maybe)

no index.js (maybe)

AppRoot
	Articles.component.js
	Todos/
		Todos.component.js
		Todos.reducer.js
		Todos.api.js
		Todos.scss
		TodoItem.component.js
	Projects/
		Projects.component.js
		Projects.scss
	Portfolio/
		PortfolioHomePage.component.js
		PortfolioCard/
			PortfolioCard.component.js
			PortfolioCard.constants.js
			PortfolioCard.actions.js
			PortfolioCard.scss
		PortfolioChart/
			PortfolioChart.component.js
			PortfolioChart.constants.js
			PortfolioChart.actions.js
		PortfolioDetails/
			PortfolioDetails.component.js
			PortfolioDetails.constants.js
			PortfolioDetails.actions.js
		PortfolioLegend/
			PortfolioLegend.component.js
			PortfolioLegend.constants.js
			PortfolioLegend.actions.js
		PortfolioSnippet/
			PortfolioSnippet.component.js
			PortfolioSnippet.constants.js
			PortfolioSnippet.actions.js
		PortfolioTable
			PortfolioTable.component.js
			PortfolioTable.constants.js
			PortfolioTable.actions.js
			PortfolioTable.scss
	Projects/
		Projects.components.js
		Projects.constants.js
	Headlines.components.js
	History/
		History.components.js
		History.constants.js
		History.scss
	Snaffle.component.js
	Snozberries/
		Snozberriess.component.js
		Snozberriess.constants.js
		Snozberriess.reducers.js
		Snozberriess.svg
		Snozberry/
			SnozBerry.component.js
			SnozBerry.constants.js
			SnozBerry.svg
	Wiki/
		Wiki.components.js
		Wiki.constants.js
Common/
	Area-Chart/
		Area-Chart.components.js
		Area-Chart.constants.js
		Area-Chart.scss
	Popover/
		Popover.component.js
		Popover.constants.js
		Popover.reducers.js
index.js ←--- ARGH but just one
rootReducer.js

Redux Saga

const reducer = (previousState = {time: Date.now() }, action) => {
	switch(action.type){
	case 'GET_TIME':
		return {
			time: Date.now(),
		};
	}
	default:
		return { ...previousState };
}

store.dispatch({ type: 'GET_TIME' });

const storeState = store.getState();
console.log(storeState.time);