My Journey at TopInterns - Building a Quiz application

Image of article writer

Mohammad Serhan

My Journey at TopInterns - Building a Quiz application

Before Internship

After the economic collapse in Lebanon. I finished my Master’s degree in Communication Engineering. And I do not know where to start. I followed a JavaScript path on freecodecamp because it is necessary to learn React. My friend later told me about TopInterns. 

 

Start the Bootcamp

They accepted me after the interview. It was a Bootcamp. We started every morning with a meeting of 10 colleagues and the trainee to explain what tech we needed to learn. We started from zero by remembering HTML, CSS, and Javascript assignments. They created a GitHub account for most of our batch, which I did not know about. And added some coding challenges in JavaScript every week. And every couple of days we had explained a new technology to us.

 Everything was great. I have learned in these 5 months more than the past 5 years in programming. All related to technologies: slack, zoom, google classroom, Git and GitHub, Figma, whimsical, Miro, ES6, HTML-DOM, CSS, typescript, Tailwind CSS, sass, React, Redux, jest, Axios, REST APIs, Node Js, express, Dynamo DB, MySQL, Lambda and more.

 

Project goal

There is a big change in the program after a month with a new model of learning and people. It was a sharp shift, and it took a couple of days to adjust to the recent changes. TopInterns Trainers needed a quiz web app to test new trainees, so they formed an Agile team and split the platform into three micro-services using its architecture pattern.

We divided ourselves into frontend and backend teams in the next step:

 

Phase 1 - Teachers app for creating quizzes

 

a) Frontend task

Using React, we organized the project and reused components. Used Jest for unit testing. Also built Redux as a state-management system that allows us to update the UI when something changes. And created the layout design using HTML and Tailwind CSS. And made it responsive.

 

b) Teachers backend - micro-service

The other team was working on the backend, and they created the Dynamo DB database. They employed a composite primary key, which was combined with Partition Key and Sort Key, as well as a global secondary index. Then, using Node Js and Express, they designed a micro framework that interfaces with this database, as well as the routes, controllers, and modules that follow the MVC pattern. Too, we used server-less offline to emulate AWS and API Gateway on our local PC, which sped up development processes. By launching an HTTP server that manages the life-cycle of the request besides, they used Jest unit testing in each build step. They also used Swagger to document the API.

 

Phase 2 - Student app for taking quizzes & Reports for Teachers

 

Project Team: Mohammad Serhan and Mahmoud Alsalmo

And at the third micro-service for students, we switched the tasks.

At this phase, I was writing the Backend code, while Mahmoud was working in the Frontend. I used Postman to test server-less requests. Next added the JWT token to integrate authentication from the main TopInterns micro-service.

We completed our application on time, and the TopInterns trainees were quite pleased with the outcome.

 

Aside from introducing us to the work environment. These Mentors assisted me in pushing myself to achieve my full potential. They did a lot of interview preparation, practices, and mock coding tasks.


Watch the video to see the demo of this application

Be the first to comment on this article

In order to comment, please enter your information below.