Installation

Editor Tools

VSCode Setup

IntelliJ IDE Setup

Emacs Setup

Getting Started

Hosted Nature

Syntax and Native Data Types

Syntaxlessness

Build tools and package management

Project structure

Shadow CLJS API

NREPL and Inline Evaluation

Paredit

Language Semantics

Conditionals

Atoms

Function definitions

Sequence Operations

Threading Macros

Transparent interoperability

Standard Library

Overview

Project Setup

Reagent

React Router

UI and CSS

Introduction to State Management

App Structure and Authentication UI

Firebase Project Setup

Auth Event Handlers

Auth Effects and Firebase Initialization

Auth Subscriptions

Auth Containers

Create Graphics

Read and Delete Graphics

Create, Read and Delete UI

Graphic details page

Graphics Editor

Saving graphics

Tinycanva

Production packaging

Code splitting

Unit testing

Conclusion

Advance Concepts

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

The concept of tree-based codes aka LISPs

Editor integrations that make writing LISPs easy

Mental models for Clojure's rich standard library

Understanding of tools like NREPL to aid fast feedback

Hosted nature of Clojure and its ability to tap into JVM, JavaScript, CLR and other language ecosystems

Syntaxlessness and expressiveness of the language

How to create React applications with Clojure

Integration with APIs using Google Firebase

Key-based authentication and access control

Integration with React Router and Fabric JS

Map of communities and resources that can help when you get stuck

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Featured Podcast

A Software Engineer's Guide to Venture Capital with AngelList Engineer Sumukh Sridhara

Tinycanva: Clojure for React Developers

Welcome: Introduction

Introduction:

Start Here

Module 1: Getting Started

Lesson 1:

Installation

Lesson 2:

Editor Tools

Lesson 3:

VSCode Setup

Lesson 4:

IntelliJ IDE Setup

Lesson 5:

Emacs Setup

Module 2: Language Semantics

Lesson 1: (2:31)

Hosted Nature

Lesson 2: (12:35)

Syntax and Native Data Types

Lesson 3: (2:20)

Syntaxlessness

Lesson 4: (3:16)

Build tools and package management

Lesson 5: (11:12)

Project structure

Lesson 6: (9:00)

Shadow CLJS API

Lesson 7: (9:06)

NREPL and Inline Evaluation

Lesson 8:

Paredit

Module 3: Standard Library

Lesson 1: (4:08)

Conditionals

Lesson 2: (4:39)

Atoms

Lesson 3: (7:47)

Function definitions

Lesson 4: (12:22)

Sequence Operations

Lesson 5: (4:04)

Threading Macros

Lesson 6: (5:09)

Transparent interoperability

Module 4: Tinycanva

Lesson 1: (2:36)

Overview

Lesson 2: (6:22)

Project Setup

Lesson 3: (7:08)

Reagent

Lesson 4:

React Router

Lesson 5:

UI and CSS

Lesson 6: (9:27)

Introduction to State Management

Lesson 7: (1:55)

App Structure and Authentication UI

Lesson 8:

Firebase Project Setup

Lesson 9: (4:38)

Auth Event Handlers

Lesson 10: (6:58)

Auth Effects and Firebase Initialization

Lesson 11: (6:46)

Auth Subscriptions

Lesson 12:

Auth Containers

Lesson 13:

Create Graphics