Project Structure

Overall App Codebase layout is as follows

 ├── app
 ├── components
 ├── hooks
 ├── lib
 ├── models
 ├── prisma
 ├── styles
 └── util

 ├── app
 ├── components
 ├── hooks
 ├── lib
 ├── models
 ├── prisma
 ├── styles
 └── util

App

app includes all possible routes of the application. These includes basic routes like

(auth)

• Login
• Reset Request
• Reset

(protected) All protected routes are behind pathless layout route that is used to as entry point into main app.

(protected) folder contains all the generated routes. Note: Route view components are housed in _components folder within the route folder itself!

In addition to user defined routes, (protected) folder also contains (admin) route that is used for Admin Panel functionality in app.

Admin routes consists of following

• user and user/[userId] for user list and details
• role and role/[roleId] for Role list and role details
• right and right/[rightId] for Right list and details

Components

Components folder includes reusable components from simple things like activity indicator to complex table with fixed header/cols!

List of included Components

• Activity Indicator
• App User
• Board Helper
• Button
• Calendar
• Confirm
• Container
• Dialog
• Drag And Drop Helper
• Error
• Form Fields
  • Auto Complete
  • Checkbox
  • Date (native/custom)
  • Numeric
  • Photo
  • Picker
  • Search
  • Select
  • Text Area
  • Text
• List Header
• List Navigator
• List Pager
• List Picker
• Navigation Bar
• Panel
• Photo
• Picker
• Prompt
• Scroll View
• Stack
• Stat
• Table

Hooks

Includes ready to use hooks for common functionality

• Use Date Format
• Use Debounce
• Use Pager
  • Use Pager (cursor based using link)
  • Use Fixed pager (page based using fetch)
  • User dynamic Pager (cursor based using fetch)
• User Scoped Search Params
• Use Timeout

Lib

• Route helpers
• Tailwind merge util

Models

Models folder includes two type of file

• model.ts = represents data entity, has methods to validate, convert form data to typed model
• model.server.ts = Prisma data access CRUD

In addition to your custom defined models, following additional models/functionality are included as well

• user
• role
• right
• rights (list of right names)
• right type
• role right
• user role
• user right
• search
• sort
• edit state
• reset password
• reset request (for password)
• change password
• prima utilities

Styles

Has few basic base styles and has auto generated tailwind style css file

Util

Utility functions