SkyLark - Web API Testing

SkyLark - Web API Testing


Stage 2 (out of 3) project


GitHub code link


What are we trying to build?

We built a simple-looking HTTP Client app which is used to send requests to the server and receive the response. This is basically used to test the APIs. This is a single page application using React for the UI and Redux for state management.


Why did we choose to work on this?

As a web developer, everyone needs to do some kind of API calls or interact with some API for one’s app, so we felt it is very important to have good knowledge about HTTP architecture and to know about the behind-the-scenes of the whole functioning of sending and receiving data to and from the server.

We felt that this project HTTP client will give us a good understanding of this architecture.


Technologies used and why?

  1. React: We used React to build the UI. There are many reasons for choosing React. React has many advantages when compared to other libraries. Reusable Components: React is a JavaScript library that builds user interfaces for single-page applications by dividing UI into reusable components. React allows developers to create large web applications which can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application. Virtual DOM: Working with the DOM API is hard. React solves this problem by giving developers the ability to work with a Virtual DOM that makes the app fast. Therefore, the idea of Virtual DOM helps allows ReactJS to know when exactly to re-render or when to ignore some specific pieces of DOM because it can detect when the data has changed. A UI that reacts promptly is crucial in enhancing the user experience. Simple and lightweight: React is a very simple and lightweight yet powerful and robust library that only deals with the view layer. It is not a beast like other MV frameworks such as Angular or Ember. React Developer Tools: It is a handy tool for inspecting react components within their hierarchy.

  2. Redux: We used Redux for state management. Redux provides a single immutable store where the state can be stored, which in turn can be accessed by all the components through action dispatchers and reducers.

  3. Browser built-in Local Storage: To store the data such as requested URLs, URL history etc.

  4. Highlight package: This we used for rendering Response from the server.

  5. Electron App: It was used to package the React app into a desktop app.


Future scope of improvement?

We need to work on improving the design. We need to work on collections and import/export collections. We need to package into a distributable build to distribute as a desktop app.