rabelais88 / portfolio-2019q2

portfolio with Next.js + Express + Mongoose + Jest + Mocha + Redux + Vue-Admin + JSDOC

Portfolio /w Next.js(React-redux) + MongoDB

Travis CI -

• author sungryeol park([e-mail])
• used tech stack:
  • React
  • Next.js(Client)
  • Vue.js(Admin)
  • Redux(Redux-thunk)
  • Express
  • Mongoose
  • Mocha + Jest
  • passport.js
  • PostCSS + eslint + stylelint
  • PWA
  • TravisCI
• design process: Adobe Photoshop + Figma

Commands

initialize & register admin to db

# mongodb should be running background first
# api/
yarn install
yarn setup
# www/
yarn install

in case of changing lint setup

yarn lint:init

test run & analyzation

# for both www, api, admin
yarn dev
# only for www
yarn analyze
yarn analyze:server # only for server
yarn analyze:browser # only for browser

production deployment

# for both www, api
yarn build
yarn start
# for admin
yarn build:prod
# admin doesn't have server. use nginx to serve.
# docker part is still in progress

mocha test for api server

# only for api
yarn test:watch --grep ${targetString}
# or
yarn test:grep ${targetString}

as there is ServiceWorker working on background,

cache TTL/max-age should be set to 0

for displaying lint message in vscode,

must install vscode extensions for eslint & stylelint

solved & ongoing issues

• jest doesn't work properly with mongoose testing → replaced with mocha
• mocha --watch doesn't work properly with mongoose. → reference link
• apply https →https should be served via nginx proxy → reference link
• apply scss
• apply eslint & prettier for frontend(react)
• apply jwt & cookie auth model
• apply eslint & prettier for backend
• apply typescript(or ts type definition) → decided to substitute with JSDOC
• api separation
• doesn't properly compile on personal windows machine;fails on reading JSX. working fine on Mac; replaced SASS module with PostCSS
• replace scss with better substitute: it breaks easily on different environment
• full graphql adoption: overhead is too big
• full typescript adoption: typescript is not appropriate for quick inidivual development. Instead, partially adopted typescript definition files → reference link
• should be served via Docker - check server disk limit first
• PWA optimization

file structure

use tree --dirsfirst -I 'node_modules|build|.git|yarn.lock|yarn-error.log|readme.md|.next|*.scss|.DS_Store' -L 2 -a -d to refresh this list

├── .vscode
├── admin-vue
│   ├── mock
│   ├── public
│   ├── src
│   └── tests
├── api
│   ├── src
│   └── test
└── www-v2
    ├── .storybook
    ├── api
    ├── components
    ├── lib
    ├── pages
    ├── static
    ├── store
    ├── stories
    └── styles

addendum

• https://github.com/zeit/next.js/tree/canary/examples
• https://www.typescriptlang.org/docs/handbook/type-checking-javascript-files.html
• https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html