One fine morning like everyone I was at office doing my work when suddenly I realized that my code was breaking which was working an hour back and this startled me and kept me wondering what could go wrong. So like everyone else I followed THE PROTOCOL. Yes!! I started debugging.
Problem we faced:
While debugging I could find that few of the attributes were missing from the API response and this what failed my working code. So in few more months down the line these issues started to happen frequently that whenever back end team modifies the JSON structure our code used to break suddenly.
What we have tried but failed!!
To avoid this we started to have recurring calls to understand any changes but that too was unavoidable due to over crowding of calls. So these issues remain a glitch to the process.
So I thought why can’t POSTMAN let us know the change what happened in the Back End before we start to waste our time figuring out the bug. This made me build this application.
I call it Teleport
The Design:
Well this was one of the toughest phase for me because I wanted to make my app stand out like what we have in POSTMAN with much more personalization and more advanced features like response compare. Figuring out the building blocks and building an end to end solution took the longer sprint to join all the entry points to the system.
Once you have a look at the web app you will see the design has been kept simple with a metronic theme and the layout is adaptive. I managed to build some thing like this, keeping in mind the simplest of design and user friendly.
Tech Stack & Architecture:
I took a longer time in taking the decisive approach to make the software more robust keeping in mind the scalability part. I used React 16.x on the UI layer with SASS as the CSS pre-processor.
I work extensively with Vue and React and I chose React for this app since I wanted to try out the new features of it as well as when we are able to get hydration updates I can leverage its power. The building blocks of this application is very simple and I made sure whoever wants to add features to this can easily run through the code and understand the entry points of each component.
It is a pure JavaScript web app.
Road Map of Features Releases:
-
June Release, 2020
- Compare Response Feature — Compare responses of the same API once response structure changes
- Add or remove API Endpoints — Add and remove API endpoints from End Points tab
- Search Endpoints — Search through your API Endpoints with Smart Search
- Sign In Feature — Sign In to save all your API
- Notification Switch — Switch On/Off Notifications
- Generate Code — Generate Code from your API constructs
- More Personalized Settings — More personalized settings
- Index DB Support — Localized data now saved in Index DB for more storage
-
Sept Release, 2020
- Refactor the repository with Type Script
- Authentication with custom sign up
- Web sockets real time update on Notifications
- Difference checker switch to show difference in attribute or values
- Automation in documentation generator of APIs
What am I currently working on?
There are missing features from the live demo which should exist in a real product. All of them will be finished on Phase 2:
Import JSON collection
I would like to build this feature for a robust JSON parser which can import and parse any type of JSON
Diff checker for testers and developers
This feature will hold a switch which will enable diff checker for attribute for testers and the value for developers. This could make a good feature for testers to check for any changes in attribute of the current response
Accessibility ♿
Not all components have properly defined aria attributes, visual focus indicators, etc.
Feel free to contribute to this project and bring in more features. I am planning for a production release this September so stay tuned !!!!
Fork or contribute here:
Thanks for reading! If you have any questions, feel free to reach out at rajrock38@gmail.com, connect with me on LinkedIn, or follow me on Medium and Twitter.
If you found this article helpful, it would mean a lot if you gave it some applause👏 and shared to help others find it! And feel free to leave a comment below.
Top comments (0)