RATA Call - Productivity App

Conceptual Project

𝚃𝙻;𝙳𝚁

what is it?    :: a data query caching app
why use it?    :: to focus test-driven developement
who is it for? :: engineers that want a simplified API recording process

---

Project Brief

Mid-Size Project

Contributors : solo

Timeframe : ~2 weeks

Summary | Goal | Results

Summary

• I helped build a straightfoward devtool enabling developers to monitor & test API results

Goal

• Create an MVP that sends a request & retrieves a response of data while managing input fields

Results

• Users can now track data & be saved as cache storage to revisit quickly at anytime

Background | Challenge | Solution

Background

• In the developer world, they need to always test & implement APIs into their digital product
• As a developer, they need to repeat & call http requests to validate & verify product is working
• There can be a tool that speeds up the review time.
• e.g. Postman, Insomnia, Swagger.io

Challenge

• how many steps does it take to make a http request?
• what inputs are required to fullfill a request?
• how can you retrieve previous fetched data?

Solution

• save every request entry into the cache
• save format field entry & be swappable

Features & Benefits

1. [-]

   • feature :: track & record every sent request made
   • benefit :: you are able to review API quicker

2. [-]

   • feature :: format & copy request inputs as table/json
   • benefit :: maintain & choose input options you prefer

3. [-]

   • feature :: view & copy response outputs
   • benefit :: able to share results with others

Product Requirements

URL Bar Form

• react-hook-form to manage state

  • collect method (select input) & url (text input)
  • submit button to validate
  • color-style border-top card & submit button based on method

• react-query to manage async

  • fetch query data
    • requires: url, method
    • optional: query (searchParams), body (json)
  • save data to cache

• zustand to store global states

  • save results (response data)
  • manage records (request options)

• format request data

  • handle contract & payload
  • get response results | errors
  • format as { metadata, headers, data }

Request Data

• tab options

  • w/ mantine ui & hooks
  • to choose query, body panel

• format options

  • w/ mantine ui
  • switch format options while maintaining field data
  • save format record w/ zustand

• table format

  • rearrange row w/ dnd-kit (drag-n-drop support feature)
  • enter key & value text inputs
  • toggle show checkbox input, disable key_value row
  • remove key_value row
  • parse to object format

• json format

  • edit json w/ codemirror (code editor support feature)
  • copy to clipboard w/ mantine hook
  • reset json
  • parse to object format

Response Data

• tab options

  • w/ mantine ui & hooks
  • to choose body, headers panel

• display metadata

  • default as ---
  • show statusText, durationTime, payloadSize
  • color-style statusText badge

• body panel

  • display data
  • read-only json w/ codemirror (code editor support feature)
  • copy to clipboard w/ mantine hook

• headers panel

  • display headers
  • format as table w/ key & value col

My Process & Game Plan

General Priority

1. create folder structure & naming conventions

2. setup config for each technology requirement (e.g. Routes, Providers)

3. build UI components

   • layout components (e.g. PageLayout, Header, Footer)
   • core & shared components (e.g. Icon, Form, Group)

4. build UI features

   • URL Bar Form
   • Request Data
   • Response Data

5. refactor & organize the code

6. refine & polish the UI

7. add metadata

8. write the case study

My Approach

• each day, work on a different focus point

  • isolate/collaborate on a single objective
  • note down ideas for other tasks
  • keep the project interesting & refreshing

• creative flow

  • if I have an instance of a clear & better approach, I go for it
  • if not, build up to a feasible approach as a starting point
  • if I don't know know at all, I'll just walk, dance, cook, or clean 🎈

• problem space

  • visualize a clear user story per task
  • consider the use case scenarios
  • prioritize the task scope & budget time

• ideation space

  • research & experiment the technologies used
  • limit the toolset for intentional/interactive requirements & expectations
  • keep it proof-of-concept first then move into MVP

• solution space

  • organize, modularize, & scale the code base
  • content → logic → style

Future Enhancements & Technical Improvements

Future Enhancements

• have a timeline/history of sent requests

• have a 'save to collection' for request url, method, inputs

• add params & header to request data tab options

• add validate data section, limit the options to validate per request data input

• include options to save env, auth, cookie, local storage

• add info & doc to response data tab options

  • info :: url & data preview, cUrl preview, js fetch preview
  • doc :: use markdown (edit & preview) to document as api note

Technical Improvements

• implement debounce to improve input onchange performance

• set better types on global state, async data, & form data

  • remove explicit any
  • for zustand, react-query, react-hook-form
  • include generic types

• figure out how to reduce motion violation

• include custom bash script

---

Tools & Technologies

Core
Support
Environment
Utilities