Organization and Architecture

We need to cover the organization and structure of the repo here.

Technology stack

• We use React.js,
• Redux,
• Node.js,
• REST API,
• Webpack,

Node modules:

Functional

• AirBnB date picker https://github.com/airbnb/react-dates
• Formsy
• Filepicker
• React-select
• React SVG Loader
• TC React Components (Topcoder UI Library)
• React CSS Modules
• React CSS Themr
• React Stickynode

:Helpers

• ESLint
• Babel
• Mocha
• Chai
• Styleint
• StyleFMT
• Draftjs

---

Architecture

Organization

As any big project ours is organized in a way that allows scale and feature separation. It is best that each item has its own place, and everybody can follow and find the code she is looking for.

Connect App follows the following structure:

root/
|--config/						(all webpack configuration files)
|--examples/					(example code)
|--node_modules/				(all node dependencies)
|--src/							(all source file)
	|--actions/					(system actions)
	|--api/
	|--assets/					(all icons and images)
	|--components/				(global components)
	|--config/					(app configurations)
	|--containers/				(app pages)
	|--helpers/					(source file)
	|--reducers/				(redux reducers)
	|--styles/					(all the app styles)
		|--_helpers/			(helper files included in main.scss)
		|--themes/				(where all themes are stored)
			|--/connect			(the default theme)
		|--vendors/				(all 3rd party styles in a separate folder)
		|--main.scss			(the compiled stylesheet)
	|--index.html
	|--index.jsx
|--readme.md
|--package.json

Components

We have 3 types of components:

• Dumb components
• Smart components
• Containers

Project organization

We use feature separation for different parts of the source code.

Styling of components

Our repo uses various 3rd party components that we have to restyle.