RemixFast 
Learn
Docs
Blog

Code Structure

Overall App Codebase layout is as follows

app
 ├── components
 ├── hooks
 ├── models
 ├── routes
 ├── styles
 ├── util
 └── views
app
 ├── components
 ├── hooks
 ├── models
 ├── routes
 ├── styles
 ├── util
 └── views

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

Components Docs

Hooks

Includes ready to use hooks for common functionality

  • Use Date Format
  • Use Debounce
  • Use Matches Data
  • Use Pager
    • Use Pager (normal link based)
    • Use Fetch pager
    • User Infinite Pager
  • User Scoped Search Params
  • Use Timeout
  • Use Dialog (included as part of Dialog componenent)

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

Models Docs

Routes

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

  • Login
  • Logout
  • Reset Request
  • Reset
  • Join
  • Health check

Entire app is behind pathless layout route __app that is used to as entry point into main app and houses common functionality like notification, user theme etc.

__app folder contains all the generated routes, list routes at root as well as nested routes for dynamic segments.

In addition to user defined routes, __app 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

Route Details

Styles

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

Util

Utility functions

Views

Main application UI, including app and admin panel UI (used in Route)

There is a separate folder for each route view. Folder contains index.ts that exports default view used for display by route. Inside folder you will find sub-folder for different view types, list, form etc. View folder hierarchy mirrors nested route hierarchy, making it easier to know which view will be shown for a given route.

List and Form view have a container component that is responsible for getting and submitting data and an inner "view" component that houses actual components that make up the view. This makes it very easy to change UI and actions independently, allowing you to just test and deploy the change, resulting in easy maintenance experience. You can also replace entire view with something different and just to a default export!

View Details