---

First of all, a shout-out to Hashnode and Appwrite for creating this hackathon that I leverage to create a solution for aspiring developers in my community and the world at large.

Team members

• Yahaya Muhammad Bello @Abiey2579

Description

DesignGrid is a learning platform that gathers and arrange the vast array of scattered learning resource relevant to aspiring frontend web developers. DesignGrid aims to provide a meticulously structured curriculum, guiding students through the essential concepts. DesignGrid is focused on solving the problems that it was built to solve.

The Problem DesignGrid Solves

A guy I knew came up with an idea on how to solve an existing problem that has been bugging him for a long in Maiduguri, Borno State, Nigeria.

The guy is a tech keynote speaker at Google Developer Groups (GDG Maiduguri). As he stated, after any tech event he attended, people who felt interested in tech will often come to him asking for help to get them started in tech, often he will just refer them to some YouTube channels, websites, and so on, but deep down he knew that pointing people who want to get started in learning something to the wrong direction or scattered learning resource, will most of the time make them quit sooner than later. And that’s the problem he wants to solve.

First Approach to Addressing the Problem

The guy invited developers in GDG Maiduguri and developers are allowed to invite others as well, that’s how I got invited too, we started in a WhatsApp Group discussing the issue further. After long discussion and decision-making, we concluded, to design a platform that would gather and arrange the scattered learning resources on the internet and put them all in one place, making the platform the single source of truth. As development started, we started experiencing the consequences of different opinions, so I asked the guy to make me the Project Manager, so we can achieve a centralized idea/opinion, but yet that didn’t solve the problem, eventually, the same problem destroys the whole idea and the project stopped.

How this Hackathon Inspired Me to Continue The Project

After our first approach didn’t work, Long after, I came across this hackathon in hashnode discord server, I registered and decided to create a fitness mobile app that tracks footsteps and calculate heart point, the app was intended to be featured by Google Fit. After designing the whole the UI in Adobe XD my USB cable stopped working, so I can’t do mobile app development because I intend to use React Native. Not long before I found this hackathon, I decided to create that project since we failed earlier, I started and named the project DesignGrid, so because I can’t do react native because my USB stopped, I start designing the UI of DesignGrid, after completing the UI design I continue to implement it since I still can’t do React Native work at that moment, in the same day I implemented HOME, LOG IN, and SIGN UP page, the webpage looks good on my eyes, so I continue with DesignGrid as my hackathon project instead of the fitness app. I leverage the need to win this hackathon to finish this project as fast as I could, while it’s the solution to the problem I want to solve, (Killing two birds with one stone).

DesignGrid Tech Stack

1. React JS

   I leverage React JS reusable components architecture, to create blazing-fast UIs, that are easy to navigate with a seamless overall user experience.

2. Tailwind CSS

   I achieved this beautiful visual appealing design with the help of tailwind CSS. Tailwind with the help of React JS made it easy to implement dynamic tailwind stylings and achieve these beautiful UIs.

3. Appwrite

   Appwrite is 10x simpler than Firebase in terms of setup and CRUD operations. Appwrite is at the heart of DesignGrid, without which the entire project is rendered useless, the usage of Appwrite is what makes DesignGrid possible. From storing user sign-up details, to storing onboarding questionnaires and tracking the student's progress in the enrolled course, it would have never been easy without Appwrite. I took advantage of the following Appwrite Services to make DesignGrid possible.

   1. Appwrite Authentication

      I used OAuth2 for authenticating students, because it's easy to implement so I could focus more on implementing the features that will make DesignGrid the problem solver.

   2. Appwrite Database

      In the overall usage of Appwrite, the database is almost 70%, because almost 80% of DesignGrid contents are fetched on request, shout-out to Appwrite for its blazing fast CRUD operations, with Appwrite's incredible cloud power am able to achieve at least 8 out of 10 in providing students with seamless studying experience.

   3. Appwrite Storage

      I used Storage to keep students profile pictures. I was surprised of how simple it is to perform Create, Read, Update, and Delete (CRUD) operations on Appwrite Storage. Which using Appwrite documentation I created logics to handle profile pictures in-one-go.

4. Firebase

   Despite Appwrite being simpler than Firebase, I had to use Firebase Firestore because of its ability to store large JSON-like objects that have hundreds of lines of code. With Firebase Firestore am able to store and keep track of students progress.

5. GitHub Repository

   For GitHub, I leverage its repository feature to arrange the large learning resources. I store learning contents in a Markdown files then fetch them on user request and parse them using React-Markdown. I used GitHub as a database to store tons of Learning Content.

How Appwrite Help Me Build this Project

1. Blogs Catalog: I used GitHub to store all the Blogs and Learning Resources in Markdown files, Reason is, I can interact with GitHub repository locally which makes It easy to update, create, and delete contents, and push them to see changes instantly. I used Appwrite Database Collection as a catalog for the GitHub Learning Resources, with this, I created logics, to fetch specific blog, blogs in a specific category class, and get related blogs based on the one the user is currently reading, all with the help of Appwrite Database Collection Attributes.

2. Students Profile: In here, I used Appwrite Storage, and Database to store students details and profile pictures, I was surprised of how easy it is to work with Appwrite Storage, which I implement in-one-go.

3. Onboarding Questionnaire: These are the questions students were asked when creating their accounts. Questions are generally about their level of skills, there interests in tech and so on. With Appwrite Database I am able to store these questions and answers for later use.

4. OAuth2: Am so focused on the parts of DesignGrid that makes it the problem solver, I decided to go for Appwrite OAuth2 since it's relatively easy to implement, at least for me.

Problems I Encountered

DNS Configuration (CNAME and A Record)

While am a frontend developer with 5+ years of experience, Domain and Hosting weren’t my stuff, Though I do know how to Manage Domain and Hosting Space, the last time I did it was back in 2019. So I forgot how lots of things work, and that’s exactly why I encountered the DNS Configuration Issue.

Case Study

I want to use a custom domain for my Appwrite endpoint and am hosting my frontend with Vercel Free Plan

Configuration Process

1. First, I bought My domain in QSERVERS, and am hosting my frontend with VERCEL Free plan, So I had to forward my domain from QSERVERS to VERCEL using an A RECORD.

2. Secondly, In VERCEL I had to create a CNAME with VALUE pointing to Appwrite Cloud (cloud.appwrite.io).

3. Thirdly, I Add my custom domain to Appwrite but Verification Failed.

The Issue

1. Appwrite Custom Domain Verification keeps failing

2. I did everything in the configuration correctly, at least that’s my thought. I created my OAuth2.0, but it keeps redirecting me to an empty page

The Solution

1. It took me long enough to understand how to properly use CNAME, I set CNAME the right way, and Appwrite was able to verify my custom domain.

2. After days of frustration, I posted on the Appwrite discord server (support channel), and an Instructor give me a hint of what my problem is, the problem is my Appwrite platform’s hostname is still in localhost, while am in production that’s why OAuth2 keeps redirecting me to an empty page, and I fixed it

Project Repository:

You can find the full source code of DesignGrid here: GitHub Repository

DesignGrid Link:

DesignGrid Website link: DesignGrid. You can Sign Up with either your Google or GitHub Account.

Demo Recording:

You can watch a demo of DesignGrid in: Demo Recording