Introduction
This month, I started working on a new side project called R2 Tester—originally named Postman-frontend, thanks to ChatGPT. Designed as a learning tool, R2 Tester replicates Postman’s interface and features, helping me deepen my understanding of API interaction. The idea stemmed from another side project I started working on the previous month (yep 🤦♂️).
About R2 Tester
It's a tool I built to practice exchanging data and files (yet to be implemented) with the backend (Node.js in my case). The front end is developed with HTML, CSS/SASS, JavaScript, DOM manipulation, Bootstrap, and Prettify for JSON formatting.
The tool saves requests in the browser's local storage and loads them on the UI. Users can create collections, folders, and individual requests, with responses visualized in a clean, formatted view through Prettify.
Key Features
- Data Exchange: R2 Tester is designed to help users practice sending and receiving data with the backend.
- Built with: HTML, CSS/SASS, JavaScript, DOM and Bootstrap.
- Request Management: Users can create and manage collections, folders, and requests.
- LocalStorage: Save and load requests directly from the browser's localStorage.
- Prettify: Formats JSON responses for easy readability.
Code and Live Demo
You can dive into the code and see the live demonstration of the project directly in your browser by visiting the project's GitHub repository at the following URL:
https://github.com/adnannazir235/R2-Tester
Project Status
R2 Tester is a work in progress, lacking key features. While it's not for production use, It's main purpose was learning API interactions, while demonstrating core concepts. Explore the code for educational purposes, but be aware of its limitations.
Conclusion
R2 Tester has been an exciting and educational project that has allowed me to explore the intricacies of web development and API interactions. As I continue to develop this tool, I hope it serves as a useful resource for others who are also looking to deepen their understanding of backend communication and data exchange.
Top comments (0)