Build a chat room with Appwrite and React

Rate this content
Bookmark

API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!

This workshop has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

Tessa Talk is a chat app built by Wes Cope using AppRight, named endearingly after Tessa, a colleague at AppRight. The app allows users to register, sign in, and start chatting in a minimalist interface.

Wes Cope is a full stack software engineer at AppRight, working on everything from database drivers to various other tasks. You can follow him on Twitter at WesCope or find his work on GitHub.

The presentation by Wes Cope is about building a chat app using AppRight, a backend-as-a-service platform. The chat app is a minimalist version of Slack, built with TypeScript, React, the AppRight SDK, and the Chakra UI framework.

The chat app in Wes Cope's presentation is built using TypeScript, React, the AppRight SDK for TypeScript/JavaScript, and the Chakra UI framework.

AppRight is a backend-as-a-service (BaaS) platform that allows developers to focus on client and mobile application development by providing various backend services. It is open source, secure, and comes with APIs for REST and WebSockets, along with well-documented SDKs.

AppRight offers features such as authentication, user management, database storage, cloud functions in various languages, webhooks, built-in security, geolocation, image manipulation, and real-time capabilities.

AppRight enhances the development experience by simplifying backend tasks, allowing developers to focus on building the application itself. It provides pre-built APIs and services, reducing the need for repetitive tasks like setting up authentication or image upload services.

AppRight can be deployed using a one-click deployment on DigitalOcean or by running a simple Docker command. The platform provides detailed instructions on its website, appwrite.io.

AppRight focuses on security with built-in features like secure, end-to-end backend servers, and automatic generation of valid certificates for HTTPS. For personal data protection, developers can encrypt data on the client-side before storing it in AppRight's document store.

The source code for the chat app mentioned in the presentation by Wes Cope is available on GitHub at github.com/WesTeslaTalk. The repository contains the exact code running on Tessa Talk.

Wess Cope
Wess Cope
41 min
04 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

AppRight is an open-source backend as a service that simplifies server setup and API design. It offers features like authentication, user management, database storage, cloud functions, and real-time image manipulation. The AppRight dashboard is customizable and can be used to manage the backend using its API. The workshop focuses on building a chat app using AppRight's backend services and frontend frameworks like React and Chakra UI.

1. Introduction to Chat App Development with AppRight

Short description:

I am Wes Cope, a software engineer at AppRight. We're building a chat app using AppRight's backend as a service. It's written in TypeScript using React and the Chakra UI framework. Join us on Tessa talk to chat during the presentation.

So first of all, I'd like to say thank you to everybody for joining. I am Wes Cope. I guess I can use the slides. So hello. I am Wes Cope, a software engineer, full stack at AppRight, working from everything from database drivers to whatever else I can get my hands on. You can follow me on Twitter. It's WesCope as the slide presents, or you can go to github.com and find me there and the various works and things that I've done.

During this presentation, I will work my best to make sure that I give you guys all the information that you need. Sometimes I do tend to talk fast. So just raise your hand and call me out. I'm good with it. And I will make sure to slow down or if I miss anything, jump into the chat message, ask your question there. And I have it sitting right in front of my face to allow me to answer the questions as quick and soon as possible.

So what will we go over? Well, of course, we're building a chat app. And by chat, I mean you register, you sign in and you start talking just like any chat app that you've seen. It's like a very slim down minimalist version of Slack with no emojis, nothing fancy, just you, text and a conversation.

AppRight. AppRight is a backend as a service. Service is a service. It's a tool that developers can use in order to focus on what's important to them, such as client application development, mobile application development and so on. And we'll go a little bit more into depth with these things. We are also going to build a chat app and discuss the things that you need. It is written in TypeScript using React, using, of course, the AppRight SDK for TypeScript JavaScript as well as using the Chakra UI framework because I find it easy and nice to work with. And then I will also give you the links to where you can one, you can join us on the chat, actually chat while we're doing this presentation on a running the running verse. We call it Tessa talk and Tessa, who is also a person at AppRight works at AppRight with me. So it's named endearingly after her because she's the one who made me do it. And then we'll take some questions and we'll wrap things up with anything else. Any other resources or anything else I can come up with. Step one gets you started. Again, here's what you're going to need.

2. Introduction to AppWrite and Project Layout

Short description:

I use VS code. The projects layout inside the source folder includes data, forms, pages, providers, router, theme, index.html, index.ts, custom types, PNG and SVG images, and package.json. If you want to join the chat and try the app, visit tesla.talk, appwrite.vercel.app. The source code is available on github.com/WestTeslaTalk. AppWrite is a 100% open-source backend as a service.

I use VS code. I also use them just depends on, you know, what I'm doing type scripts. The version I'm currently running is 4.64 react 18 app right 801 parcel two, although I'm really running parcel one point x because I don't like to that much in yarn, which is pretty common for most JavaScript slash node JS developers, etc.

Here's the projects layout inside of the source folder. We have a data. This is where I put all the data stuff, database handling, local storage wrappers, anything that makes it nice for me to do that. The forms folder is where I put all of your forms, whether it's the chat input window, your log in your register onboarding. This is not by any stretch of the imagination, anything other than my opinion of the way that I set things up. So everybody does a little different layouts, various layouts. I have a layout for whenever you're onboarding and I have a layout for wherever in the application and I do some magic to check which one and automatically load that for me.

Pages, I guess, all the places where you'll go. The providers, this is a neat thing that React is introduced, I used to be a Redux man, and then I moved on to providers. But some of the work that I did with flutter and dart, I got used to the provider pattern and really started to enjoy how it's working. So I kind of used flutter inspired architecture to use the provider pattern here using React context. And then the router, of course, gets us around in our application. The theme, and yes, I do support dark mode and no, I didn't add a button to do it. And then the index.html is where we render this guy. Index.ts is the entry point for our application, some custom types, and it's PNG and SVG, just so that I could have images there if I decided to. This is kind of a boilerplate setup and then everybody knows what package.json is.

Now, here's the magic. If you guys want to join over on the chat and actually give this thing a try, and you see some of the AppWrite folks have already been a couple of words have been presented there. You could join us at HTTPS, tesla.talk, appwrite.vercel.app. That's a dash. And then you can also view the source code it github.com. West Tesla Talk, and this, the source code that you see it in this repository is exactly what's running on Tesla Talk on Vercel. And also what I'll be going over today. So what is AppWrite? So I encourage everybody to visit appwrite.io. And see exactly what we do. We're a back end as a service. We are open source 100%.

Watch more workshops on topic

React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
The Epic Stack
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Watch video: The Epic Stack
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.