Posted on Oct 14 You might have heard of Bun and Appwrite recently. Bun is a new, faster alternative to NodeJS and NPM. And Appwrite just launched their Cloud Version, which is a cool and easy-to-configure alternative to Firebase.So, let's look at how to build a really fast, modern full stack application with :I had built this typing practice website earlier : TyprIt's been 2 years, and it's time to give it an upgrade!!The first version above, did not have any way to track your progress based on an account. And of course, at that time Neomorphic designs were the trend. And I built it using HTML, CSS and Vanilla Javascript.And how did I build it?Yes, you read that right! The create-next-app works with Bun. Just use the --use-bun flag :And you use the blazing fast speeds of bun ⚡️.Choose the options according to you : You will see a bun.lockb file which is used to store the packages details and their metadata so that when the repository is cloned, the dependencies are installed faster.Since I am creating a typing practice website, the most important page is the practice page itself. Naturally, I created it first.I used API Ninjas to get a few endpoints : A really important feature in the typing page is updating UI as the user types to display what he has typed till now.For this I created a separate component and passed in 2 parameters : I divide the original into 2 parts : TypedString and UntypedString and display them in different colors :And the practice page has some more components like : errors, typed(which is the typed string), score calculator, etc.Check out the code here(fairly simple to understand).I know most of you have been waiting for this. So let's dive into Setting up Appwrite Cloud for the App.Once you have created your account and logged in, you will see a page like this : Note : You won't see projects, you will see the create project button in the top right corner.Select the Empty Project option and give a name.In the next screen, you will see platforms that you would like to create for : Once you select the platform, follow the guide Appwrite provides for that platform.The Setup Guide has the first page as below : The important thing to note here is : The Hostname during development should be localhost and for different domains, only add the path.domain without the https or subdmainsTo install in your Web Projects (ReactJS, NodeJS, NextJS) :The Setup is now complete and you can use Appwrite cloud in your Project.For using Appwrite Cloud in your project, you will need 2 things :You can also find both of them in the project settings tab :Once you have these, create a .env file and store them there.For doing any task with Appwrite Cloud, you need to connect to the client. For this use the following code (Note here that I have abstracted this get client method as this is required in multiple places) :Now, you can call this function whenever you want to use Appwrite.For my app, I mainly used 4 Authentication features : For this the default selections as shown below are enough(the settings tab of the Auth section in the Cloud Dashboard), but Appwrite supports many other OAuth providers that you can explore. Creating a User is the first step for Authentication, also called Sign Up. Appwrite Cloud supports Email and Password based Users. For creating a user, we use the account.create() method.Note here, that we need the Appwrite client(which we will get from the method we created earlier) and then pass in the client created to Account constructor provided by Appwrite.We can then use this object to create a new user with the following parameters : The following function takes care of this :Once a user is created, you need to create a new session for the user to login. Similar to the above, we use the createEmailSession method for this :An important thing is that we want to check if there is a user currently logged in. For this we can use the account.get() method instead of asking the user to login every time they open the website.An important step is logging out a user once they are done to protect their data. This is also relatively simple and takes place in 2 steps : And their you have it : the complete authentication flow for your website that can be setup in minutes with the user of Appwrite Cloud.The Authentication flow looks like : Appwrite Cloud also provides the functionality to create databases and store data based on our needs. Just like the project setup, database setup is also super easy.Before adding data, you need to create a Database for your project.Head to the Database section and click on Create Database button. Add a name and (optionally) add a custom ID. Similar to the above, click on the Create Collection button once your database is created. You also have the option to create a custom ID.This is a really important step. Without creating the attributes, you will NOT ❌ be able to add new Documents.You have a few options to select from for your new attributes like : You have setup your database and created you collection.Now let's get to the actual fun part. You will see how easy it is to add and retrieve data from Appwrite Cloud Database.Appwrite provides a class called Databases that helps us connect with the Database. But, we need to pass in the client here are well.After connecting to the Database client and before reading data, we need to create Data. For this, Appwrite provides us the databases.createDocument method that takes in 4 arguments by default : The complete code for the above looks like this :You can read more about Appwrite Permissions here e🔗Once you have created data, you can start fetching them. By default, you do not have any method to fetch only the current user's data. But you can use Queries to modify your results.For my app, I only need to fetch the current user's data so I used the following query :You can read more about Appwrite Queries here 🔗Also, the complete function to fetch the user's data is :And there you have a full stack web app created easily with the power of Appwrite cloud.Currently Appwrite is in beta, but they are soon launching their Pro and Enterprise plans 👇🏻A huge shoutout to the Appwrite team for building such an awesome Open-Source project. Templates let you quickly answer FAQs or store snippets for re-use.Nice article @thevinitgupta! Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Jonathan Gamble - Oct 6 Dhruv Joshi - Oct 7 Hezekiah - Sep 11 Donna Brown - Sep 6 Once suspended, thevinitgupta will not be able to comment or publish posts until their suspension is removed. Once unsuspended, thevinitgupta will be able to comment and publish posts again. Once unpublished, all posts by thevinitgupta will become hidden and only accessible to themselves. If thevinitgupta is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Vinit Gupta. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag thevinitgupta: thevinitgupta consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging thevinitgupta will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.