🔦 Community Spotlight - Building Doodletoy, a Doodling App🔦

Highlighting projects from the Appwrite community

Introduction

With Appwrite’s developer community growing significantly, we want to take the time to appreciate and showcase some amazing applications built by our community. Maybe you’ll be inspired by these projects to build something amazing with Appwrite, too!

This month, we’d like to give the spotlight to Dave, who built a successful app called Doodletoy. Let’s get started by interviewing them to learn more about their project and journey.

Tell us more about who you are

Hi, I’m Dave Dawkins , (@DaveDawkins on Twitter, david#4833 on Discord). I love building web apps with F# and Fable.

What is the name of the project you built?

Doodletoy! Like shadertoy but for doodles.

Why did you decide to build this? What inspired you?

A number of reasons:

I wanted to learn Appwrite
I wanted to contribute to the 2021 F# Advent Calendar .
I wanted to create a complete, finished, real-world web application using Sutil, a web framework that I’m developing.

What is Doodletoy?

Doodletoy allows you to create and share doodles. A doodle is a drawing expressed programmatically, using a custom “turtle graphics'' language. There are time and mouse position variables available, so it’s possible to have doodles that animate and/or react to mouse movement. You can also draw fractals, like the Xmas Tree and the Koch Snowflake. Some are just plain mesmerizing. See Elm’s Turtle Graphics package for some initial inspiration

What technologies did you use to create it and how did you use each technology?

Sutil - a reactive web application framework for F# + Fable

Sutil lets you build HTML that can rebuild itself in response to changes in application state. It’s not like React, in that there is no VDOM. Sutil is self-contained, and is not layered on top of another framework.

Fable - an F#-to-JS transpiler

Sutil is written in F#, and Fable is the tool which allows this.
This does the following:

Provides developer joy
Brings a degree of .NET into the browser
Eliminates so many errors that pure JS would bring (It’s true that Typescript would also do this)

F# - F# is a cousin of C#, and belongs to the .NET family. It is argued that the F stands for “Fun”, but you can see that it has its roots in functional programming. See this presentation by Scott Wlaschin for another awesome take.
In any case, it’s a beautiful language in its own right, and you can forget all about FP.

Appwrite - Appwrite is being hosted on a Linode host, and doodletoy is making use of these features

authentication so that users can log in and save their doodles.
databases to store doodles, likes and view-counts.

Who is your target audience and how will it help them to learn more about your project?

I was mainly targeting the F# + Fable community; I wanted to show both Sutil and Appwrite could be used to build applications. I can’t claim to employ best-practices, since the majority of my experience over the years has been desktop C# and server-side apps, but people who know better can enlighten me.

What issues did you run into while building this project and how did you solve them?

Sutil itself was fairly young (and still is only 2 years old), so I would have to solve framework challenges as I progressed.

Appwrite itself was at v0.11 when I started. Maintaining the server-side upgrades and learning how to deploy SSL certificates was a challenge, just because docker itself was new to me (I’m an experienced Unix/Linux user, so that part was fine).

Creating the Fable bindings for Appwrite from the Typescript API was a manual procedure. Luckily we have https://fable.io/ts2fable, which will automatically convert Typescript into F#. I needed to make some enhancements to ts2fable itself, which slowed me down a little, but that was still an enjoyable learning experience and felt good to contribute back to Fable.

In the latest Appwrite SDK, the Omit<’Document,’Keys> type caused a few issues for the F# bindings. I have yet to talk to the Smart Folk over at Fable, but in the end I replaced Omit<’Document,_> with just ‘Document, and then used a helper function to strip away Appwrite’s internal ‘$’ attributes before sending data back to the server. It makes me think that Appwrite could do this within the SDK.

How did Appwrite help your project?

Appwrite helped me specifically by providing a well-featured backend that I could host on servers I already had deployed. The installation is really easy, and there was great support on Discord. Thank you!

What are a couple of things you wish you knew before starting the project?

Knowing more about docker would have made a few things easier, but then again, Appwrite was a good way to learn about docker. The project was intended to be a challenge, so I don’t have that viewpoint of “I wish that I had known this or that"

Anything else you'd like to share?

If you develop web applications, take a look at https://fable.io. Sutil isn’t the only web framework available - if you are a React developer, then you are going to find yourself right at home with the Fable.React and Feliz projects. You will probably enjoy learning the Elmish architecture too.