GSoC 2021 Final report -JBOSS: Classroom and Doubt forum feature in Mobile Application.
Introduction
The CFC mobile application project aims to add some specific features that will allow students from all over the world to develop their skills and help each other more supportively. The project aims to implement a classroom and doubt forum functionality so that students can gain knowledge by helping others by providing an answer to the doubt questions and acquire knowledge by enrolling in various programming Courses.
Under this project, 5 important parts need to be implemented:-
1). Redesign the complete User interface of the application in Figma.
2). Converting complete Figma design to react components.
3). Implement complete user workflow in the application.
4). Caching & Integrating the backend API
5). Implementing functionality related to Course, Doubt forum, and User Dashboard (classroom )in the application
Project Details
Organization:- JBOSS
Source Code:- https://github.com/codeforcauseorg/edu-clientPrimary Mentor:- Abhishek Kumar
Student:- Adarsh Kumar SinghProject URL:- link
Work Done:-
All merge pull requests: Click Here
Tech Stack used:-
1). Reactjs
2). Capacitor
3). firebase(Google Authentication)
Part 1: Redesign the complete User interface of the application in Figma.
a). As initially, the application has only a mobile user interface and the idea was to refactor the existing Mobile UI and also make it compatible with Web and Tab view.
So initial Mobile Screens were:-
So After a lot of discussions, suggestions, and changes, the final UI looked as:
Web View:-
Mobile and Tab View:-
As here few screens were mentioned to view the complete user interface and user experience you can visit the website :)
b). During the UI designing process 10+ screens were made in Figma and my mentor really helped me during this process for deciding the colors, theme, fonts, vector graphics, and yes the textual content which are required in the application.
So after completing this task than next step was to convert the design which was made in Figma to react components !!
Part 2: Converting complete Figma design to react components.
So during this part, I worked on converting the complete Figma design to react component so according to projects need. The project was already using the Material UI package for building react components. So using this package was pretty easy and it has really well-written documentation.
a). So before creating react component the first task was to refactor the existing theme config because this will allows us to modify the color of the components according to our needs.
Below is the custom theme config object which I have created for the application.
creating this custom theme config will help us in future enhancement like if we want to implement the dark mode to the application in that case we just need to add the dark mode color palette to the theme config object.
b). Converting Figma design to react components was a challenging process as the application design has to be compatible for three different screens Mobile, Web, and Tab.
To achieving this thing I have created some custom breakpoints which will allow us to switch the UI at the specific breakpoint and made UI responsive using flexbox.
Material-UI comes with a default breakpoint set but for our use case, we need to modify those breakpoints.
some of the responsive screens you can see below :)
During this development process, I learned a lot. I was able to implement all the Figma designs to react component pretty well :)
Part 3: Implement complete user workflow in the application.
In this development process, I worked on implementing a complete user workflow in the application. For authenticating the user I have used Firebase Google Auth and for routing react-router.
User workflow Implementation:-
a). Initially when a user lands on the application they will see the home page. They can explore all the routes which are not protected. In simple words, Protected routes allow us to ensure only logged-in users can access certain parts of our application that may contain private user information.
b). If any unauthenticated user tries to access any of the protected routes he/she will be redirected to Google Sign Up page and asked to log in before accessing any private route.
Below is a snippet of the protected route :
c). Once a user login to the application he/she will be redirected to the home screen and able to access all the information related to users and as soon as user login is successful some of the user credentials like display picture, name, email, which we can access from firebase auth is saved to local storage.
During this development process, I learned more about react-router, and the documentation was pretty well written and easy to understand :)
Part 4: Caching & Integrating the backend API
This part was the most interesting part of my complete development journey. Because our dead react components will be soon going to fill with some live data =)
The task was to integrate the API and cache it and response data has to be accessible to all the components.
So let’s start with our API integration part first:-
For making API requests I have used Axios its Promise based HTTP client for the browser and node.js
Axios’s library has a few useful features:-
- Interceptors: Access the request or response configuration (headers, data, etc) as they are outgoing or incoming. These functions can act as gateways to check configuration or add data.
If we use interceptors it is very important to return the configuration like in request interceptor we are returning the request and the same in the response interceptor. If we don’t do that you will not able to send a request and get a response.
In request interceptor, we are setting an access token to our request header as this will run before any request is made to the server.
- Instances: Create reusable instances with baseUrl, headers, and other configurations already set up.
As and when our Axios instance is created after that we don’t need to pass the base URL of our API in any request just the endpoint like /API/user.
- Defaults: Set default values for common headers (like Authorization) on outgoing requests. This can be useful if you are authenticating to a server on every request.
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;Now let’s make our Asynchronous action creator for making API calls. As project uses Redux for managing the global state and redux-thunk middleware for creating action creators that basically return a function instead of an action.
So here how our Asynchronous action creator looks like :
so this is add wishlist, Asynchronous action creator this is one of the features which I have implemented in the application. We will talk about this more in Part 5 :)
Caching API:-
Before moving towards the implementation first let me tell you why it’s important!
So mostly application consumes data from an external source right. Let’s imaging the scenario that the data which is coming from the external source crashed or the network becomes slow and as a result, our app will return a blank page without any data or any loading screen.
For dealing with these issues I have used the SWR (stale-while-revalidate) library to deal with the retrieval of data into the cache without dealing with the state!
Let’s see how I have implemented this in the project:-
So to implement SWR we need to use the useSWR(key, fetcher, options) its a Hook that retrieves data asynchronously from a URL with the help of the fetcher function, both of these passed as arguments to the Hook.
so the key argument here is the URL and the fetcher is the asynchronous function that will fetch data from the given URL. By default, useSWR() returns the data.
const { data: courseCardData } = useSWR(ALL_COURSE_CARD_ENDPOINT, loadData, { revalidateOnFocus: false, dedupingInterval: 100000, });And our fetcher function
import axios from "../utils/axios";const loadData = async (url) => { const response = await axios.get(url); return response.data;};
As cashing API will also improve user experience as users will not see loading screen every time whenever they visit the page until and unless they reload it and it will also help in reducing the server load as it will not allow users to make multiple calls to the same request but it will make call after some time for revalidating the cache data for that we need to set dedupingInterval option inside useSWR hook.
dedupingInterval: 100000,
Once the data is cached user will not see the loading screen even if the application is offline.
Part 5: Implementing functionality related to Course, Doubt forum, and User Dashboard (classroom )in the application
Doubt Forum:-
1). In doubt forums authenticated users can post doubts and answer doubt questions for writing doubts and answer I have used rich text editor from draf.js which help users to write more elaborately.
As posting answer was so quick because I have used Mutation from useSWR.In many cases like here, applying local mutations to data is a good way to make changes feel faster. We no need to wait for the remote source of data.
With mutate, we can update local data programmatically, while revalidating and finally replace it with the latest data.
Course:-
1). Users can add and delete courses from their wishlist and similar functionality related to the cart is been implemented.
2). Users can enroll in the course which they have added to the cart
In a complete application where ever you are seeing instant change, it's because of mutation but behind we are making an API call for revalidating the cached data.
Classroom (Dashboard):-
1). Classroom is a part of the user's dashboard so users can see their assignments related to enrolled courses.
2). Users can see all their activities in their dashboard like what all courses they have enrolled in, list of active assignments, scoreboard, asked doubts questions, access of lesson player, etc,
A total of 41 PR merged, a lot of code written, a lot of bugs fixed and a lot of brainstorming along with a great deal of learning is what describes the work done in brief.
Experience:-
GSoC was something amazing that happened in my life. it was truly a unique experience. I got to learn new technologies and also learned a good amount of life lessons. During these 10 weeks I really learned that for a software engineer, it doesn’t matter how many languages or technologies you know, what really matters is your ability to learn and pick up things efficiently and the ability to apply them correctly.
During this journey lot of pull requests were merged and various different approaches were discussed all these things have motivated me to challenge myself to become a better version of what I am.
This project has a great learning curve got to know about best coding practices which I have applied during the development process and read a lot of documentation either its react, SWR, and other various different libraries which were used during the development.
Overall it was an enjoyable experience. The mentors I have been assigned with were very friendly, helpful, and supportive :)
Acknowledgment:-
It was wonderful working with the JBoss community throughout the GSoC project.
I would like to thank my mentor Abhishek Kumar for patiently reviewing my code, giving constructive suggestions, and guiding me through the program without him I would have never been known the shortcomings of my work. He was always available to answer my all questions on time. His constructive feedback really helped me to improve over time during the GSoC journey.
I thank Devesh Kumar a co-mentee who was working on the backend side of this application. He was so kind and helpful throughout the journey whatever requirements that are needed on the client-side. He was quick to fulfill all of them :)
You can go and quick checkout his backend work for this application :p
Final thanks to Google for organizing this amazing program. I feel GSoC made it easier for me to get started with open source contributions. It was a great lesson on how projects are built and maintained with great quality. I am excited to continue contributing to the open-source community.
Future Work:-
- As currently, we have only a few features integrated into the application like course enrollment, doubt forum, and classroom as there are a lot of things that need to implement, Feature like- Gamification board, interview your friend, calendar invite, etc
- A few UI refinements need to be done.
- E2E testing has to be done using Cypress.
- As we are using Capacitor for making our react application compatible with IOS and Android but we can test other awesome frameworks like a flutter or react native for the mobile version of this application as it will have a completely different look and feel.
