Skip to content

Latest commit

 

History

History
479 lines (365 loc) · 13.1 KB

README.md

File metadata and controls

479 lines (365 loc) · 13.1 KB

RATA Call - Productivity App

logo

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

thumbnail

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 Vite TypeScript React Mantine UI React Query React Hook Form React Router Zustand
Support Ky Zod DnD-Kit CodeMirror JSON Server React Hot Toast React Error Boundary Tabler Icons Iconify
Environment EditorConfig ESLint Prettier Husky Lint-Staged Commitizen Commitlint Lighthouse GitHub Actions
Utilities VS Code Git GitHub PNPM Figma Jam Netlify