{"id":51280348,"url":"https://github.com/patriciasegantine/redirect-lab-client","last_synced_at":"2026-06-30T01:03:45.258Z","repository":{"id":366549797,"uuid":"1275343611","full_name":"patriciasegantine/redirect-lab-client","owner":"patriciasegantine","description":"React client for Redirect Lab: create, manage, track, and export short links with an accessible UI and automated test coverage.","archived":false,"fork":false,"pushed_at":"2026-06-22T09:05:47.000Z","size":410,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-22T11:07:35.335Z","etag":null,"topics":["accessibility","github-actions","link-management","reactjs","shadcn-ui","tailwindcss","tanstack-query","typescript","url-shortener","vercel","vite","vitest"],"latest_commit_sha":null,"homepage":"https://ps-redirect-lab.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/patriciasegantine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-20T15:10:24.000Z","updated_at":"2026-06-22T09:09:28.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/patriciasegantine/redirect-lab-client","commit_stats":null,"previous_names":["patriciasegantine/redirect-lab-client"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/patriciasegantine/redirect-lab-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patriciasegantine%2Fredirect-lab-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patriciasegantine%2Fredirect-lab-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patriciasegantine%2Fredirect-lab-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patriciasegantine%2Fredirect-lab-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/patriciasegantine","download_url":"https://codeload.github.com/patriciasegantine/redirect-lab-client/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/patriciasegantine%2Fredirect-lab-client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34948230,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-29T02:00:05.398Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","github-actions","link-management","reactjs","shadcn-ui","tailwindcss","tanstack-query","typescript","url-shortener","vercel","vite","vitest"],"created_at":"2026-06-30T01:03:43.998Z","updated_at":"2026-06-30T01:03:45.245Z","avatar_url":"https://github.com/patriciasegantine.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Redirect Lab — Client\nA focused link-management experience for creating, tracking, sharing, and exporting short URLs.\n\n![Redirect Lab application preview](./public/preview.png)\n\n## Overview\n\nRedirect Lab is a full-stack URL shortener built around a simple idea: link management should feel immediate, reliable, and pleasantly uneventful. The client provides a responsive interface for the entire link lifecycle, from creating a memorable slug to monitoring access counts and exporting the link collection as CSV.\n\nThe application communicates with the standalone Redirect Lab API and keeps the interface in sync when a short link is accessed in another browser tab.\n\n[Live application](https://ps-redirect-lab.vercel.app/) -\n[Server repository](https://github.com/patriciasegantine/redirect-lab-server)\n\n### What you can do\n\n- Create validated short links with custom slugs\n- Copy and open generated URLs directly from the dashboard\n- Track access counts with cross-tab updates\n- Delete links with contextual loading and success/error feedback\n- Export the complete link collection as CSV\n- Switch between light and dark themes\n- Navigate with accessible labels, dialogs, focus states, and form feedback\n\n## Background\n\nRedirect Lab started as [Brev.ly](https://github.com/patriciasegantine/brev.ly), developed during a postgraduate course to explore full-stack development and AWS. After the course ended, the original monorepo became the foundation for a broader personal project: the application was rebranded, the client and server were split into independent repositories, and new features were layered on top.\n\nThe infrastructure choices shifted deliberately toward low-cost or free-tier services: Neon for serverless PostgreSQL, Railway for server deployment, Cloudflare R2 for object storage, and Vercel for the client. This makes the project practical to run and iterate on outside of a classroom or enterprise environment.\n\nThis repository contains the React client. The backend, API contracts, persistence layer, and CSV export pipeline live in the [Redirect Lab server repository](https://github.com/patriciasegantine/redirect-lab-server).\n\n## How it works\n\n1. The client validates the destination URL and custom slug before sending them to the API.\n2. React Query keeps the link collection and mutation states synchronized with the server.\n3. Visiting a short URL resolves its destination, records the access, and redirects the visitor.\n4. A browser channel notifies open dashboard tabs so access counts can be refreshed.\n5. CSV exports are generated by the server and delivered through object storage.\n\n## Tech stack\n\n| Area | Technologies |\n| --- | --- |\n| Core | React 19, TypeScript, Vite |\n| Routing and data | React Router, TanStack Query, Axios |\n| Forms and validation | React Hook Form, Zod |\n| UI | Tailwind CSS, shadcn/ui, Radix UI, Phosphor Icons |\n| Quality | Vitest, Testing Library, axe-core, ESLint, Prettier |\n| Delivery | GitHub Actions, Vercel |\n\n## Project structure\n\n```text\nsrc/\n├── components/   # Pages, layouts, feature components, and UI primitives\n├── hooks/        # Server-state and application hooks\n├── services/     # API client and endpoint integrations\n├── schema/       # Form and domain validation\n├── lib/          # Shared browser and utility modules\n├── types/        # TypeScript domain types\n└── test/         # Shared test setup\n```\n\n## Running locally\n\n### Requirements\n\n- Node.js 22+\n- npm\n- A running instance of the [Redirect Lab API](https://github.com/patriciasegantine/redirect-lab-server)\n\n### Setup\n\n```bash\nnpm install\ncp .env.example .env\nnpm run dev\n```\n\nThe development server runs at `http://localhost:5173`.\n\n### Environment variables\n\n```dotenv\nVITE_FRONTEND_URL=http://localhost:5173\nVITE_BACKEND_URL=http://localhost:3333\n```\n\n| Variable | Purpose |\n| --- | --- |\n| `VITE_FRONTEND_URL` | Public client URL used to build and display short links |\n| `VITE_BACKEND_URL` | Base URL for the Redirect Lab API |\n\n## Available scripts\n\n| Command | Description |\n| --- | --- |\n| `npm run dev` | Start the Vite development server |\n| `npm run build` | Type-check and create a production build |\n| `npm run preview` | Preview the production build locally |\n| `npm run lint` | Run ESLint |\n| `npm run format` | Format TypeScript and TSX files with Prettier |\n| `npm run typecheck` | Run TypeScript checks without emitting files |\n| `npm run test` | Run the Vitest suite in watch mode |\n| `npm run test:coverage` | Generate the test coverage report |\n| `npm run pre-pr` | Run lint, tests, and a production build |\n\n## Delivery and quality\n\nPull requests run automated tests, type-checking, and linting through GitHub Actions. Vercel's Git integration creates preview deployments for branches and deploys changes merged into `main` to production.\n\nThe component suite includes behavioral and accessibility tests, with Testing Library and axe-core covering the user-facing flows rather than implementation details.\n\n## What's next\n\n- **Access dashboard**: charts showing clicks over time, with last-access date per link\n- **QR Code generation**: client-side QR Code per link with PNG download\n- **Link expiration**: optional expiry date on creation, with a distinct expired state in the UI\n- **UTM builder**: optional UTM fields on the creation form with a live URL preview\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n## Author\n\nCreated by **Patricia Segantine** — Senior Frontend Developer\n\n[LinkedIn](https://linkedin.com/in/patriciasegantine) · [Portfolio](https://patriciasegantine.vercel.app/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatriciasegantine%2Fredirect-lab-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatriciasegantine%2Fredirect-lab-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatriciasegantine%2Fredirect-lab-client/lists"}