Readable

Read and share anything readable in Readable !

• Related : Chrome extension for saving bookmark

Feature

Anti-social social bookmark service

• Saving bookmark under user interest with various tags
• Suggest bookmarks based on tag analysis
• Search bookmarks
• Add event in Google calendar for reading
• Use TDD / Testing framework a lot
• Fantastic UI update
• Extra plugins:
  • CodeSee diagram in PR
  • Visualize repo in README.md
• ...

Visualize repo

Prerequite

npm install -g @nrwl/cli    // nx
npm install -g @nestjs/cli  // nest

Install

yarn

Run

For local development, use yarn dev server and yarn dev client.

Server: nx nest.js app

yarn dev server

Client: nx next.js app

yarn dev client

Codegen for client

yarn codegen

⚠️⚠️⚠️ Caution !!!

Don't use yarn start for local development.
Now it's only for deployment.

# Don't use for local development. Now it's for the deployment.
yarn build
yarn start

Commit message

type (module): commit message
      client
      server

🚚 (client): Move app module to the top
📦 (server): Add typeorm and mysql package

VSCode

Search/Select emoji for indicating type of commit and write commit message.

Gitmoji - Visual Studio Marketplace

Design Policy

• Monorepo using NX
• Use GraphQL efficiently for UI update

Backend

• GraphQL
  • Code first. (Not schema first)
  • Separate GraphQL model and persistent model.
  • Not One model for Graphql and DB entity.

• Use efficiently Apollo client cache for updating after mutation
• DDD style folder architecture

// module (user-bookmark)
├── user-bookmark
│   ├── applications
│   │   └── usecases
│   │       ├── add-user-bookmark-with-auth
│   │       ├── delete-user-bookmark-with-auth
│   │       ├── get-my-user-bookmarks-with-auth
│   │       └── sync-google-calendar-with-auth
│   ├── domain
│   │   ├── errors
│   │   │   └── user-bookmark.error.ts
│   │   └── model
│   │       └── user-bookmark.model.ts
│   ├── infrastructures
│   │   └── typeorm
│   │       ├── entities
│   │       │   └── user-bookmark.entity.ts
│   │       └── repositories
│   │           └── user-bookmark.repository.ts
│   ├── user-bookmark.controller.ts
│   ├── user-bookmark.module.ts
│   ├── user-bookmark.resolver.ts
│   └── user-bookmark.service.ts

Frontend

• Fully utilize NX monorepo features : libs and feature
• Styling using tailwind css

Deploy

1. Quick and Dirty

Before the AWS configuration, use quick and dirty.

• heroku for server nx nest.js app
• vercel for client nx next.js app

heroku

nest.js with production built static files (client)

yarn build
yarn start

Ref: Server/Port/DB

Environment	apps	NODE_ENV	DB	Port	URL
development	server	development	development	7000	http://localhost:8000/graphql
	client	development	development	4200	http://localhost:4200
staging	server	production	development	80/443	https://readable-2021.herokuapp.com/graphql
	client	production	development	80/443	https://readable-2021.vercel.app