Developing the Frontend of TopInterns Portfolio Pages Dashboard
September 15th 2021
· 4 min read
This article marks the completion of our second project at TopInterns. In this sprint, we developed a portfolio dashboard for the TopInterns website. In this dashboard, we can add projects done by the interns in TopInterns to show their talent to potential employers, motivate other students into joining this program. In this article, I going to give you a brief overview of the project and the steps in which we executed it.
Our Team's Role
In this sprint, our batch was divided into two teams where each team was assigned into completing a certain side of the project. Our team consisted of:
Fatima Nasser (click here to see her profile)
and me, Abdallah Faraj (click here to see my profile)
We were assigned to develop the front end of this dashboard. During this sprint, we learned a lot of new technologies like:
1) React for UI development.
2) Redux for state management.
3) TailwindCSS for styling elements.
We started by creating static pages using HTML and TailwindCSS following the design provided to us. After that, we destructured these static pages into reusable React components. Then, implementing the test-driven development approach, we wrote unit tests for each component then coded the component itself in a way to let it pass the unit test. The next step was to make the components interactive using the state concept in react. For the state, our team used two types of state local and global.
With the help of a fake API containing dummy data, we were able to mock the integration with the backend. When we ensured that everything is working to a satisfactory level, we integrated the frontend with the real backend. Finally, we integrated the authentication API with the project to restrict the access of unauthorized users.
This was a great experience. New technologies, dynamics of teamwork, development in a micro-services architecture, unit testing, and many more skills were learned in this sprint. I'm eager to continue this program and see how much more progress I can make by the end of it.
The below video is a brief overview of our work with a demo of the application.