Hatchify

Hatchify is a web application framework designed to accelerate the development of CRUD applications. If all you need is basic app, Hatchify can provide you with a fully functional system straight from a datatype schema. If you have more specialized requirements, Hatchify makes it easy to customize every part of the application to meet your needs.

Hatchify is structured as a number of modular libraries that can be consumed individually to use as much, or as little, as you require. Hatchify provides the speed of low-code development and the extensibility of custom code.

• Getting Started
• Guides
• API Docs
• Need help or have questions?

Getting Started

In just a few short steps we will set up a project containing a Hatchify frontend and backend. Our frontend will use React and MUI, and our backend will be using Koa. The project also uses Vite as a dev server which handles much of the React configuration for us.

✏️ Perform all the following steps:

Note: The ✏️ icon indicates when to follow along!

1. Ensure you’re using node 18 and npm 9 or above

   node -v
   npm -v

2. Create a new project:

   npm init @hatchifyjs@latest

   • For the backend prompt answer: "Koa"
   • For the database prompt answer: "SQLite"

3. Change into the project directiory and start the server:

   cd hatchify-app
   npm run dev

4. Navigate to the Hatchify welcome screen at http://localhost:3000/:

Congrats, you’ve got a seed of something great started!

Schemas

Hatchify’s schemas define your data structure fields and relationships. We share these schemas across our backend and frontend to create database tables, generate REST endpoints, and create React components and data fetchers. Because these schemas are the backbone of our frontend and backend, we will place them in the empty schemas.ts file at the root directory of our project.

✏️ Update schemas.ts file with the following:

// hatchify-app/schemas.ts
import { belongsTo, boolean, dateonly, integer, hasMany, string } from "@hatchifyjs/core"
import type { PartialSchema } from "@hatchifyjs/core"

export const Todo = {
  name: "Todo", // 👀
  attributes: {
    name: string({ required: true }), // 👀
    dueDate: dateonly(),
    importance: integer(),
    complete: boolean({ default: false }),
  },
  relationships: {
    user: belongsTo("User"), // 👀
  },
} satisfies PartialSchema

export const User = {
  name: "User",
  attributes: {
    name: string({ required: true }),
  },
  relationships: {
    todos: hasMany("Todo"), // 👀
  },
} satisfies PartialSchema

As soon as you save this change, the app will automatically reload to include the new data types you've added:

This defines a Todo and User type, each with some attributes. It also creates a relationship where a Todo belongsTo a User, and each user hasMany Todos.

You can refer to our documentation for more information on how to define schemas.

Seed Data

Hatchify doesn’t currently generate forms (though we are working on it!). To add data, you can use the REST APIs that Hatchify’s middleware provides.

Seeding Sample Data

✏️ Run the following command in a new terminal window to seed some sample data:

npx hatchify-gsg-seed

This command will run a script that uses the REST API to seed some sample data into the database. For more information on the request being made, you can reference the create function in the hatchedKoa.model documentation.

To learn more about the service layer, read the docs regarding our JSON:API implementation

With some data in place, we can now further review the project.

Interact with the UI

Now that data has been seeded the UI should look like:

You can start using this basic app to sort & filter the data:

What you've built is currently bare bones, but read through our guides in the following section to learn how to enhance it to meet your needs.

Guides

Continue learning more about the Hatchify feature set with these guides that continue from the example above:

• Using PostgreSQL DB
• Adding custom endpoints
• Adding request authorization
• Customizing your list
• Adding checkboxes to the list
• Application data validation
• Production / Custom Usage Guide
• Adding form-like behavior to the DataGrid

API Docs

Learn how to make Hatchify match your needs with its technical interface documentation:

• Core - Learn how to define a Schema, attributes, and relationships with Hatchify's interface for defining your data.
  • Attributes
  • Relationships
  • Schema Naming
• JSON:API - Learn the details of our JSON:API implementation.
  • Creating
  • Reading
    • Filtering
    • Paginating
    • Sorting
    • Relationships
    • Sparse Fields
  • Updating
  • Deleting
• Koa - Learn how Hatchify leverages Koa middleware functionality
  • API Docs
• Express - Learn how Hatchify leverages Express middleware functionality
  • API Docs
• React - Learn how to use and customize Hatchify's schema-driven library of React components and CRUD methods
  • REST Client
  • API Docs
  • Components

Need help or have questions?

This project is supported by Bitovi, a web software consultancy. You can get help or ask questions on our:

• Discord Community

• Twitter

Or, you can hire us for training, consulting, or development. Set up a free consultation.

Read more about Hatchify

Gain more insight into Hatchify by checking out our blog posts.

• Introducing Hatchify: Low-code libraries for React, Node, and Sequelize
• Hatchify: The Fastest Way to Build JSON: APIs

Trying Hatchify Online

You can try Hatchify online on StackBlitz. It runs the Hatchify-based build setup directly in the browser, so it is almost identical to the local setup but doesn't require installing anything on your machine.