# The updates to move plando to new architecture and structure

###### tags: `Task` `Frontend` `Architecture` `React` `React-boilerplate` `Plando`

## :memo: Where do I start?

### Step 1: Tasks identified

- [x] Identify and move dependencies
- [x] Migrate Material Design theme config and theme context
- [x] Migrate authentication logic
- [x] Migration Sign-in page to boilerplate
- [x] Migration Not found page to boilerplate
- [x] Migration Kanban page to boilerplate
- [x] Add DotEnv dependency to manage environment variables
- [x] Migration develop branch to boilerplate
- [ ] Create mock server to serve application

### Step 2: Things to do in the future
1. Add Prop Types to validate props received in component (Or use TypeScript)

## Problems found during jorney

:x: It icon represent the problem.
:sunglasses: It icon represent the problem correction

---

### When I start boilerplate the error below happened

:x: The `app.js` file was as initial capital letter `App.js`
:sunglasses: The correction was change it initial capital letter to lowercase

### When I start plando the error below happened

:x: Same error above, the import path was as initial capital letter

// pages/index.js
export { default as Kanban } from "./Kanban";
export { default as SignIn } from "./SignIn";

:sunglasses: Just change to lowercase and this problem has done

export { default as Kanban } from "./kanban";
export { default as SignIn } from "./signIn";

### Add Dotenv dependency and config webpack to work with it
:x: The project don't load environment variables as default
:sunglasses: Added a new dependency to manage `.env` file via webpack

Was added in project `dotenv-webpack` to load environment variables dynamically

$ yarn add -D dotenv-webpack

// internals/webpack/webpack.dev.babel.js
...
plugins: [
    new Dotenv({
      path: path.resolve(__dirname, '..', '..', '.env'),
    }),
]
...

### Starting a container with a MySQL database
:x: The nodejs server need a MySQL database to work correctly
:sunglasses: Using docker to create a container with MySQL database.

Query the [docker hub](https://hub.docker.com/_/mysql) to find the best way to create a MySQL container

$ docker run --name plando-mysql -e MYSQL_ROOT_PASSWORD=plando mysql:latest

> Obs: It'll doesn't used for while because we choose to go mocking