DEV Community

Cover image for Creating a forum with React and Appwrite – Part 1
Alex
Alex

Posted on • Updated on • Originally published at alexnoble.co.uk

Creating a forum with React and Appwrite – Part 1

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. Additionally we will be assuming:

  • You've got the Appwrite CLI installed (see here)
  • Understand simple programming concepts

You can find the (evolving) project over at: 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.

git clone https://github.com/Swinkid/appwrite-forum-setup
cd appwrite-forum-setup/
npm install
Enter fullscreen mode Exit fullscreen mode

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!)

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

🛠️ 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:

function fetchCategories(){
    let stubbedCategories = [];

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

    return stubbedCategories;
}
Enter fullscreen mode Exit fullscreen mode

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

function fetchCategories(){
    api.listDocuments(REACT_APP_CATEGORY_COLLECTION).then((data) => {
        setCategories(data.documents || []);
    });
}
Enter fullscreen mode Exit fullscreen mode

Next, replace the useEffect function with:

useEffect(() => {
    fetchCategories();
}, []);

Enter fullscreen mode Exit fullscreen mode

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

Screenshot of the category list

Login

Go ahead and open up src/Components/Auth/Login/Login.js. You'll find a function named handleSubmit that contains the following code:

const handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    console.log({
        email: data.get('email'),
        password: data.get('password'),
    });
};
Enter fullscreen mode Exit fullscreen mode

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:

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);
});

Enter fullscreen mode Exit fullscreen mode

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

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:

api.createAccount(data.get('email'), data.get('password'), data.get('firstName') + ' ' + data.get('lastName')).then((result) => {
    navigate('/login');
}).catch((error) => {
    setErrors(true);
})
Enter fullscreen mode Exit fullscreen mode

You should now be able to register your own account without heading to the Appwrite console! :D

Screen recording of register process

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 for when I post the next article!

Phew Gif

📚 Learn more

Top comments (0)