How to create a full-stack React Bootstrap UI in under 10 minutes

A tutorial and reference on designing a complete web application and generating it with CodeBot UX

  • a React web UI
  • a MongoDB database
  • a Node/Express.js REST API, optionally secured using JWT
  • API client libraries — currently Java and JavaScript, with other languages set to be released soon, including C#, Swift, TypeScript
  • JSON Schema
  • Swagger/OpenAPI docs

Getting Started

VSRADS Example

Step 1: Create a project with 3 top-level packages

This will become a familiar pattern… the “three amigos” for defining a new full-stack project
  • Each wireframe is turned into a React web page
  • The navigation state machine is turned into a set of routes
  • Each domain class (created in the Domain Model package) is turned into a MongoDB collection and REST API create/read/update/delete endpoint

Step 2: Draw the domain model

Step 3: Design the UI Navigation

  • Each state represents a screen or page. Just give each state the same name as the wireframe it represents
  • Each transition (the arrows linking the states together) represents a navigation route
  • on click— e.g. “on click: Login”
  • on create — e.g. “on create: Target”
  • on update — e.g. “on update: Target”

Step 4: Design the wireframes

Creating a Wireframe

Always add a “Client Area” to represent the page boundary, and fit all the wireframe components inside it

Step 5: Define actions on UI elements

  • create (create a new record in the database)
  • update (update the current record)

Step 6: Link UI elements to the domain model

  1. Use the domain tag
  2. Draw a dependency relationship from the UI element to the domain class

Domain tag

Class Name.attribute name

Dependency arrow

Step 7: Generate the application

  1. Make sure you’ve selected the root (“Model”) package, then from EA’s ribbon menu, choose:
    Publish > Export-XML -> Export XML for Current Package
  2. Login into the CodeBot Web Console at parallelagile.net, and choose Upload XMI:

Step 8: Run the React app!

  1. Due to the action tag and the linked domain class, the React app submits the form to the REST API
  2. The REST API validates the form data against the generated JSON Schema (based on the domain class and attributes), then creates the new record in the MongoDB database
  3. Due to the on create: Run Simulation trigger on the navigation state machine, the React app will detect that a “create” just happened linked to the Run Simulation button. So (as the trigger is on a transition), the browser navigates to the next page, Listening for Mosquitoes:

In closing…

--

--

We offer training, consultancy, and support for large-scale projects. If this sounds like just what your organization needs, give us a shout at training@parallelagile.com.

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
Matt Stephens

DomainOrientedTesting.com — Articles on: Domain Driven Design, unit testing, TDD, DOT, software architecture, clean coding (and code cleaning)