Im sorry. What about CORS? External website has to explicitly allow us to fetch a data using browser. I think we should make a local server as "proxy"-layer between our browser and remote web server.
I learn lot of things when you create any clone or any video. I don't have a word, You are really a master. keep up the good work and don't bother about useless comments.
Thanks for the video! This is a cool thing to build for CV but in reality it's 1% of postman features. Postman gives you history, collections, different types of data, intercepting requests for authentication, collaboration with team, etc. It's also packed in Electron which makes it usable on every OS.
Postman is also ridiculously bloated and slow, being an electron app. With some improvements using localStorage , you could easily add history and collections features to the simple example shown in the video.
@@squ34ky I agree with that. I also hate electron apps. But I see that a lot of programmers for some reason think that it is "easy" to add all this features, test own app, make it faster than postman, support it, etc. There is a reason why we use apps that are already there and not building everything by ourselves.
@@MonsterlessonsAcademy we need not release the app to the public or provide support for it. One can make an app for private use. When you consider how many such "free" apps suffer from feature bloat and eventually gets monetised in the form of "pro" features over time, it would seem a better proposition to just build it yourself with only the features you need.
Really Nice Project 🔥 Instead of using a package(codemirror) for displaying response json, we could also do JSON.stringify(response.data, null, 2) to format JSON and then insert the output inside a tag to get a nice displayed JSON in browser.
Hey brother, I was just going to build a postman clone and searched on youtube to verify there isn't already, and here you uploaded a video on it 35 mins ago 😶😶. Now I'll need to think about a new unique project to build 😭😭........btw love your videos
Good video showing all the aspects of requests but something I was hoping you were going to touch on was going to the network tab, copying a network request as a fetch object and then calling the fetch object inside the js console tab. This still sends the old header/auth data etc and allows you to change query Params etc which allows you to circumvent UI restrictions. (This can also be done in Firefox by clicking the request and hitting edit/resend). I'm not super familiar with all the inner workings of this process(or how to protect against it) but it definitely shows why you need validation/restriction on the backend!
@@RetoonHD I agree, in general JS is being shaped into things it wasn't meant to do causing it to be clunky and sometimes hard to work with. It was originally created to be a simple website scripting language, now its used for backend, mobile development, even games and machine learning. It was a nightmare for me to work with node, because it has so many clunky issues and its hard to work with, even the creator of node has given up on it and created deno. But as always, this is only my opinion.
@@Tommy-jn9ps And we respect it, but Deno still uses Javascript. Anyway, it doesn't matter how you open the door, it's just that you open it well.left or right doesn't matter, doing it right does matter
May be update it now to: 1. use fetch instead of axios and 2. also add an html renderer instead of using browser, and 3. create executable would be a good update to this tutorial
Call me crazy, but I used this example to get into using modules, parcel and typescript. I also wanted to save my requests in localstorage, list them, load them as well as export and import. It was a really great learning experience. But: It would be an awesome Video how YOU would turn this into a „state of the art“ typescript react application (including these advanced features) with the very latest bits! Even if it’s is easy to create this from scratch, refactoring this could be much more interesting.
For all you idiots and fan boys saying "this isn't a real postman clone", "this is only 1% of postman", "this is stupid", "why reinvent the wheel only to do a dumb version of it" you've all missed the point. Making clones of other software is not done with the intent of not needing that other software, or making a viable replacement. It's to learn different ways of doing things, or to practise in areas that you may feel a knowledge gap with. Personally I learned a lot from this tutorial, and not about making requests. Thanks Kyle!
We use postman tp.test our APIs, we use environment file a lot, so that all.detals are carried from.one call to another. I guess that is not possible when we build our own postman.However I am sure this works for at least 70.percent of projects. We can also.use Thunder Client extension inside VS code, which works like postman
Interesting approach to use data attributes to identify elements instead of IDs. This looks like a uniform approach, but I'd rather stick to IDs to identify elements since it expresses the "element identifier" intent more explicitly.
Actually using (selecting) empty data attributes can be shorter than using id attributes to select specific elements. Let's see if this gets mainstream :)
31:44 my axios.interceptors.response.use doesn't working. So when updateResponseDetails function called, there occur Uncaught TypeError. The Error tell me response.customData.time is undefined. I've checked GitHub code. there's no wrong spelling in my code. I don't understand the process of axios.interceptors. how they 'intercepting' something. and where they intercept in code(ex, like "before catch" or "after then(response =>") please help me. this video is about 40mitnutes but I've been here about 5 hour
@@francisconavarrete2179 i was getting this failed build error (heroku) ``` Cannot find module: '@popperjs/core'. Make sure this package is installed. You can install this package by running: npm install @popperjs/core. ``` if u get the same just installing that dependency might work 😄
Isn't this whole idea flawed because if you have 500 error on your php backend, xhs/cors protection in chrome will prevent you to see the error message
I have a lot of code sending requests to my server but i rarely need to use this postman functionality, just use console/print like with everything else
PSA: defaultTabBinding from @codemirror/commands was removed recently, breaking the project. Replace it with indentWithTab and it should work as expected. Hope this helps!
I'm getting snowpack error no module found in snowpack/index.bin.js hence not able to run the application. I just clone github repo. I didn run npm install to include all packages mentioned in package.json
@David Freer Insomnia has the same features but it has clean UI. Some of the features available through plug-ins , meaning that you can install them if you need. It is personal preference, I don't like when your tool overloaded with buttons, links, hints, pop-ups ...
lol, kyle just killed postman, all you have to do is let you save these to disk and ship them alongside a repository and there would be no actual need for postman itself, combine this with a live shared version online and why would you even pay for postman teams anymore?
I don't think the point is to reinvent the wheel or even replacing Postman with this app, the point is practicing JS and learning more about HTTP requests and ES modules
This episode: Make your own postman
Next episode: Make your own Vscode
After next episode: Make your own programing language 😍
Last episode: Make your own Web-dev simplified yt channel 👍
@@ajayraho more like Last Episode: Make your own Kyle 🤣
Make React with React
@@vtv4373 React-ception
Oh no, now I've to create my own Postman to test my project's APIs😭
Wish me luck🙂
Well... You don't *have* to.. Lol
Im sorry. What about CORS? External website has to explicitly allow us to fetch a data using browser. I think we should make a local server as "proxy"-layer between our browser and remote web server.
Just host a static page on github, it has cross enabled for *...
Wow, Kyle is pumping out such premium content week after week - so much fun but I can see the immense dedication and passion.
I learn lot of things when you create any clone or any video. I don't have a word, You are really a master. keep up the good work and don't bother about useless comments.
Thanks for the video! This is a cool thing to build for CV but in reality it's 1% of postman features. Postman gives you history, collections, different types of data, intercepting requests for authentication, collaboration with team, etc. It's also packed in Electron which makes it usable on every OS.
Postman is also ridiculously bloated and slow, being an electron app. With some improvements using localStorage , you could easily add history and collections features to the simple example shown in the video.
@@squ34ky I agree with that. I also hate electron apps. But I see that a lot of programmers for some reason think that it is "easy" to add all this features, test own app, make it faster than postman, support it, etc. There is a reason why we use apps that are already there and not building everything by ourselves.
@@MonsterlessonsAcademy we need not release the app to the public or provide support for it. One can make an app for private use. When you consider how many such "free" apps suffer from feature bloat and eventually gets monetised in the form of "pro" features over time, it would seem a better proposition to just build it yourself with only the features you need.
@@squ34ky Electron is slow at the point of starting up. Once it's up and running then it's fine.
Really Nice Project 🔥
Instead of using a package(codemirror) for displaying response json, we could also do JSON.stringify(response.data, null, 2) to format JSON and then insert the output inside a tag to get a nice displayed JSON in browser.
Correct, this could be the better way. Codemirror package is having some issues with node versions as well.
What about colour coding?
Hey brother, I was just going to build a postman clone and searched on youtube to verify there isn't already, and here you uploaded a video on it 35 mins ago 😶😶. Now I'll need to think about a new unique project to build 😭😭........btw love your videos
There's always room for more clones :)
Make a clone but add your own additional features so that it’s still your idea
@@xfire3778 that's how competitors begin :)
postman is way more than sending a bunch of get post requests
Ikr lol
Good video showing all the aspects of requests but something I was hoping you were going to touch on was going to the network tab, copying a network request as a fetch object and then calling the fetch object inside the js console tab. This still sends the old header/auth data etc and allows you to change query Params etc which allows you to circumvent UI restrictions. (This can also be done in Firefox by clicking the request and hitting edit/resend). I'm not super familiar with all the inner workings of this process(or how to protect against it) but it definitely shows why you need validation/restriction on the backend!
Crazy! Just goes to show that almost anything nowadays can be build with JS! 🤷♂️
Yep, but that doesn't mean you should.
They are all built using JS stupid
@@RetoonHD I agree, in general JS is being shaped into things it wasn't meant to do causing it to be clunky and sometimes hard to work with. It was originally created to be a simple website scripting language, now its used for backend, mobile development, even games and machine learning. It was a nightmare for me to work with node, because it has so many clunky issues and its hard to work with, even the creator of node has given up on it and created deno. But as always, this is only my opinion.
@@Tommy-jn9ps And we respect it, but Deno still uses Javascript. Anyway, it doesn't matter how you open the door, it's just that you open it well.left or right doesn't matter, doing it right does matter
Postman is build in JS
It's made in electron
Postman can generate API documentation and a bunch of other things too. Not just display a HTTP response.
@Chnxcx Found the junior dev
May be update it now to:
1. use fetch instead of axios and
2. also add an html renderer instead of using browser, and
3. create executable
would be a good update to this tutorial
The difference is that Postman is not a browser so it will ignore CORS policy.
Call me crazy, but I used this example to get into using modules, parcel and typescript. I also wanted to save my requests in localstorage, list them, load them as well as export and import. It was a really great learning experience.
But: It would be an awesome Video how YOU would turn this into a „state of the art“ typescript react application (including these advanced features) with the very latest bits! Even if it’s is easy to create this from scratch, refactoring this could be much more interesting.
This man is crazy😂
respect++
ReferenceError: respect is not defined.
:(
@@Will4_U var respect = 0;
just put that line ;)
@@haydencordeiro semicolon is optional in JS
Next - Stop Using VsCode : Create Your Own VsCode using VsCode 😂
😂
This clone is 41mb 2500 files in 650 folders!!! why bother.
He should so something like codesandbox or codepen
Impressing, I saw many API tools with good designs and we can do it ourselves. Yet with complicated functions, we may directly use tools as well.
i was thinking of something like this , because i couldn't install postman on my computer. So thank you so much kyle for making this video.
You can use postman on web.
Excellent 👌
I can use this idea to document APIs in next project 😃
This is amazing. It's intimidating and inspiring at the same time.
Congrats, Kyle! Very elegant code. Enjoyed this a lot.
Thank you Kyle. Can you pretty please do a tutorial of a CRM-like clone? So coding something like Salesforce, a more simple version. :)
Oh man.. the postman dev team is mad right now lol.. Love your videos!
This video shows the power of vanilla JavaScript, and especially data attributes
Can’t believe that I found this video at the perfect time that I needed it !!!!!!!!!!!!!!!
Never know when postman starts to work on profit better to make our own before hand
For all you idiots and fan boys saying "this isn't a real postman clone", "this is only 1% of postman", "this is stupid", "why reinvent the wheel only to do a dumb version of it" you've all missed the point. Making clones of other software is not done with the intent of not needing that other software, or making a viable replacement. It's to learn different ways of doing things, or to practise in areas that you may feel a knowledge gap with. Personally I learned a lot from this tutorial, and not about making requests. Thanks Kyle!
We use postman tp.test our APIs, we use environment file a lot, so that all.detals are carried from.one call to another. I guess that is not possible when we build our own postman.However I am sure this works for at least 70.percent of projects. We can also.use Thunder Client extension inside VS code, which works like postman
I really love this project, thank 🙏💕
Thank you so much I've learned a lot of new stuff throughout this video !
Great project, but postman saves history of all requests, need to figure that out.
Use localstorage
Or connect it to a database
Interesting approach to use data attributes to identify elements instead of IDs. This looks like a uniform approach, but I'd rather stick to IDs to identify elements since it expresses the "element identifier" intent more explicitly.
Actually using (selecting) empty data attributes can be shorter than using id attributes to select specific elements. Let's see if this gets mainstream :)
Great tutorial! Thanks for sharing very helpful content in your channel!
There are also several REST clients as extensions for vscode. :)
amazing tool thanks for everything. we live in a society were everybody gets smarter from each others experience nice
could you plzz make a video how we can convert this postman clone into a windows desktop application
Great video, Can someone help me on how can we host this application on netlify or gh-pages ?
Building this with react would be challenging as hell.
in git branch is main to get source code what will be the get checkout
how to deploy this ?
"Stop ordering online, make your own Amazon instead"
Could you please update your tutorial on how to implement Stripe? I am having a really tough time with it.
Great add more options in this
Next video:
Stop using VS Code.
Stop using Windows/MacOS/Linux.
I have become Terry Davis.
Every video is about curiousity ❤️
31:44 my axios.interceptors.response.use doesn't working. So when updateResponseDetails function called, there occur Uncaught TypeError.
The Error tell me response.customData.time is undefined.
I've checked GitHub code. there's no wrong spelling in my code.
I don't understand the process of axios.interceptors. how they 'intercepting' something. and where they intercept in code(ex, like "before catch" or "after then(response =>")
please help me. this video is about 40mitnutes but I've been here about 5 hour
Hi Kyle, how do you use snowpack for prod? Last time I checked it wouldn't minify or code-split.
i also tried to host the project on heroku but runing into some errors :(
@@alex4tm1 have you been able to solve it?
@@francisconavarrete2179 yep... I can't remember what the fix was though 😂
@@alex4tm1 where did they solve it?🥺
@@francisconavarrete2179 i was getting this failed build error (heroku) ``` Cannot find module: '@popperjs/core'. Make sure this package is installed.
You can install this package by running: npm install @popperjs/core. ``` if u get the same just installing that dependency might work 😄
And I use Apidog instead of Postman, more for teams I think.
Kyle can you make a video explaining how to use push api
thunder client is enough for me :D
Make you own google sheets 🥺🥺❤️❤️❤️
He actually did that :)
@@avneet12284 really i cant find it... 😣
Be a good person and avoid the temptation for clickbait titles.
Isn't this whole idea flawed because if you have 500 error on your php backend, xhs/cors protection in chrome will prevent you to see the error message
Haha all dislikes from POSTMAN team. But thunder client a Vs Code extention is also pretty cool.
Snowpack? What about parcel
Yup I used cdn
@@kishalayray7570 update
Im using vite now its better than snow and parcel XD
How can I deploy the project?
I have a lot of code sending requests to my server but i rarely need to use this postman functionality, just use console/print like with everything else
Hi web dev simplified, do you have plans to release typescript content?
PSA: defaultTabBinding from @codemirror/commands was removed recently, breaking the project. Replace it with indentWithTab and it should work as expected. Hope this helps!
any reason why you're using attributes for a lot of these things instead of classes? very interesting
@David Freer that's fair, though I'm not sure if querySelector would still have that difference
Detailed fastify tutorial please
Why i need to reinvent the wheel. You can install Thunder Client which is a VS Code extension and it does the same job as postman does.
Every time I scroll by the thumbnail I read Postman Malone
What about core errors?
Can't work with this due to cors issue
Styled components tutorial?
I'm getting snowpack error no module found in snowpack/index.bin.js hence not able to run the application. I just clone github repo. I didn run npm install to include all packages mentioned in package.json
great idea!
Make production based nodejs projects
have you tried to push this one to production? any recommendation? thx !
nice, amflearning by doing ☕🚀
Why has everyone stopped using postman all of a sudden for?
It's ridiculously bloated and slow.
I was thinking about doing this the other day, when my company paid for a bunch of Beeceptor licenses
Cors?
Or just use curl... ?
This dude bro amazing, Create your own planet lmao XD
hey kyle. do mobirise clone. just a basic one. :p
use defaultKeymap instead of defaultTabBinding
This is awesome
He should be the true CEO of Google
Why not use reactjs
+1
Next video: world clone 😂
😅
Using Vanilla Js
I mean cool but why would i?My schedule is full making a ramen order button for vscode
Postman is suck. It has cluttered interface with a lot of unnecessary features. Insomnia or the plug-in for VC are much better
True!!
@David Freer Insomnia has the same features but it has clean UI. Some of the features available through plug-ins , meaning that you can install them if you need. It is personal preference, I don't like when your tool overloaded with buttons, links, hints, pop-ups ...
Stop using a good free tool. Make your own. Man you have a lot of free time. You should make your own npm and vscode too ^_^
Next video: Stop using windows - Create Your Own OS
I created Postman using only CSS
zsh shell + vi mode + HTTPie.
STOP STOPPING ⛔️! I give a like but I don't like recomendations that looks mandatory like DONT USE THIS OR THAT. STOP USING THIS... bla bla bla
lol, kyle just killed postman, all you have to do is let you save these to disk and ship them alongside a repository and there would be no actual need for postman itself, combine this with a live shared version online and why would you even pay for postman teams anymore?
i dont think people would deal with this
Everyone is not super intelligent like Kyle....so I am happy with using postman instead 😀
That’s just stupid. Why reinvent the wheel?
So, why are you here ????
@@johnnydriesen7575 That’s a stupid question :)
It’s because I’m subscribed to his channel. But that’s not the point
@0x88 and CSS :)
Actually I learned new things that I used literally the second day :)
@0x88 Exactly my point as well, 0x88.
I don't think the point is to reinvent the wheel or even replacing Postman with this app, the point is practicing JS and learning more about HTTP requests and ES modules
Next , dont use ide , build your own .
stop using innerHTML to clear your containers 🤣🤣🤣
But educational, what is the use?
Post Clone. . .
Do the same with DJango on python, it’s faster stable and no html is needed
Or just use Insomnia
Test