App structure and authentication UI#

The structure we are going to use for our app is largely influenced by React Router. For every route path, we are going to have a dedicated namespace. React routes grow in the shape of trees and our namespaces will grow in the same way. Here is a table of possible routes and their respective namespaces:

This structure is inspired by Fractal Structure for React Apps. Notice how the namespace graph and the routes mirror each other. This structure is opinionated and made to fit React Router.

For smaller apps, like ours, it also makes sense to have a single namespace called app.views with all view-related logic. Feel free to change things up as you get the hang of it.

Index route#

In real-world apps, the index page is generally a landing page with various links including to register and log in. In real life, it's also probably a static html page. In our simple application, however, the index page is a component that points to the login and register page.

Let's create this component with Hiccup and Tailwind CSS:

(ns app.pages.index

  (:require ["react-router-dom" :refer (Link)]))

(defn page []

  [:div.m-2

   [:> Link {:to "/login" :class "mr-2"} "Login"]

   [:> Link {:to "/register"} "Register"]])

The classes m-2 and mr-2 specify margin all and margin right at scale 2. The Link component is a React component adapted to Reagent using :> shorthand. To tie this component to the / index route, we need to update the app.core/root-router:

    [:> Route {:exact true :path "/"} [index/page]]

And require the app.pages.index namespace in app.core:

            [app.pages.index :as index]

With the route connected to the component, you should see a humble landing page if you visit http://localhost:3000.

You might have some remnants of the test-ui component in app.core namespace. These can be safely removed.

Login route#

For this application, we'll be using Firebase Authentication with email and password. The login form has two input fields: email and password, and a button to submit the form. Blueprint's InputGroup and Button components will be handy.

To store the state of the input, we'll use a ratom. Since the login component is mounted at /login, we need to create the namespace app.pages.login:

(ns app.pages.login

  (:require ["@blueprintjs/core" :refer (InputGroup Button Intent)]

            ["react-router-dom" :refer (Link)]

            [reagent.core :as r]))