uCanEarn: Appwrite Hashnode Hackathon

Team Details

Developed by: Odewole Babatunde Samson

I single-handedly developed this project

Description of Project

Introducing the world's most powerful platform for selling digital products.

With uCanEarn, you can easily create, sell, and manage your digital products. You can also use our powerful marketing tools to reach a global audience of potential customers.

Tech Stack

• Nuxtjs

• Appwrite Cloud

  • Authentication

  • Database

  • Real-time

  • Storage

• Styled with Appwrite Pink Design

• Vercel

In this project, I implemented Appwrite services in building almost all the product features, like the following:

• Authentication: Appwrite's Authentication came in handy and straight-forward to apply authentication for the project

• Database: Appwrite's Database helped store the product data in the database. Also, able to list, retrieve, delete, and update document

• Real-time: Appwrite's Real-time service allows us to listen to events on the server side in real-time using the subscribe method.

• Storage: Appwrite Storage service allows us to manage our project files, i.e., to upload, view, and query all our project files.

• Appwrite Pink Design: Pink Design is Appwrite's open-source design system we used for building consistent and reusable user interfaces.

Challenges We Faced

I faced quite a lot of challenges in the development process of the project. Here are a few of the challenges faced and How I overcame them.

• Firstly, I didn't have any specific template or UI for the project. I only wanted to build something cool, nice, and professional for the Hackathon. Appwrite Pink Design was very much of help here with its consistent and reusable utilities, components, etc.

• Secondly, while deleting the course documents, I wanted to also delete the file in my storage bucket too. So, I overcame this was going to the Appwrite discord channel, and they were very friendly.

Then, we finally resolved this by using this approach:

     const deleteCourse = async (document_id) => {
      try {
        const document = await databases.getDocument(
          runtimeConfig.public.COURSE_DB_ID,
          runtimeConfig.public.COURSE_COLLECTION,
          document_id
        );

        const fileId = document.fileId;

        // Delete the file from storage
        await storage.deleteFile(runtimeConfig.public.COURSE_BUCKET_ID, fileId);

        // Delete the document from the database
        await databases.deleteDocument(
          runtimeConfig.public.COURSE_DB_ID,
          runtimeConfig.public.COURSE_COLLECTION,
          document_id
        );

        alert("Item has been deleted successfully");
        await getCourses();
      } catch (error) {
        console.log("Error deleting product:", error.message);
        alert("Item was not deleted");
      }
    };

The code snippet above did the following:

• It first retrieves the course document from the database using the databases.getDocument() method. It passes the databaseID, collectionID, and the document_id to specify the document to be fetched

• The retrieved document is then stored in a variable called document

• The fileId property of the document is extracted. The document has a fileId property representing the associated storage file

• Then, proceeds to delete the associated file from the storage using the storage.deleteFile() method. It passes the storage bucketID and the fileId to specify the file to be deleted

• Lastly, the code deletes the document from the database using the databases.deleteDocument() method. It passes the databaseID, collectionID, and the document_id to specify the document to be deleted

Public Code Repo

The GitHub repo can be found here

Demo Link

The project demo can be found here

https://youtu.be/2iP9cHD-vaA

Resources

• Appwrite Cloud

• Appwrite Databases API

• Appwrite Pink Design

• Why Pink Design is the Must-Have Tool for your Web Design Arsenal in 2023