Creating a forum with React and Appwrite – Part 1
Tags: javascript, opensource, appwrite, webdev
Published: 2022-03-27 21:01:04

In this multi-part series, we will be creating a fully functional forum that will cover many of Appwrite’s features. Stay tuned as we hope to evolve the forum as the series goes on to cover as many Appwrite Topics as possible.

## Prerequisites
During this guide we're going to make a few assumptions. The main one being that you've got access to an Appwrite installation (either locally or remotely). If you've not got one, check out this [installation guide](https://appwrite.io/docs/installation). Additionally we will be assuming:

- You've got the Appwrite CLI installed (see [here](https://appwrite.io/docs/command-line))
- Understand simple programming concepts

You can find the (evolving) project over at: [https://github.com/Swinkid/appwrite-forum](https://github.com/Swinkid/appwrite-forum)

## Let's get setup!
Enough chit-chat. Now we know what we're doing, lets get setup! First, we’ll need to clone the project that includes important files that take the leg work out of starting the project from scratch. 

```bash
git clone https://github.com/Swinkid/appwrite-forum-setup
cd appwrite-forum-setup/
npm install
```
Next, we'll need to create the project on our Appwrite installation. Instead of doing it manually, I've populated the appwrite.json files with collections. This will ensure our Collection and Project IDs are the same (Important for the .env file!)

```bash
alex@Alex-PC:~/IdeaProjects/appwrite-forum-setup$ appwrite init project
? How would you like to start? (Use arrow keys)
❯ Create a new Appwrite project
  Link this directory to an existing Appwrite project
```

We need an .env file to tell react where our Appwrite resources are. I've put an example in the project, so simply do the following:
```
cp .env.example .env
```
If you  then go ahead and open this .env file, you'll see the following:
```
REACT_APP_ENDPOINT=http://localhost:3000/v1
REACT_APP_PROJECT=624096a0130c10e3dceb
REACT_APP_ADMIN_TEAM=6240989c8d1a6db01d39
REACT_APP_CATEGORY_COLLECTION=6240986d4947526ebfd4
```
Since we generated the project and collections, you shouldn't need to adjust this. Later on in the project we will be adding to this file.

Finally, we're going to actually need to populate  our forum categories. Headover to the categories collection in appwrite and follow the ~~white rabbit, neo~~ gif.

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

## 🛠️ Let's get coding!
Since the main focus is how we interface with Appwrite, some of the pages have been pre-populated for you. Your welcome to modify these how you'd like. You will be implementing the 'business' logic for each of the pages.

### Categories
If you open `src/Components/Forum/Categories/Categories.js` you'll find that I've created a function thats currently got some fake forum categories in:
```javascript
function fetchCategories(){
    let stubbedCategories = [];

    stubbedCategories.push({
        $id: 'asdadasdasd',
        name: 'Test Forum',
        description: "We're going to need a bigger boat"
    });

    return stubbedCategories;
}
```

We'll need to make a few modifications, firstly, replace the above function with:

```javascript
function fetchCategories(){
    api.listDocuments(REACT_APP_CATEGORY_COLLECTION).then((data) => {
        setCategories(data.documents || []);
    });
}
```

Next, replace the useEffect function with:
```javascript
useEffect(() => {
    fetchCategories();
}, []);

```
If things have materialised, you should now be able to list the forum categories when you run react!

![Screenshot of the category list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcxkead0zgb17wnls1p6.jpg)

### Login
Go ahead and open up `src/Components/Auth/Login/Login.js`. You'll find a function named handleSubmit that contains the following code: 
```javascript
const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log({
        email: data.get('email'),
        password: data.get('password'),
    });
};
```
At the moment all the code is doing it outputting the cotents of the email and password forms to the browsers console. Let's fix that, replace `console.log(...);` with the following:

```javascript
api.login(data.get('email'), data.get('password')).then((result) => {
    // Store logged in 'state' in redux.
    dispatch(login({
        account: result.account,
    }))
    navigate('/');
}).catch((error) => {
    setErrors(true);
});

```
Simply, all we're doing is storing the account data in Redux and then redirecting the user back to the forum's home page. Time to give it a wirl!

![Screen recording of the logging in process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8lthptwevhxeqvk3fk5.gif)

### Register
Next, we're going to figure out the register page. Go and open `src/Components/Auth/Register/Register.js`. Just like the login page, you'll have a handleSubmit function. As before, replace the `console.log(...);` statement with the following:

```javascript
api.createAccount(data.get('email'), data.get('password'), data.get('firstName') + ' ' + data.get('lastName')).then((result) => {
    navigate('/login');
}).catch((error) => {
    setErrors(true);
})
```
You should now be able to register your own account without heading to the Appwrite console! :D

![Screen recording of register process](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/808atis5pzzl47o9mgcq.gif)

## Conclusion
Phew! That was alot! Today we've started creating a forum where users can login, register and view the forum's categories. In the next installment, we're going to be adding to this and allow new posts to be created. Keep an eye on my [Twitter](https://twitter.com/Swinkid) for when I post the next article!

![Phew Gif](https://media.giphy.com/media/Oj5w7lOaR5ieNpuBhn/giphy.gif)

## 📚 Learn more
- [Appwrite's Docs](https://appwrite.io/docs)
- [Appwrite's Discord](https://discord.gg/GSeTUeA)