Skip to content

PubNubDevelopers/pn-toolbox-react

Repository files navigation

PubNub Developer Toolbox (aka, "PN Dev Toolbox", "The Toolbox")

This tool was inspired by many (many...) hours of assisting customers with troubleshooting their mobile push issues (most APNs) amongst many other PubNub related issues that required writing code or going through multiple setup steps to analyze, debug, workaround, and resolve. When the answer is "you need to write some code to do that" when it should be a simple tool that does that one thing would be the logical answer, it was not always an optimal customer experience.

After years of talking about how great it would be have tools to automate much of this troubleshooting process, one specific customer had such complex issues that it required daily, multi-hour troubleshooting sessions. This proved to be the tipping point to finally implement this set of Pubnub developer tools, and as a bonus, learn React at the same time. The result of this effort is what you see before you. Enjoy!

Key Set

Key Set

Enter your PubNub key set and initialize it for use in the other screens to perform PubNub API operations throughout the various tools in The Toolbox. An alternative to entering your key set data manually, you can add them to a key set properties file.

Key Set Properties File

When you upload that file, the UI will load a select field with your key sets from the properties file.

Key Set Properties File

Selecting a key set will auto-populate the fields with the values for that key set.

Key Set Properties File

Click the Initialize button to initialize a PubNub object that will be used throughout all the tools to execute PubNub APIs. The Header will be updated to indicate that the initialization was successful.

Key Set Properties File

PN Dashboard Login

(COMING SOON...ISH) At some point, you will be able to login to your PN account and select a key set. However, having a local properties file that contains common values associated to your key sets will be useful for speedy troubleshooting.

Tools Menu Options

The rest of the nav links on the left are pluggable tools that can be added as required. The process for creating and adding tools is documented here. The Toolbox and all tools within are created using the Argon Dashboard React template from Creative Tim. See below for further details about licensing and usage.

Licensing

Useful Links

Social Media

Twitter: https://twitter.com/CreativeTim?ref=creativetim

Facebook: https://www.facebook.com/CreativeTim?ref=creativetim

Dribbble: https://dribbble.com/creativetim?ref=creativetim

Instagram: https://www.instagram.com/CreativeTimOfficial?ref=creativetim