Best Practices

A feature encompasses the logic at the page level.

We recommend organizing the logic in a standardized manner for ease of future modifications.

Our structuring involves organizing code into three distinct file types:

UI File

In the UI file, you focus on developing React components, layouts, and styles using technologies like Tailwind CSS and JSX. This is where you define the visual presentation and user interface elements of your application.

Keeping UI-related code separate from other logic helps maintain clarity and facilitates easier management of frontend components.

Example: login.ui.tsx

Server File

The server file is where you concentrate on implementing the logic that will run on the server side. This includes handling requests, processing data, interacting with databases, and other backend operations.

Separating server logic into its own file ensures a clear distinction between frontend and backend responsibilities, simplifying maintenance and debugging.

Example: login.server.tsx

Hook File

The hook file serves as a bridge between UI components and server logic, housing functionality that connects frontend interactions with backend processes. This file typically contains React hooks or custom functions that handle data fetching, state management, and communication with the server.

By centralizing this logic in a dedicated file, you promote code reusability and maintainability while keeping UI components clean and focused on presentation.

Example: login.hook.tsx

By adopting this structured approach, you establish a clear separation of concerns within your project, making it easier to manage, scale, and maintain over time.

Additionally, it promotes consistency across your codebase and facilitates collaboration among team members working on different aspects of the application.

Refer the Basic Guide to learn more about the hook file and it's working. Click here

If you encounter any challenges during development, don't hesitate to seek assistance from our vibrant community on GitHub.

We have a team of expert contributors ready to provide guidance and support to help you overcome any obstacles and continue making progress with your project.