How to Build a Modern Web App to Manage Events with AdonisJS and React

Introduction

Prerequisites

Step 1 — Creating an Adonis API Project and Installing Dependencies

npm i -g @adonisjs/cli
adonis --version
adonis new adonis-events --api-only
npm i --save mysql
[~/adonis-events/.env]
...
DB_CONNECTION=mysql
...
mysql -u rootmysql> CREATE DATABASE events;
[~/adonis-events/.env]
...
DB_CONNECTION=mysql
DB_USERNAME=root
DB_DATABASE=events
DB_PASSWORD=
...

Step 2 — Creating the React Front-end

npm i -g create-react-app
create-react-app adonis-events-react
npm start
[~/adonis-events-react/src/index.css]
@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';

Step 3 — Creating the Event Migration and Model

adonis make:model Event -m
create  app/Models/Event.js
create database/migrations/1541120387036_event_schema.js
'use strict'const Model = use('Model')class Event extends Model {
}
module.exports = Event
'use strict'const Schema = use('Schema')class EventSchema extends Schema {
up () {
this.create('events', (table) => {
table.increments()
table.timestamps()
})
}
down () {
this.drop('events')
}
}
module.exports = EventSchema
adonis migration:run
migrate: 1503250034279_user.js
migrate: 1503250034280_token.js
migrate: 1541120387036_event_schema.js
Database migrated successfully in 206 ms

Step 4 — Creating the REST API

Implementing the [POST] /api/events Endpoint

adonis make:controller EventController
> Select controller type For HTTP requests
create app/Controllers/Http/EventController.js
adonis serve --devinfo: serving app on http://127.0.0.1:3333

Implementing the [GET] api/events Endpoint

[~/adonis-events/start/routes.js]Route.get(api/events', 'EventController.index')

Implementing the [DELETE] api/events/:id Endpoint

[~/adonis-events/start/routes.js]Route.delete(api/events/:id', 'EventController.delete')
[~/adonis-events/config/cors.js]  origin: ['http://localhost:3000'],

Step 5 — Setting up the Client Side Components

Step 6 — Creating the Axios API Service

npm install axios --save

Step 7 — Creating Events

Implementing the Create Event Functionality

npm i --save react-flatpickr

Fetching and Displaying All Events

Step 8 — Implementing Delete Event

Conclusion

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store