rajulamsal124/babyland-admin-view

Here are some guideline for developer who are working as a front-end developer in this project.

---

#Branches

Branch structure

Branches:
- master => Main branch (only authorized person has permission to push in this branch)
- development => once features/bug has been resolved, all the code has been merged in this branch.
- story-branch => once developer started to work on a new story, then push their code in new story branch.
- folder-structure => all the information about folder structure (no need to push and pull).

Development Branch

Process of version control

1. Developer always have to pull code from development branch and sync with it.

~ git pull

2. When start to work on a new features, developer always have to switch to new branch in this format.

Format: letter of first and last name, slash story number.

git checkout -b 'format'

sample: git checkout -b pd/s01

3. Make a PR(Pull Request) after completion of story and always add a code reviewer in associated PR.

4. Make a habit to check on your PR, so that you can follow along with status, comments, tasks of your PR.

5. Once your PR is approved and merged to development branch then you can switch back to development branch and ready to work on another story.

---

Folder structure

Here are the complete React folder structure for this project.

|____ Src
  |____ api
    |____ lib
      |____ axios.js
      |____ environment.js
      |____ ****
    |____ index.js
    |____ api.md

api.md

|____ Src
  |____ api
  |____ assets
    |____ assets.md

assets.md

|____ Src
  |____ api
  |____ assets
  |____ components
    |____ *commonComponent*
      |____ styles
        |____ style.scss
    |____ component.md

component.md

|____ Src
  |____ api
  |____ assets
  |____ components
  |____ pages
    |____ *page*
      |____ styles
        |____ style.scss
    |____ pages.md

pages.md

|____ Src
  |____ api
  |____ assets
  |____ components
  |____ pages
  |____ redux
    |____ **
      |____ action.js
      |____ constants.js
      |____ reducer.js
      |____ selector.js
    |____ store.js
    |____ reducer.js
    |____ redux.md

redux.md

---

We use visual studio code as a default code editor. ( Visual studio code download link ).

Here is the settings.json file which is modified as we need for our product. so download provided setting file and update in your local machine.

1. Downlaod : settings.json

2. Goto visual studio code setting or press ctrl + ,

3. Update your setting.json file.

4. And also install all recommended vs code extension, mannualy install from here.

---

We're using eslint, airbnb and prettier for code formatting. so you must have these 2 files in your root folder.

1. .editorconfig
2. .eslintrc.json

And also you must have to include these packages in your package.json file as a dev-depencies.

"devDependencies": {
    ...
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.3",
    "prettier": "^2.0.5"
    ...
  }

Install all dependencies using npm i command.

Happy Hacking :)