5 Steps We Took to Create an API for TopInterns Portfolio Pages Project
September 15th 2021
· 4 min read
Having to always do the same job is a waste of time. Every time we wanted to showcase a new project created by the new Interns it had to be done manually by creating new static pages for said project. We needed to create a CMS (Content Management System) that made things easier. Our job was to plan, develop, and deploy an API that will be used by the frontend team’s application to facilitate this entire process.
In this article, we will be briefly discussing the 5 steps we followed to fulfil our goal of creating this API.
Firstly, we set up a meeting with the frontend team to decide on the tech-stack that we were going to use in this project. With respect to microservice architecture we have decided to use React for the frontend that uses an API gateway to interact with the backend, that we agreed on implementing in Node.js. For database we preferred using a NoSQL approach, for that we chose Amazon DynamoDB, and for the deployment we went on with Serverless Framework.
Then, we brainstormed ideas to come up with an Entity Relationship schema that will serve as a blueprint to build our database.
We moved on to creating the access patterns. The access patterns are what is used by the users and the system to access data that satisfy the business needs. The administrator, who is both the reader and writer in this case, should be able to perform CRUD operations, and by CRUD we mean that he should be able to create new a project, read, update, and delete a project when necessary. So, our access patterns here are in essence the CRUD operations.
Next, we defined the API endpoints based on these access patterns and we decided that our API endpoints are going to be the following:
1. GET / projects
2. GET /project
3. POST /project/SK
4. PUT /project/SK
5. DELETE /project/SK
Based on these API endpoints we moved on to create the API documentation using Swagger. Swagger is basically used to list down all the APIs along with the input-output parameters and the response codes. This documentation will be shared with the frontend team, and it will help them in knowing how to interact with this API.
Before we went on to the next step, we determined the architecture that will be used, and we decided to go with MVC (Model-View-Controller) in conjunction with TDD (Test Driven Development) approach.
To start, first we needed to create the database table based on the ER schema, the selection of the PK/SK (Partition Key / Sort Key) is based on our project entity. The GSIs (Global Secondary Indexes) are based on the access patterns. Since it's a NoSQL database design, each item can have different number of attributes. We defined a comprehensive list of all the attributes that will be filled up on the form page, we also specified their data types. Using these keys and fields we created the database table.
Following the TDD approach, we wrote our test cases before we went on to write the code. We created test cases to test our DynamoDB repository functions, we also used SuperTest and Jest modules to write out tests for our API endpoints.
Since we were following a microservices architecture we used Docker to create separate containers, one for the Node.js backend server, and one for our Amazon DynamoDB. For configuration, we wrote the docker-compose file for our containers, in this file we specified which Docker images were going to be used, the commands we wanted to auto-run, and the Docker ports to be exposed to our local machine.
We decided to go with Serverless because it enabled us to deploy this application faster by eliminating the need to manage backend servers and infrastructure. To run in a Serverless mode on our local machine while developing we used the Serverless-offline plugin to emulate AWS λ and API Gateway.
As a result, our API facilitated the process of inserting new projects for TopInterns by integrating it in the Administrator Dashboard. Now, they will be able to showcase new projects dynamically without having to work with the code manually for inserting each new project.
The Team Behind This Project
1. Marcelino Abou-Haidar – LinkedIn Profile
2. Saleha Khan – LinkedIn Profile
3. Omar Barakat – LinkedIn Profile
Check out the below video to get a brief overview of our project.