- Designed and developed a clean and modern react app using React.js , HTML, CSS, and JavaScript.
- Implemented the JSON file selecting option using File Handler, along with Copy Action button.
- Utilized responsive design to ensure compatibility across all devices.
- node.js
- Visual Studio Code
- First user need to download the app and open the folder
pretty-json-viewer
in the Visual Studio Code. - Inorder to run the app, follow below steps:
- This command will change the directory to the app directory.
cd pretty-react-app
- This will start compiling the app, and after compiling it will provide the option of link where we can view the app, and even opens the app in default browser.
npm start
- In the brower, user will see the option to select the JSON file using
Choose File
button. - When user selects the JSON file, the file name will be visible next to the button and
Copy JSON
button will gets enabled, and below thatJSON Content
will be visible. - IMP : Also if user clicks on
Choose File
button, and end up selecting no JSON file, then theCopy JSON
button andJSON Content Area
will be disabled from the webpage, as no file is selected.