This content originally appeared on DEV Community and was authored by Divine Orji
Real-time updates are crucial for modern software development, particularly for applications that require up-to-date information for users.
Appwrite is a popular backend-as-a-service platform that simplifies database management, user authentication, account management, and storage. With its real-time feature, updates to the app's database instantly appear in the user interface without requiring manual refresh or server response.
This is especially vital for chat apps, analytics, or live scoreboards. Appwrite's real-time functionality can also be used for more complex features like live streaming or collaborative editing.
This blog post illustrates how to use Appwrite's real-time feature to create a racing leaderboard in Nuxt.js. You will style your leaderboard using Appwrite's Pink Design system, giving it a cohesive and visually appealing look.
The source code for this project is available below:
Real-Time Racing Leaderboard | GitHub
Jump ahead:
- Prerequisites
- Setting Up a Nuxt Project
- Setting Up an Appwrite Database
- Implementing Real Time Updates with Appwrite
- Conclusion
Prerequisites
To create a real-time leaderboard in Nuxt.js, follow these requirements:
- Have a solid understanding of JavaScript, Vue.js, CSS, and styling. (If you need to brush up on any of these topics, take the time to read up on them before continuing with this tutorial).
- Verify that Node.js is installed on your personal computer (PC) by running
node -vin your terminal. If not, download and install it from the official website. - Verify that Yarn is installed on your PC by running
yarn -vin your terminal. If not, install it by runningnpm install --location=global yarnin your terminal. - Verify that Docker Desktop is installed on your PC by running
docker -vin your terminal, or follow this guide to install it. - Set up a local Appwrite instance on your PC by following this blog post.
- Consider setting up a remote Appwrite instance with Appwrite Cloud (optional but recommended) to enhance your experience. You can also set up your remote instance on Digital Ocean or Gitpod.
Setting Up a Nuxt Project
You can create a new Nuxt.js project by navigating to your preferred repo in your terminal and running the command below:
npx nuxi init <project name>
However, to speed up the process, bootstrap your project with this starter template on GitHub. It comes with Nuxt 3, Appwrite's Pink Design, and Appwrite's Nuxt module. It also contains some helper functions in the utils folder.
Clone your generated repo to your preferred local directory, and run yarn to install the dependencies listed in package.json.
Setting Up an Appwrite Database
If you have an Appwrite Cloud account, click here to open it in your browser and create a new project.
In your Appwrite project, click on Databases, and then click on Create Database to create a new database.
In your newly created database, create a collection.
In the Settings tab of your new collection, scroll down to Update Permissions and set Any to Read.
This ensures that anybody can view the data on your database. If you want your users to create, update, or delete documents in the database, check the necessary boxes.
In your collection, click on the Attributes tab and create some attributes for each document in your collection.
You will create four attributes:
-
car- String -
carNumber- Integer -
driver- String -
duration- Integer (in seconds)
Seed the database with some data by clicking on the Documents tab and clicking Create document.
Implementing Real Time Updates with Appwrite
Setting up environment variables
In your code editor, rename .env.example to .env. To update the file with the correct data from your Appwrite database, follow this guide:
- If you created your database with Appwrite Cloud, your endpoint is
https://cloud.appwrite.io/v1. If you're running a local instance, usehttp://localhost/80as your endpoint. If you hosted on Digital Ocean or Gitpod, use the provided endpoint for your chosen platform. - Store your project's ID in
APPWRITE_PROJECT_ID, your database ID inAPPWRITE_DATABASE_ID, and your collection ID inAPPWRITE_COLLECTION_ID.
In your project's root directory, update nuxt.config.ts with the code below:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
runtimeConfig: {
public: {
database: process.env.APPWRITE_DATABASE_ID,
collection: process.env.APPWRITE_COLLECTION_ID,
},
},
modules: ['nuxt-appwrite'],
appwrite: {
endpoint: process.env.APPWRITE_ENDPOINT,
project: process.env.APPWRITE_PROJECT_ID,
},
});
Here, you set up Nuxt.js' runtime config to read the data from your .env file and set up nuxt-appwrite module with the correct endpoint and project ID.
Getting Data From Appwrite's Database
Open app.vue and update the <script> tag with the code below:
<script setup>
import '@appwrite.io/pink';
import '@appwrite.io/pink-icons';
const config = useRuntimeConfig();
const { account, client, database } = useAppwrite();
// Create an anonymous session if it doesn't already exist
if (account.getSession === null) {
await account.createAnonymousSession();
}
// Get initial data from the database
const { documents } = await database.listDocuments(
config.database,
config.collection
);
// Add racing data to state
const { value: racingData } = useState('racingData', () => sortData(documents));
</script>
Here you did the following:
- Set up runtime config to access data from your
.envfile - Imported
account,client, anddatabasefrom Appwrite's Nuxt.js module - Created an anonymous Appwrite session so any user can access your database
- Got the initial data from your leaderboard database and destructured it to get the
documentskey; this contains an array of all the documents in your database - Sorted your array of documents by duration using a helper function (
sortData) and added the sorted array to Nuxt.js' state withracingDataas its variable name
Still in your app.vue, update <RacingLeaderboard> in your <template> tag:
<template>
<NuxtLayout>
<RacingLeaderboard :data="racingData" />
</NuxtLayout>
</template>
If you run the project with yarn dev and open localhost:3000 in your terminal, you will see the UI below:
Subscribing to Real Time Updates
In the app.vue <script> tag, add the code below:
<script>
// ...previous code, do not delete; just add the one below
// Subscribe to real-time updates from the database
onMounted(() => {
try {
client.subscribe(
`databases.${config.database}.collections.${config.collection}.documents`,
(res) => updateState(racingData, res.payload)
);
} catch (error) {
console.log(error);
}
});
<script/>
Here you did the following:
- Set up
onMounted()to ensure that theclient.subscribe()method only works when the project is loaded on the browser; this is because it requires thewindowmethod, which is only available on the browser - Your
client.subscribe()method takes in the exact location of your documents as its channel and updates your state with a helper function when there are any changes to the documents in your database
Here's a preview of how it will work.
Notice that you don't need to refresh the browser to see updates to your database.
Conclusion
This blog post demonstrated Appwrite's real-time functionality in a racing leaderboard. The post covered how to set up a Nuxt.js project with Appwrite's Pink Design, set up an Appwrite database, implement real-time updates with Appwrite, and subscribe to real-time updates. Following these steps, developers can add real-time functionality to their applications and create dynamic and engaging user experiences.
Resources
- Get Started with Nuxt
- Pink Design
- Array.prototype.findIndex() - JavaScript | MDN
- Hrdtr/nuxt-appwrite: Easily connect Appwrite to Nuxt
This content originally appeared on DEV Community and was authored by Divine Orji
Divine Orji | Sciencx (2023-05-16T10:27:06+00:00) Build a Real Time Leaderboard in Nuxt.js and Pink Design. Retrieved from https://www.scien.cx/2023/05/16/build-a-real-time-leaderboard-in-nuxt-js-and-pink-design/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.