codetogether-ui

Library of reusable components for CodeTogether

This project was bootstrapped with Create React App.

Contribute

• Editor Requirements
• System Requirements
• How To Use
• Dependency Overview
• Project Structure

Editor Requirements

• EditorConfig
• EsLint
• Prettier

System Requirements

• node.js

How To Use

Download the project

git clone [email protected]:AhmedAbdulrahman/codetogether.network.git

Install dependencies

yarn

Developing in Storybook

yarn storybook
(open localhost:9009)

Building Storybook

yarn storybook:build

Start the app

yarn build && yarn start
(open localhost:3000)

Dependency Overview

The application is built using

• Create React App

Moreover we've configured and use:

• eslint - for linting our JS code
• webpack-bundle-analyzer - for analyzing our bundles and dependencies
• storybook - for creating an interactive styleguide

Project Structure

We split components into different types, to then group them by feature:

.storybook/ # Storybook config
src/components/ # Presentational or dumb components. They usually don't contain any complicated logic.
|-- SomeComponent/
|   |-- index.js
|   |-- SomeComponent.js
|   |-- stories.js
src/containers/ # Intelligent components, in other words, components with logic, e.g. forms.
|-- SomeContainer/
|   |-- index.js
|   |-- SomeContainer.js
|   |-- stories.js
src/pages/ # Components which are rendered by a route directly. These can also be intelligent.
|-- SomePage/
|   |-- index.js
|   |-- stories.js