Qlassroom Forum

Qlassroom's Forum

Comment 2

Inspiration

In CA1, we chose to develop a readdit clone for our project. Following that, we were offered an opportunity to work with Qlassroom to develop a forum for their users. Qlassroom is a learning website for students that provides students with questions of different subjects, grades and difficulty. They wanted a forum resembling Stack Overflow, Udacity and Quora just for their registered users to discuss problems and ask for assistance.

Qlassroom's website: https://www.qlassroom.ai/

We decided to take on the project as we wanted to produce a usable product that would actually be used in the real world unlike our Readdit app from CA1. Additionally, this project hit close to home for many of us. We were all struggling students once and we were all delighted to find out about the existence of Qlassroom, a website aimed towards improving student's capabilities in their studies. This inspired us to want to build a forum that further improves this website and better foster learning in the community of students.

Furthermore, Covid-19 has highlighted the importance of online learning applications in these trying times, and we were honoured to have had the opportunity to work on an application aimed towards online learning. For many of us, this was more than just a project, this was the future.

What it does

Provides students who own a Qlassroom account with a platform to ask and answer questions related to subjects or Qlassroom related questions and fosters a community of peer teaching and support.

How we built it

PERN Stack

  • Postgresql Database
  • Express backend
  • ReactJS Framework
  • NodeJS Environment

Challenges we ran into

React, the struggle we had was moving from jQuery to React. All of our members only had prior experience in jQuery and not React and learning React from scratch proved to be a much bigger challenge than initially anticipated, costing us precious time that could be used to better refine our application. None of us were used to React's structure of Components, and Rerender Lifecycle and we initially approach coding in React from the wrong angle, thinking of it like a jQuery application. It took us many days to finally understand the layout of React and finally start making efficient progress on our React application.

After overcoming this struggle, we started to appreciate the beauty within React. Namely, States. States are the building blocks of life in React, they help us to render values faster. Props are also very useful tools as they help pass information to other components for use. Functional Hooks were also vital to our application as let you use state and other React features without writing a class.

Adam

My CA1 application was made with jQuery and thus I had a hard time adapting to React and React's structure. Working for a client for the first time was also slightly new as we now had client requirement and expectations to meet, compared to our previous self directed projects. Another challenge I faced was attempting to improve the Similar Search Algorithm I made in CA1, although there were some flaws I could address and fix, I felt like I was not able to improve the Search's usefulness in the context of our application.

Adriel

The most challenging part about this project was that I came from another group for CA1, so I had no idea how their backend codes worked, so I had spent additional time before the term started to take a look at their codes and learnt their different implementations of library (Such as sequelize). Additionally, we were asked to use an unfamiliar library, ReactJS, to do the project which only added to the workload. I was fortunate enough that my teammates were helpful enough to reach out to me and answer any of my questions regarding the project, which helped me tremendously throughout the 4 weeks working together

Jacob

One key challenge I faced was learning React from scratch. The problem I faced with React was finding all the useful jQuery counterparts in React. For example, I remember it took me quite a while to figure out how to retrieve values from a form in React since I had to look through the controlled components section (having to change the state of the State using a function). So one of the key challenges I experienced is finding the correct syntax to use in React's context (components, state management, rendering lifecycle) after being so familiar with jQuery and Javascript. That said, I do think that after the past month of building an application in React, I do see how React can expedite the development process. Just having the value states and plugging them in using JSX is much faster than getting an element by id, then appending the values into the element's innerHTML. Another challenge that I faced is keeping up with the client's requests and demands. There were many times when we would agree on a feature and a week later when we have finished a feature, they'd point out that they already have this feature in their system and would instead want us to integrate their feature into our forum. A painful example that I can recollect is the Rich Text Editor feature. I built a Rich Text editor from scratch using native Javascript but was later told to switch to a React-Quill implementation since it's the current library being used by their current website. I also remember that Jing Yang couldn't build an advanced feature since the Livestreaming was built by a different group working under the client.

Jing Yang

One of the challenges I had faced was that, as I was new member to the team, I had to learn and adapt to their workstyle and their style of coding. For example, they had used GitHub branches whereas I only had experience using forked version in the past. Other than that, until now, I only had experience with HTML, CSS, JS and so on. So, being introduced to React and learn it within a short time frame was a daunting task to me. I had a difficult time understanding the concept of Components, Hooks and more. Implementing it into the codes was another level. Furthermore, I had to learn Redux which was well known for its complexity. Actions, reducers, of that sort took a lot out of me. However, in the end, I felt that all of these struggles were worth while as I had gained new experience and learnt a lot. I have also came to like React and will use it in future projects.

Yong Rui

Having only learnt how to code in React at the start of 2022, it felt like my progress for the first two weeks of the project were so slow. Eventually, I picked up the pace and help to layout the backend ground work, such as designing the new Database by coming up with an ERD and switching from MySQL to Postgresql. Implementation of Redux Store was difficult, with the actions and reducers being a new concept. Eventually it was implemented and I helped to teach Redux to my other teammates. All in all, it was an enriching experience learning a new framework and challenging myself to push my limits and deliver a usable product.

Accomplishments that we're proud of

  • Coding in React.
  • Advanced Search feature.
  • Image Compression.
  • Rich Text Editor
  • LaTex Editor
  • Inline Images
  • OAuth
  • Cloudinary Image Store
  • Redux Store
  • Chat Feature And many more...

What we learned

  • Coding in React
  • Working for a client
  • Building a usable product To us, this project spanning four weeks was a testament of our abilities to work together as a team effectively and professionally. There were several clashes and conflicts along the way that taught us the importance of compromise, teamwork and acceptance. We all came out of this project stronger and wiser, and we wouldn't trade what the past four weeks have given to us for anything in the world.

What's next for Qlassroom Forum

More features to come!

Share this project:

Updates