Clojure is a functional hosted LISP known for its expressiveness, which has excellent interop with Javascript, Java, and Microsoft's Common Language Runtime (CLR). 

Many developers praise the elegance and productivity Clojure allows, but for many it seems like an esoteric language with an "ugly" syntax that is impossible to get started with. This course will change that view and show you how to be productive with this marvelous language.

In this course, we'll build a web-based graphics editor similar to Canva. We'll explore Clojure from the perspective of a JavaScript developer. Along the way, we'll also explore state management, authentication, API integration with Google Firebase and interop with NPM.

This course takes you from zero to an understanding of Clojure semantics, LISP tools, and building a production-ready React application in just a few hours. 

We'll start with the basics and build up to writing a fullstack app with both frontend and backend in Clojure. 

The frontend, built using ClojureScript (Clojure that runs on JavaScript) will be a single page React application with routing, key-based authentication and API integration, which will save, list, edit and delete graphics.
 

The backend is hosted on Google Firebase. 

Throughout the course, we'll learn about tools like REPL that aid development. Towards the end, we'll learn about advanced concepts like code splitting and end-to-end testing.

Clojure is unlike other languages as it is hosted on, and can leverage, existing VMs. This means that you can learn Clojure once and write it on the backend with JVM or CLR, and the frontend with JavaScript. If a new technology like Rust takes over the world tomorrow, you will probably be able to continue to write Clojure because a Rust port is already in the making.

By the end of this course, you'll have a superpower: the ability to write fullstack Clojure applications.

Build a Fullstack Web Graphics Editor in Clojure and React

This is a course on Clojure for React developers in which we'll build a web-based graphics editor similar to Canva.

Tinycanva: Clojure for React Developers

---
title: App Structure and Authentication UI
slug: tc-app-struct-auth-ui
description: Let's implement the concepts learned in the chapter on Reagent and React Router to build a login page..... plus the magic of REPL!
privateVideoUrl: https://fullstack.wistia.com/medias/2p101tchoc
code: https://gitlab.com/fullstackio/books/newline-course-apps/shivek-khurana-tinycanva-clojure-for-react-developers-app/-/tree/main/code/module_04/lesson_04.06/App/source_code/tinycanva?ref_type=heads
---

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

| Path           | Namespace                            |
| -------------- | ------------------------------------ |
| `/`            | app.pages.index                      |
| `/login`       | app.pages.login                      |
| `/graphics`    | app.pages.graphics                   |
| `/foo/bar`     | app.pages.foo.bar                    |
| `/baz/:id`     | app.baz.detail or app.baz.id         |
| `/baz/:id/biz` | app.baz.detail.biz or app.baz.id.biz |

This structure is inspired by [Fractal Structure for React Apps](https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af).
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:

```clojure { actualFilename=./protected/source_code/tinycanva/src/app/pages/index.cljs endChar=191 endLine=9 startChar=0 startLine=1 statedFilename=tinycanva/src/app/pages/index.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_04/lesson_04.06/protected/source_code/tinycanva/src/app/pages/index.cljs }
(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`:

```clojure { actualFilename=./protected/source_code/tinycanva/src/app/core.cljs endLine=17 startLine=17 statedFilename=tinycanva/src/app/core.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_04/lesson_04.06/protected/source_code/tinycanva/src/app/core.cljs#L17 }
    [:> Route {:exact true :path "/"} [index/page]]
```

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

```clojure { actualFilename=./protected/source_code/tinycanva/src/app/core.cljs endLine=4 startLine=4 statedFilename=tinycanva/src/app/core.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_04/lesson_04.06/protected/source_code/tinycanva/src/app/core.cljs#L4 }
            [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`.

![Landing Page](https://d2uusema5elisf.cloudfront.net/courses/tinycanva-clojure-for-react-developers/module_04/lesson_04.06/public/assets/index.png)

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`](https://blueprintjs.com/docs/#core/components/text-inputs.input-group) and [`Button`](https://blueprintjs.com/docs/#core/components/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`:

```clojure { actualFilename=./protected/source_code/tinycanva/src/app/pages/login.cljs endLine=7 startLine=1 statedFilename=tinycanva/src/app/pages/login.cljs url=https&#x3A;//gitlab.com/fullstackio/books/Build-Canva-with-Clojurescript/module_04/lesson_04.06/protected/source_code/tinycanva/src/app/pages/login.cljs }
(ns app.pages.login
  (:require ["@blueprintjs/core" :refer (InputGroup Button Intent)]
            ["react-router-dom" :refer (Link)]
            [reagent.core :as r]))

Let's implement the concepts learned in the chapter on Reagent and React Router to build a login page..... plus the magic of REPL!