React Inertia Typescript Adonis with TailwindCSS

A batteries-included starter for Adonis apps.


You will have to have mysql running on your machine

git clone https://github.com/kavinvalli/rita new-project
npm i
cp .env.example .env
node ace migration:run
node ace db:seed
npm run dev



Types for the app are defined in resources/js/lib/types.tsx, this file has the interface IPageProps, which is used with the usePage hook from Inertia for typing shared data coming from the backend.

const { props: { user } } = usePage<IPageProps>();

This file also has IUser, the interface for the User model.


resources/js/lib/use-title.tsx contains the useTitle hook, used to set the title from inside a React component. You could also use Inertia’s Head component for this.

Ace command to create pages

node ace make:page <PAGE NAME> creates a page in resources/js/pages using the template in commands/templates/page.txt.
For example: node ace make:page auth/login or node ace make:page test


RITA supports authentication with email-password, Github and Google out of the box. Social authentication is implemented with Ally, so it should be easy to add other providers. See app/Http/Controllers/SocialAuthController.ts for implementation.

Ace command to create user

node ace create:user prompts you fields to create a new user directly from the cli.

Inertia Shared Data

You can share data across all inertia pages by editting start/inertia.ts and updating IPageProps in resources/js/lib/types.tsx


Admin accounts have the admin property on the User model set to true. By default, all users who register via the /auth/register route are not admins.


You can use the auth and the admin middleware which are set in app/Middleware

Seeded admin account

The database seeder creates an admin account with the following credentials:

Email: [email protected]
Password: adminadmin

Frontend Authorization

resources/js/lib/authorization.tsx contains the following components – Admin, User, Authenticated and Guest. These show/don’t show the children passed to them based on the user and authentication state.

  Only an admin can see this

  Only a user who is not an admin can see this

  Both users and admins can see this

  Logged in users can not see this

Linting and Formatting

This project comes with ESLint and Prettier setup out of the box, configs are in .eslintrc.js and .prettierrc respectively.