Selectives Storybook Styleguide

<h1 align="center">Selectives Storybook Styleguide</h1>

<div align="center">

</div>


<p align="center">
    <b> react, webpack, typescript, redux, thunk, eslint, prettier</b>
</p>

---

## 📝 Table of Contents

- [Problem Statement](#problem_statement)
- [Idea / Solution](#idea)
- [Dependencies / Limitations](#limitations)
- [Future Scope](#future_scope)
- [Setting up a local environment](#getting_started)
- [Usage](#usage)
- [Technology Stack](#tech_stack)

## 🧐 Problem Statement <a name = "problem_statement"></a>

[Bundles investigation](./docs/bundles-research.md) revealed some fundametal issues with current frontend setup of Go-Site-Management.

- IDEAL: Have ability to plan and implement features within Go-Site-Management service. Operate within one web application that will have 
  all the edition features. Have ability to communicate with Data layers through REST api.
- REALITY: Currently Go-Site-Management is multiple separated services deeply coupled with Java Spring Boot (Back-End). 
- CONSEQUENCES: Unmaintainable and unscalable frontend makes features planning hard if not impossible, drastically increase estimations 
and development/support cost.

## 💡 Idea / Solution <a name = "idea"></a>

The idea is to create maintainable, scalable and readable solution that will bring some planning clarity and ease of frontend development.<br>
Main target for the solution will be **separation of concerns** between frontend and backend,
leaving frontend isolated and being responsible only for the frontend part of work. 

## ⛓️ Dependencies / Limitations <a name = "limitations"></a>

- Should use SPA approach within one of proven frontend frameworks
- Should have dedicated state management mechanism
- Should use Typescript 
- Bundling should be Frontend responsibility
- Should have linting and prettifyer
- Should be possible to set testing framework


## 🚀 Future Scope <a name = "future_scope"></a>

To have an impression about future scope visit [THIS PAGE](./docs/future-scope.md)

## 🏁 Getting Started <a name = "getting_started"></a>

These instructions will get you a copy of the project up and running on your local machine for development
and testing purposes.

### Prerequisites

You should have node LTS installed on your machine.

### Installing
Copy repository.<br> 
Run

```
yarn install
```

And 

```
yarn start
```

to run project locally.  

Use commands `yarn start:dev` and `yarn start:prod` to alter environments.  
Use commands `yarn build:dev` and `yarn build:prod` to  build project altering environments.

## 🎈 Usage <a name="usage"></a>

Open browser on `localhost:8080`  

For more detailed information about current setup visit [THIS PAGE](./docs/setup-usage.md) 

## ⛏️ Built With <a name = "tech_stack"></a>

- [React](https://reactjs.org/) - Frontend framework
- [Webpack](https://webpack.js.org/) - JS module bundler
- [Redux](https://redux.js.org/) - State container
- [Typesctipt](https://www.typescriptlang.org/) - Typed programming language
- [Thunk](https://github.com/reduxjs/redux-thunk) - React middleware for async actions