Clean and Solid boilerplate for Remix

What is inside?

• 💡 TypeScript: A language for application-scale JavaScript
• 💟 Back-office Systems Templates: Typical for enterprise "backend" applications
• 🌐 International: Built-in i18n solution
• ⚙️ Best Practices: Solid workflow to make your code healthy
• ⚡ Router Redirect: Available Error boundary page
• 📝 Code Conventions:
  • Linter
  • Formatter
  • Spell checker
  • Husky
  • Commit-lint
• 🚀 State of The Art Development: Newest development stacks:
  • Zustand
  • Shadcn
  • React hook form
  • Lodash
  • Momentjs
  • React 18
  • Dashboard advanced
• 👌 Unit Test:
  • Fly safely with unit Jest
  • 100% coverage.
• 🌀 Available CI/CD

Features

• ✅ Authentication: based on Remix auth
• ✅ Role Base Access Control:
  • What is RBAC?
  • Workflow
• ✅ Manage action history

Code Structure

• @: Styles core by Shadcn, available Complex Component like cmdk, Table
• app: contains the main source code
  • constants: Reusable constants across the application (both client-server)
  • hoc: Store Higher order function.
  • hooks: Store React custom hook.
  • routes: Core Remix's routing system
  • services: Backend endpoints and logic
  • types: Reuseable for Typescript
  • utilities: Useful function.
• public: Static assets such as images, fonts.
• test: Unit tests
• build: Output directory for compiled code and assets generated during the build process.
• docs: Documentation files, including READMEs, guides, and API documentation.

Development mode

Environment

1. Node 18
2. Mongodb

Add hierarchy 1:

db.getCollection("users").insert(
  {
    "_id" : "root",
    "isoCode": "VN",
    "username" : "superuser",
    "email" : "leminh.nguyen@btaskee.com",
    "status" : "ACTIVE"
  }
)

db.getCollection("permissions").insert(
  {
    "_id" : "manager",
    "description" : "This is manager, can access data all cities of each country, view action history of Team, and manage member",
    "module" : "system",
    "name" : "Permission: Manager"
  }
)

db.getCollection("roles").insert({
    "_id" : "manager",
    "permissions" : [
        "manager"
    ],
    "name": "Role: Manager",
    "status": "ACTIVE"
})

db.getCollection("permissions").insert(
  [
    {
      "_id" : "root",
      "description" : "This is super user, all powers",
      "module" : "system",
      "name" : "Super user"
    },
    {
      "_id" : "write/role-management",
      "description" : "Groups management feature: Write roles (create - update - remove)",
      "module" : "system",
      "name" : "Groups management feature: Write roles (create - update)"
    },
    {
      "_id" : "read/role-management",
      "description" : "Groups management feature: Read roles",
      "module" : "system",
      "name" : "Groups management feature: Read roles"
    },
    {
      "_id" : "write/group-management",
      "description" : "Groups management feature: Write children groups (create - update - remove)",
      "module" : "system",
      "name" : "Groups management feature: Write children groups (create - update - remove)"
    },
    {
      "_id" : "read/group-management",
      "description" : "Groups management feature: Read children groups",
      "module" : "system",
      "name" : "Groups management feature: Read children groups"
    },
    // will remove soon
    {
      "_id" : "a-1",
      "description" : "Testing: a 1",
      "module" : "a",
      "name" : "Testing: a 1"
    },
    {
      "_id" : "a-2",
      "description" : "Testing: a 2",
      "module" : "a",
      "name" : "Testing: a 2"
    },
    {
      "_id" : "b-1",
      "description" : "Testing: b 1",
      "module" : "b",
      "name" : "Testing: b 1"
    },
     {
      "_id" : "b-2",
      "description" : "Testing: b 2",
      "module" : "b",
      "name" : "Testing: b 2"
    }
  ]
)

db.getCollection("roles").insert({
    "_id" : "root",
    "permissions" : [
        "root"
    ],
    "name":"Role: Super user",
    "status": "ACTIVE"
})

db.getCollection("groups").insert({
    "_id": "group-superuser",
    "name" : "Group: Super user",
    "roleAssignedIds" : [
        "root"
    ],
    "userIds" : [
        "root",
    ],
    "genealogy": [],
    "status": "ACTIVE",
    "hierarchy" : NumberInt(1)
})

Because this is internal applications, the User cannot register freely. We will create Root account first, and create another user by core workflow.
Example:

db.getCollection("users").insert(
  {
    "_id" : "root",
    "isoCode": "VN",
    "username" : "superuser",
    "email" : "leminh.nguyen@btaskee.com",
    "status" : "ACTIVE"
  }
)

After that, forgot and change password (to match by your .env, because this machine hash password from your key and salt-round).

You must to verify at your Email to reset password.
If your STMP don't available, you can go to direct link:

`${localhost}/reset-password/${resetPassword.token}`

Start local

npm run dev

Deployment

Manually

First, build your app for production:

npm run build

Then run the app in production mode:

npm run deploy

Now you'll need to pick a host to deploy it to.

Dockerfile

We have dockerfile to deploy anywhere you want.