Rolling Scopes School

REST Client Application

Built a full-stack React REST client in a team of three: request composition with shareable Base64 URLs, Firebase auth, SSR history and analytics, reusable variables, and generated request snippets. GitHub

React Router 7TypeScriptReduxFirebasei18n

Context

The React course final project was a browser REST client that anyone could use to call open APIs without fighting CORS. The app had to be a real product surface: sign-in and sign-up, a request builder whose method and payload lived in the URL, a read-only response panel, code generation, request history with analytics, and reusable variables. We shipped it on React Router 7 in framework mode so server loaders could proxy requests and render history before it reached the client.

Main page

REST client

The client is the core of the app. Method selection is part of the route, the target URL and body are Base64-encoded in the path, and headers plus query parameters sit in a dedicated editor. Execute sends the request through the application server so the browser never hits CORS. The response panel is read-only. From the same request state we generate snippets (including cURL) with Postman code generators and copy them to the clipboard. Authenticated runs are stored for later restore: method, URL, body, and headers come back in one click from History.

Request builder
Generated snippets

Method, encoded URL, headers, query params, and body in one editor.

Authentication

Email and password auth uses Firebase, with client-side validation before submit (email format and a password of at least eight characters with a letter, a digit, and a special character, Unicode included). Successful login returns to the main page. Signed-in users cannot open Sign In or Sign Up. Expired or invalid tokens bounce private routes back to the main page. Guest chrome shows Sign In and Sign Up; authenticated chrome shows History and Sign Out.

History and analytics

History is a private, lazy-loaded route. The list is produced on the server and sorted by timestamp, newest first. Empty state explains that nothing has been executed yet and links back to the client. Each row records duration, status code, timestamp, method, request size, response size, error details, and endpoint URL. Selecting a row restores the original request in the editor.

History page

Variables

A dedicated Variables route stores named values in local storage. Users add and delete variables, changes persist immediately, and the client substitutes those values into URLs, headers, and bodies so environments can be switched without rewriting every request.

Variables

Team and quality

Three people, one private GitHub repo, develop as the default branch. I worked on routing, the request builder, and shared UI, with English/Russian i18n, a sticky header, and toast error handling.

Used Technologies

Frontend:ReactReact Router 7TypeScriptRedux
Platform:Firebasei18nextVitest