DEV Community: Rajdeep Chandra

Pegasus - A web based REST Client built with MongoDB Atlas

Rajdeep Chandra — Fri, 24 Dec 2021 16:19:09 +0000

Overview of My Submission

Pegasus is a web REST application built specifically for testers and developers to have a holistic view of what changes are breaking the Front End Code. Most of the time Backend changes key pairs which causes app crash. Pegasus is specifically designed to solve problems such as :

Code Break due to key changes in API.
Check specific key updates with line highlighting.
Get Realtime updates to your desktop if any API construct has changed.
In-App notifications.
Hyper runners to run project specific APIs after new builds.

Features 💡

Compare Response Feature - Compare responses of the same API once response structure changes
Add or remove API Endpoints - Add and remove API endpoints from EndPoints 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 Personalised Settings - More Personalised Settings Feature
IndexDB Support - Localised data now saved in IndexDB for more storage

Link to GitHub:
https://github.com/Rajdeepc/pegasus

Live: https://pegasus-fly.herokuapp.com/

README: https://github.com/Rajdeepc/pegasus/blob/master/README.md

Submission Category:

This product is not for a specific themes as listed but I wanted to make this to solve a specific problem on the development and for the testers. Whenever there are any breaking changes in the API comes developers and testers are not aware of its impact so this product helps to assess as well make the team aware of any breaking changes in the app due to API changes.

Link to Code

https://github.com/Rajdeepc/pegasus

Additional Resources / Info

Screenshot of the dashboard:

Built with 🔧

ReactJS - Front-end
Database - MongoDB Atlas
NodeJS - Backend Service
Socket.IO - Real Time Communication

Building Teleport — An alternative to POSTMAN

Rajdeep Chandra — Tue, 18 Aug 2020 12:37:28 +0000

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:

Github Link

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.

Documenting React Components with docz

Rajdeep Chandra — Sun, 12 Jul 2020 11:14:25 +0000

Well.. when you are working on large scale projects and you are building reusable components from scratch and the number of components becoming more over time and new developers are coming in to the project, there is a need to document the components because you might get questions like “I want to build a new component for my new feature.. Is it already there? What it does? Does it work the same I want it to be?..

These questions are quite valid and going through the entire components to find out where it is and how it works is time consuming and it not a good practice. Documentation and putting it live on a web server solves this problem. Today we are going to see how we can create documentation of React Components and use them in your projects so that we can save time working on our feature. We can scale these components based on our need instead of creating another one from scratch.

To build documentation of React Components we will use docz.

What is Docz?

Documenting code is one of the most important and time-heavy processes when developing software.

A lot of time is spent on building and maintaining custom documentation sites.

Docz was created to solve this problem.
Docz enables you to quickly create live-reloading, seo-friendly, production-ready documentation sites with MDX and customize the look, feel and behavior when required by leveraging GatsbyJS and Gatsby theme shadowing.

Principles:

We started by looking over the options available when you want to create your design system or document your project. We borrowed the best ideas from each and came up with the following guiding principles :

Zero config and easy to learn. Avoid unnecessary build steps with confusing setups.
Blazing fast. Built with performance in mind from the start.
Easy to customize. Create something that will be easy to use and customize.
MDX based. Use the best standard for writing documentation.
Docz
It has never been so easy to document your things

docz website

In this tutorial we will not go through docz but we will only see how can we incorporate docz in our existing React application and create documentation for our already present React Components.

Before moving to this tutorial I would suggest you to go through the docz website

Let’s dive in…..

Let’s suppose we have below React Application and we would like to generate documentation for our components.

We are trying to build the documentation of our AlertComponent with docz.

docz runs on gatsby on the wrapper. so when we need to run a documentation site inside our app we are spinning up a Gatsby server which is a wrapper on React. To learn more on Gatsby follow this link:

Gatsby

Step 1:

Add a .mdx file inside your component folder. For e.g(AlertComponent.mdx)

If you are using pre-processing styles like SCSS or LESS in your components, then you should have some extra config to let know Gatsby that you need to compile the pre-processors like this.

For SCSS:

Install node-sass and gatsby-plugin-sass

npm

npm install --save node-sass gatsby-plugin-sass

yarn

yarn add node-sass gatsby-plugin-sass

2. Add the plugin to your gatsby-config.js

//gatsby-config.js
module.exports = {
  plugins: ['gatsby-plugin-sass']
}

You should now be able to use sass in your components!

For LESS:

Install gatsby-plugin-less

npm

npm install --save gatsby-plugin-less

yarn

yarn add gatsby-plugin-less

2. Add the plugin to your gatsby-config.js

//gatsby-config.js
module.exports = {
  plugins: ['gatsby-plugin-less']
}

You should now be able to use less in your components!

Step 2:

Add the below line in your “scripts” object in package.json to run a dev server for your documentation website of your React Components.

"docz-serve": "yarn docz serve"

Now if you run npm run docz-serve you will see something like this:

Once your development server is up you will see a .docz folder in your directory which is serving all your static docz files.

You should put it in .gitignore
Thats it!!!

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.

How to design a URL Shortener web app

Rajdeep Chandra — Tue, 09 Jun 2020 08:57:50 +0000

This is one of my few system design tutorials which I am gonna post in next few days where I will tell you about good concrete failsafe solutions in building highly scalable distributed systems.

A brief on what we are gonna learn:

Designing a system is always an important or The Most important factor in a high traffic system. While designing something like a UrlShortener, a ticketing application or an eCommerce app where millions of users will do reads and writes. You system should be able to handle such amount of traffic smoothly efficiently and robustly. So to do this we need to design our stack our workflows and the system at scale.

Today we are gonna build a URL shortener like tinyurl.com. We will see what all algorithms can be used, good and shortcomings of those and ultimately which suits the best for this system.
So the first checkpoint of designing a system is to make few concrete assumptions:

In this case we can assume: the length of the url which can be 7 characters long and how many hits will come to our system. Lets say our system will be capable of getting 1Million hits/day ie 30 M hits/day and so on….

Building Data Capacity Model:

So to build our database we need to build a data model which will consist of the following entries:

Long URL - 2KB of size
Short URL - 7 chars
Created datestamp - 7 bytes
Expiry date - 7 bytes
Its quite simple right… No its actually not when you want to build a system which scales. For a single server system, its quite simple but in real life scenarios these systems should scale.

Algorithms:

Now we come to the implementation logic part. So to achieve this.. well almost we can use two algorithms:

base62
MD5 Hash

So both the above two algorithms can be used to get the random hashes.We are using base62 since with using base62 we can generate 62⁷ ie more than 3 trillion combinations of strings and the same as with MD5 Hash. A light problem with MD5 Hash is that it gives us 20–22 character long hash values where are requirement is only 7 characters so to achieve that we need to pickup first 7 characters of the MD5 Hash value. That is ok for the time being…

Trying to build the system with base62 and MD5 Hash:

First lets try to build the system with base62: So we take our long url for e.g: www.abc.com/ayhasd/asdeqwe/qweqw?yusdsd=123123&kqwenoow

We pass this value to our base62 service and it will return me a 7 character unique key such as an1132s which we will pass it to our url shortener domain and build our short url like www.shorturl.com/an1132s which on hitting will redirect us to the desired long url. This works nicely for a single system but suppose when millions of users are using the system there has to be system which will have parallel processing or sharding or multiple servers serving those requests instead of one server.

So in such cases there rises our problem. Since multiple servers are serving different requests there can be cases where two servers will come to a point where they will return same 7 characters base62 value will be same for two different long urls. So if we are using a NoSQL database we will not have methods like INSERT IF and search the database whether that keys exists or not but we will run into a corrupt item or a Database collision is such case.

Trying to solve the problem with a Counter:

Well the above problem can be solved with a counter..OR can it be? Let’s try it out.

To solve the ambiguity we can have a counter or 2 counters which can track or act as a thread safe unique id generators so that we don’t run into duplicate hash values. So we can give one counter a range value from 1–1Million and the second counter to 2 Million — 3 Million. But suppose the range values get exhausted after few months and the counter service will not know how to reset it and it will not have the communication with the other counter since both the counters are working in different servers. So here lies the problem with having a counter service.

Zookeeper to the Rescue:

We can have a failsafe concrete solution to this problem with ZooKeeper. But what is Zookeeper?

A Zookeeper is a configuration management distributed system which acts as a coordination service to manage different services or servers enrolled to it. In simple words it acts as a centralised hub to communicate with different nodes attach to it. Keeping this in mind let us draw a System Design Diagram to solve our scaling problem.

So, a user uploads a long url which goes through a load balancer to determine which server to send the payload to. Assuming Server 1 is free to accept a payload and when it gets the request it increments its counter which ranges from 1 million — 2 million and assigns a value to the request. The Request then goes to the base62 service and gets its new shortened 7 character key.

The main job of Zookeeper here is to assign each server with a particular counter range and keep track of its changes so that there is no duplicate keys or database collision.

Let us Scale:

Suppose say Server 3 went down after a certain time so it will remove the entry in the Zookeeper service and make it unassigned again. And let us add another server 4 to the system and it will be assigned to a new range of 4 m — 5 M. This is how we can easily scale up and down the system without any downtime. And since Zookeeper is a service with multiple servers in it so it will eventually be a failsafe system.

A full E2E application to shorten your urls and save it on your profile. It gives you flexibity to choose your domain…

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.

Boost your Front End Development with these tools

Rajdeep Chandra — Mon, 08 Jun 2020 10:29:22 +0000

We all know that working on Front End gives us a lot of space to explore with images, illustrations, placeholders, JSON, themes,VS code plugins etc so I have collated a list of collections which is a must have for every Front End Developers. I have been using these tools for a few years now and it’s pretty much covers everything we all require during our course of development.

1. Visual Studio Code (text editor)

Visual Studio Code is a free source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.

URL: https://code.visualstudio.com/download

2. Emmet (code tool)

Emmet support is built right into Visual Studio Code, no extension is required. Emmet 2.0 has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets

URL: https://emmet.io/download/

3. Live Server (for VS Code)

A Quick Development Live Server with live browser reload.
Start or Stop server by a single click from status bar.
Open a HTML file to browser from Explorer menu.[Quick Gif Demo].
Support for excluding files for change detection.

URL: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

4. Material Theme (for VS Code)

The most epic theme now for Visual Studio Code. It changes your folder icons to Material Design theme.

URL: https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme

5. Prettier (code tool)

Prettier is an opinionated code formatter with support for:
JavaScript, including ES2017

JSX
Angular
Vue
Flow
TypeScript
CSS, Less, and SCSS
HTML
JSON
GraphQL
Markdown, including GFM and MDX
YAML

URL: https://github.com/prettier/prettier

6. Auto Rename Tag (for VS Code)

Auto rename paired HTML/XML tag

URL: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

7. JSON Viewer (Browser Extension)

The most beautiful and customisable JSON/JSONP highlighter that your eyes have ever seen. It is a Chrome extension for printing JSON and JSONP.

URL: https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh

8. Affinity Photo (Photo Editing)

If you could create your own photo editing software, it would work like this. Whether it’s quick corrections, delicate retouching, or immersing yourself in complex fine art with hundreds of layers, Affinity Photo has you covered.

URL: https://affinity.serif.com/en-us/

9. GIMP (Photo Editing)

GIMP is a cross-platform image editor available for GNU/Linux, OS X, Windows and more operating systems. It is free software, you can change its source code and distribute your changes.
Whether you are a graphic designer, photographer, illustrator, or scientist, GIMP provides you with sophisticated tools to get your job done.

URL: https://www.gimp.org/

10. Pexels (for photos)

Free stock photos you can use everywhere. ✓ Free for commercial use ✓ No attribution required.

URL: https://www.pexels.com/

11. Unsplash.com (for photos)

Unsplash is a website dedicated to sharing stock photography under the Unsplash license. The website claims over 110,000 contributing photographers and generates more than 11 billion photo impressions per month on their growing library of over 1.5 million

URL: https://unsplash.com/

12. Placeholder.com (for placeholder images)

Placeholder.com is a free image placeholder service for web designers, serving billions and billions of images each year. You can specify image size & format (.GIF, .JPG, .PNG, .WEBP), background color & text color, as well as the text.

URL: https://placeholder.com/

13. tinypng.com (compress images)

TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!

URL: https://tinypng.com/

14. Figma (design websites)

Figma is a free, online UI tool to create, collaborate, prototype, and handoff.

URL: https://www.figma.com/

15. UI Gradient & Colors (websites for color palettes)

A handpicked collection of beautiful color gradients for designers and developers.

UR: https://uigradients.com/

16. DaVinci Resolve (videos for browser)

DaVinci Resolve 16 is the world’s only solution that combines professional 8K editing, color correction, visual effects and audio post production all in one software tool! You can instantly move between editing, color, effects, and audio with a single click.

URL: https://www.blackmagicdesign.com/in/products/davinciresolve/

17. Font Awesome (for icons)

Font Awesome CDN is the easiest way to get Font Awesome on your website or app, all with just a single line of code. No downloading or installing!

URL: https://fontawesome.com/

18. Undraw (for free illustrations)

Create better designed websites, products and applications. Browse to find the images that fit your messaging, automagically customise the color to match your brand and use it as a normal image, embedded code or directly in your design workflow.

URL: https://undraw.co/

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.

DEV Community: Rajdeep Chandra

Pegasus - A web based REST Client built with MongoDB Atlas

Overview of My Submission

Features 💡

Submission Category:

Link to Code

Additional Resources / Info

Built with 🔧

Building Teleport — An alternative to POSTMAN

Problem we faced:

What we have tried but failed!!

The Design:

Tech Stack & Architecture:

Road Map of Features Releases:

What am I currently working on?

Import JSON collection

Diff checker for testers and developers

Accessibility ♿

Fork or contribute here:

Documenting React Components with docz

What is Docz?

Principles:

Step 1:

For SCSS:

npm

yarn

2. Add the plugin to your gatsby-config.js

For LESS:

npm

yarn

2. Add the plugin to your gatsby-config.js

Step 2:

How to design a URL Shortener web app

A brief on what we are gonna learn:

Building Data Capacity Model:

Algorithms:

Trying to build the system with base62 and MD5 Hash:

Trying to solve the problem with a Counter:

Zookeeper to the Rescue:

Let us Scale:

Link to the GitHub Repo:

Live App:

Link to Download Chrome Extension:

Boost your Front End Development with these tools

1. Visual Studio Code (text editor)

2. Emmet (code tool)

3. Live Server (for VS Code)

4. Material Theme (for VS Code)

5. Prettier (code tool)

6. Auto Rename Tag (for VS Code)

7. JSON Viewer (Browser Extension)

8. Affinity Photo (Photo Editing)

9. GIMP (Photo Editing)

10. Pexels (for photos)

11. Unsplash.com (for photos)

12. Placeholder.com (for placeholder images)

13. tinypng.com (compress images)

14. Figma (design websites)

15. UI Gradient & Colors (websites for color palettes)

16. DaVinci Resolve (videos for browser)

17. Font Awesome (for icons)

18. Undraw (for free illustrations)