Overview

Canva is an online graphics and video editing platform. It was founded by Milaine Perkins in 2007. We chose to build a clone of Canva because of the challenges of web-based graphic editors. It requires interaction with the Tom, HTML Canvas and JavaScript apart from traditional front-end tasks like routing and state management. The app we are going to build will in no way be close to the actual Canva editor, but we need to learn all the techniques required to build a JS application of all types. The Tiny Canva app will be a single page application which support for authentication using Firebase Auth, authorization using public and private routes, a create, read, update and delete UI, integrated with Firebase Realtime DB and a graphics editor built using public JS, a wrapper for HTML5 Canvas. In terms of the implementation, we will use Reagent, a CLJS wrapper for React. We will learn how to manage state locally and globally using Reactive Atoms and Reframe. Reactive Atoms is Reagent's built-in solution for local state and Reframe is a flux-like library for ClosureScript. For routing, we will stick to traditional React Router 4. This mix showcases the power of Closure in various conditions like consuming JS libraries and integrating with React. In the process of building this app, we will learn more about Closure's dev workflow, its API, ParrEdit and the Repel. In the end, we will learn about advanced concepts like code splitting, production bundles and unit testing. Here is a preview of what you can expect. We will have a login screen with error management that is connected to Firebase Auth. As a login, you will be presented with a dashboard where you can create new graphics and delete existing graphics. You can also log out. Our editor will have the ability to add shapes, multiple types of text and change the background color of the canvas. It will also allow us to export PNGs or SVGs or save the editor state to Fire base DB. We will also create options to edit individual element properties like width, height, color, etc. By the end of this module, you will have a fully functional application. You will also have practical experience about how things fit in. We hope that the app built in this module will serve as a starting point for your own Closure projects. [BLANK_AUDIO]