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
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
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.
🛠️ 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;
}
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 || []);
});
}
Next, replace the useEffect function with:
useEffect(() => {
fetchCategories();
}, []);
If things have materialised, you should now be able to list the forum categories when you run react!
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'),
});
};
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);
});
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!
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);
})
You should now be able to register your own account without heading to the Appwrite console! :D
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!
Top comments (0)