Skip to content

JavaScript, open source, CRUD app scaffolding that turns schemas into an app quickly, while allowing customization later.

License

Notifications You must be signed in to change notification settings

bitovi/hatchify

Repository files navigation

Hatchify

OpenSSF Best Practices npm version Contributor Covenant

Discord Twitter Follow

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

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/:

Screenshot 2024-03-06 at 10 35 02 AM

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:

Screenshot 2024-03-08 at 10 09 20 AM

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:

Screenshot 2024-03-08 at 10 05 44 AM

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

Screenshot 2024-03-08 at 10 07 58 AM

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:

API Docs

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

Need help or have questions?

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

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.

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.