How to Build Dynamic Website with APIs, Without Backend Coding! 😮
Tags: webdev, beginners, productivity, tutorial
Published: 2022-05-16 07:26:16

For those who doesn't know, Dev Community announced a hackathon for [Appwrite](https://appwrite.io/) in the past month. I wasn't really familiar with Appwrite and when I looked it up online, I found that it's a <u>BaaS</u> (Backend as a service) platform. I'm not going to lie, I didn't quite understand the real meaning of 'Backend as a service'. I mean, what would it do for me? How would it create my APIs for me? Is it even a thing to have a backend working without a backend code? Is it bad to count on a BaaS platform in my project?

After searching the internet and reading the docs, I knew for a fact that this technology is meant to do GREAT things and help both, backend developers and frontend developers.

![Appwrite Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2haozs0q112u9yb9pccv.gif)

I was planning to do a small project for Appwrite hackathon but I ended up challenging myself to make something big. I have built an awesome project with sort of a complex backend structure. Also I made sure to see how can I accomplish database relationships, comments, admin controls, dynamic user profiles, dynamic URLs, images storing and fetching and how to integrate different APIs and more. Appwrite really made it pretty enjoyable for me to accomplish all of that.

> In this article, I'm going to tell you how to start, create and grow with BaaS, and why is it the best choice to help you start the project you have in mind immediately without wasting your time worrying about the backend.

But first, If you're curious about what I have created. Checkout my project and see for yourself 👉 [Tailwinder Project](https://dev.to/moose_said/introducing-tailwinder-home-for-tailwind-fans-powered-with-appwrite-4c0o)

![Tailwinder Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3suhrjaxsp9jxo4bxa2w.gif)

**Tip**: Video demo at the end of the submission post in the above link ↖️

---

| Table of Content              |
| ----------------------------- |
| [Definitions](#chapter-1)     |
| [Installation](#chapter-2)    |
| [The Console](#chapter-3)     |
| [Getting Started](#chapter-4) |
| [Authentication](#chapter-5)  |
| [Database](#chapter-6)        |
| [Storage](#chapter-7)         |
| [Avatar](#chapter-8)          |
| [Conclusion](#chapter-9)      |

Before we get into action, There are few important things you need to know about Appwrite. I'm going to explain things to you as if you were five, only because that's how I would like to be treated when I'm learning something new 🤔

### Definitions:<a name="chapter-1"></a>

#### What is BaaS (Backend As A Service)?

In simple English, bunch of great backend developers gathered around and created a platform and crafted the most common APIs that most websites might need. It's a way to make your life easier, your backend code shorter and start your projects faster.

#### What is Appwrite?

It's a BaaS platform but It's the simplest one and most elegant I have seen till now. They built those APIs keeping in their minds flexibility and all customization that you might need in order to to make those APIs useful and customized to your website. Appwrite has variety of SDKs for Web, Flutter, Android, Apple and Node.

#### What are SDKs?

A software development kit (SDK) is a set of tools created by developers to make the communication between the frontend and APIs as easy as it gets. Instead of writing so many code in different ways, SDKs unified and simplified the way you can communicate with APIs.

#### What Is Docker?

Appwrite is packaged as a set of Docker containers. You can install and run Appwrite on any operating system that can run a [Docker CLI](https://www.docker.com/products/docker-desktop/). so yeah! You need to know what is Docker.

Imagine that you're trying to start a business, let's say this business is an educational center. You already have teachers, secretary, screens and computers. Yet, all of that is useless if you don't have a place that is well prepared exactly for your needs to run your business. You would need a place that is easy to reach, with multiple rooms, many electrical sockets ..etc

And that is exactly what Docker is, it's allowing developers to package applications into docker containers.

> It's a place to contain your package that is well prepared and equipped with what you need to make your application run in any environment.

Therefore, Appwrite is using Docker to contain their packages and dependencies to spare you from installing all that.

Sounds a bit too much? Don't worry! You don't have to learn docker in order to use Appwrite, for now 😉

---

Now, We will discover together what is Appwrite capable of and how can BaaS help you as a developer. You would need first to install Docker on your machine and then Appwrite in your project, I will not go through the installation process as there are plenty of resources out there explaining this part.

### Installation:<a name="chapter-2"></a>

The [Appwrite Installation Docs](https://appwrite.io/docs/installation) is very descriptive and has plenty of options, but if You would like another source of information you can check out this [article](https://dev.to/appwrite/installing-appwrite-366o) by @lohanidamodar

Also if you would like to see how I connected Appwrite to my project, checkout how I did it noting that you should always hide your appwrite key, I only didn't because It's a local project for now.

1- [Web SDK](https://github.com/MooseSaeed/Tailwinder/blob/master/src/utils.js)
2- [Node SDK](https://github.com/MooseSaeed/Tailwinder/blob/master/api/server.js)

### The Console :<a name="chapter-3"></a>

![Tailwinder Console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/piopj7ie1rcdp9r4hdpc.png)

After successful installation and linking Appwrite to your project. You will have access to Appwrite's console page. this is your command control, where you have full view over everything that it's going on in your application. The above screenshot is my console page for Tailwinder project.

### Getting Started:<a name="chapter-4"></a>

I'm going to use [Tailwinder Project](https://dev.to/moose_said/introducing-tailwinder-home-for-tailwind-fans-powered-with-appwrite-4c0o) as a case study while explaining. I believe that explaining on a real life example project is the best way to show you how it all works. My area of focus will be on Appwrite features and BaaS in general, not the actual project.

- Here is the Github repo:

{% github https://github.com/MooseSaeed/Tailwinder %}

### Authentication:<a name="chapter-5"></a>

Appwrite has a huge set of APIs to help you manage your project users. You no longer have to write many lines of backend code to create user, create magic URL, update user info ..etc

If you have a look at Appwrite's DOCs, You will find that the first two sections in their REST API are [Account](https://appwrite.io/docs/client/account) and [User](https://appwrite.io/docs/server/users).

At first, I found it confusing to understand the difference between the 2 APIs but then it became clear.

1- Account API:

Account API is all about the currently logged-in user. You have access to all kind of methods but all of them relates to the user who is currently logged-in. So mostly you will use [Web SDK](https://appwrite.io/docs/getting-started-for-web) as it relates to the client side.

2- User API:

While User API is dealing with all users accross your project. Think of it as it's the admin scoped API for all users. This REST API you can integrate using serve side integration with [Node SDK](https://appwrite.io/docs/getting-started-for-server).

- Example:

{% youtube cS86TZGh46I %}

👉[Github Source Code for User Profile Page](https://github.com/MooseSaeed/Tailwinder/blob/master/src/components/main/Profile.vue)👈

In Tailwinder project, when a user is updating his own personal information on their profile page, I'm using Account API to accomplish that, because I need only the currently logged-in user to update his info. But when it comes to viewing those information on the user's profile page, I had to use [User API](https://appwrite.io/docs/server/users) to make those information visable to everyone. If I used Account API to view the user information, It won't work because It can only fetch the information for the currently logged in user, That's why User API was used.

### Database:<a name="chapter-6"></a>

Imagine a world where you don't have to worry about your database or form validation, a world without having to make so many APIs to communicate with your database, query and filter lists of rows or entries. That is exactly what a BaaS would do for you, and here we'll be talking about Appwrite.

If you have a little bit of experience with working with databases, understand it like this:

Appwrite allows you to store your documents into what they call 'collections'. Those collections can be considered as containers for whatever documents you would like to save in them. Each collection can have many attributes, those attributes are your way to say 'This collection should only accept those entries under these conditions'.

To simplify it more, think of it this way:

| Appwrite Term | Normal Database Term |
| ------------- | -------------------- |
| Collections   | Tables               |
| Attributes    | Columns              |
| Documents     | Rows                 |

- Example:

{% youtube f83HyPewuPE %}

**Here I'm allowing the user to:**

1- See every tailwind component submitted by users.
2- Submit a new component.
3- View the selected component details.

**To accomplish this I had to:**

1- Create a collection for the component type.

![Collections Console View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7m8ixuxncgj2pmwgpeb.png)

2- Set attributes for the collection to restrict and validate the entries.

![Attributes Console View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvw8ziieo7bfix00zs0e.png)

And that's it! Can you believe that? You can use the console to accomplish that if you prefer not writing code at all or just use Web and Server SDKs for the same exact outcome.

**Then of course here is the source code logic to:**

1- [View List of All Components](https://github.com/MooseSaeed/Tailwinder/blob/master/src/components/main/Components.vue).
2- [Add New Component](https://github.com/MooseSaeed/Tailwinder/blob/master/src/components/main/Addcomponent.vue).
3- [View Component Details](https://github.com/MooseSaeed/Tailwinder/blob/master/src/components/main/Componentview.vue).

### Storage:<a name="chapter-7"></a>

Storage is similar to appwrite's database, but in storage the containers are called 'buckets' and they are used to contain your files. It allows you to manage your project files. Storage API is a great way to store, upload, view, download, and query all your project files.

- Example:

{% youtube UBrBPC34HUg %}

If you have a look here, you'll see that when a component is being created, the user is able to store sample images of the component to the application. And After the component is submitted, anyone is able to preview those images in the component view page.

This is being done by a logic to create new bucket using storage API, store the selected files in that bucket and get a preview of the images inside that bucket.

You can find how I have done it [Here](https://github.com/MooseSaeed/Tailwinder/blob/master/src/components/main/Addcomponent.vue).

### Avatar:<a name="chapter-8"></a>

They even have an API to provide you with a temporary avatar for your users. Let's say a new user signs up to your application. This user should have a default profile picture, In most cases it's a grayish human shape that means this is a ghost user. Instead, Appwrite will provide you with a default profile picture with the first letter of the user's first and last name.

- Example:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/075ar7ckroif1yd5d2s1.gif)

Here the logic is simple, I'm checking if the user has a bucket with their name (Has a profile picture stored), If not then display Appwrite's avatar.

Check the source code [Here](https://github.com/MooseSaeed/Tailwinder/blob/master/src/components/main/Profile.vue).

---

### Conclusion:<a name="chapter-9"></a>

Appwrite is a technology that helps you start your project faster. But Appwrite is one of the BaaS providers out there, there are many platforms that are doing similar job to Appwrite, but I find Appwrite is the best for me until now.

You don't have an excuse anymore for delaying the amazing projects you have in mind, backend development has never been easier. There are still so many things to discover in Appwrite and BaaS in general, but I believe this is enough for one article. I may write another one with more information on how to start a project from scratch and scale it to a complete live project.

Now that you formed a decent knowledge and awareness about Appwrite and BaaS, what do you think about them? Let me know in the comments :)