{"id":24559259,"url":"https://github.com/parcellab/challenge-frontend-engineer","last_synced_at":"2026-01-30T06:36:05.754Z","repository":{"id":70191776,"uuid":"593614464","full_name":"parcelLab/challenge-frontend-engineer","owner":"parcelLab","description":"🖌 Take this emoji brush. It's dangerous to go alone...","archived":false,"fork":false,"pushed_at":"2025-12-05T11:30:27.000Z","size":4097,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-12-07T14:43:38.093Z","etag":null,"topics":["team-architecture"],"latest_commit_sha":null,"homepage":"","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/parcelLab.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":"CODEOWNERS","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":"2023-01-26T12:59:56.000Z","updated_at":"2025-12-05T11:30:31.000Z","dependencies_parsed_at":"2023-03-07T18:15:12.401Z","dependency_job_id":null,"html_url":"https://github.com/parcelLab/challenge-frontend-engineer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/parcelLab/challenge-frontend-engineer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parcelLab%2Fchallenge-frontend-engineer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parcelLab%2Fchallenge-frontend-engineer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parcelLab%2Fchallenge-frontend-engineer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parcelLab%2Fchallenge-frontend-engineer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/parcelLab","download_url":"https://codeload.github.com/parcelLab/challenge-frontend-engineer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/parcelLab%2Fchallenge-frontend-engineer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28906668,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-30T04:02:34.702Z","status":"ssl_error","status_checked_at":"2026-01-30T04:02:33.562Z","response_time":66,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["team-architecture"],"created_at":"2025-01-23T06:16:04.339Z","updated_at":"2026-01-30T06:36:05.735Z","avatar_url":"https://github.com/parcelLab.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# parcelLab — Order Compass (Challenge Scaffold)\n\n- [parcelLab — Order Compass (Challenge Scaffold)](#parcellab--order-compass-challenge-scaffold)\n    - [📖 About the project and the use case](#-about-the-project-and-the-use-case)\n    - [⚙️ Technical overview and instructions for developing](#️-technical-overview-and-instructions-for-developing)\n    - [🏗️ Solving the Challenge and Rules to follow](#️-solving-the-challenge-and-rules-to-follow)\n        - [IMPORTANT: Time limit](#important-time-limit)\n        - [Use of AI and coding agents](#use-of-ai-and-coding-agents)\n        - [1️⃣ Overall goal](#1️⃣-overall-goal)\n        - [2️⃣ Backlog tasks to choose from](#2️⃣-backlog-tasks-to-choose-from)\n        - [3️⃣ Deliverables](#3️⃣-deliverables)\n\n## 📖 About the project and the use case\n\nThis is a synthetic project to evaluate your frontend engineering skills. It simulates a real world scenario that you\nmight encounter when working at parcelLab. We want to see how you approach the task, how you structure your code and how\nyou implement the requirements.\n\nThe use case is an order tracking application that allows users to look up their order status using an order number and\nzip code. Once the order is found, the user should be able to see detailed information about the order, including its\ncurrent status, checkpoints, and delivery information.\n\n\u003e Please do not fork this repository. Clone it, work locally, and submit either as (non-forked) repository or a zip file.\n\n## ⚙️ Technical overview and instructions for developing\n\nModern FE scaffold: **Vite + React + TypeScript + Tailwind (shadcn‑style)**, **MSW** for the mocked API, **Vitest** for\nunit tests, and **Biome** for lint/format.\n\n\u003e This is **starter** code to build an order tracking application. It includes the lookup page, a bare Order Details\n\u003e page, a mocked API, design tokens, and might **contain bugs**.\n\n### Prerequisites\n\n- Node.js 20.x or higher\n- pnpm 9.x\n\n### Getting started\n\n```bash\n# install (pnpm preferred, but npm/yarn work too)\npnpm install\n\n# run dev\npnpm dev\n\n# run tests\npnpm test\n\n# typecheck, lint \u0026 format\npnpm typecheck\npnpm lint\npnpm format\n```\n\nOpen \u003chttp://localhost:5173\u003e and try a valid order like **0000RTAB3** with zip **81371**.\n\n### Structure\n\n```bash\nsrc/\n  components/ui/*         # shadcn-style primitives (Button, Card, ...)\n  components/Timeline.tsx # simple timeline\n  components/OrderHeader.tsx\n  lib/status.ts           # computed status heuristic (simplified)\n  lib/format.ts           # date formatting helpers\n  mocks/handlers.ts       # MSW mock: GET /orders/:orderNumber?zip=\n  mocks/browser.ts        # MSW worker\n  routes/Lookup.tsx       # lookup form\n  routes/OrderDetails.tsx # details view (uses router state)\n  styles/globals.css      # tailwind + CSS variables\n  types/order.ts          # data types\ndata/shipments.json       # provided dataset\ntests/*                   # vitest specs\n```\n\n### Mocked API\n\n- **Endpoint:** `GET /orders/:orderNumber?zip=:zipCode`\n- Returns `404` if order not found, `403` if zip mismatch, `200` with the order otherwise.\n- Implemented via **MSW**; no server needed in dev.\n\n### Notes\n\n- The shadcn CLI config (`components.json`) is included; you can also generate more components if desired.\n- **Biome** replaces ESLint + Prettier (see `biome.json`).\n\n## 🏗️ Solving the Challenge and Rules to follow\n\n### IMPORTANT: Time limit\n\n\u003e 💡 we want to have a fair playing field for all applicants. Therefore we kindly ask you to NOT spend more than **4\nhours** on this challenge. If you reach the time limit, please stop working on it and send us what you have. We will\n\u003e evaluate your submission based on what you have done so far and also take into consideration that you had a limited\n\u003e time budget.\n\u003e\n\u003e We value very much good time management and transparency and prefer working code over unfinished 'perfect' solutions.\n\n### Use of AI and coding agents\n\nYou are allowed to use AI tools and coding agents to help you solve the challenge in both code and documentation.\nIf you chose to do so, please document any AI usage in the provided `AI_LOG.md` file so we can understand how you\ninstructed AI to help you solve the challenge. Just dumping the conversation in there is fine, we are mainly interested\nin how you prompted and verified the outputs.\n\u003e IMPORTANT: once you ship whatever was created either by you or by the llm/agent it is YOUR CODE and your\n\u003e responsibility to make sure it is correct, secure and follows best practices.\n\n### 1️⃣ Overall goal\n\nPick from the tasks below to improve the project according to your time budget and priorities.\n\n### 2️⃣ Backlog tasks to choose from\n\nYou are free to choose which tasks to implement from the list below. You do NOT have to implement all of them. Pick the ones\nthat you think are most relevant to showcase your skills within the given time budget and prioritise them from your\nperspective based on impact on user experience and business value.\nImagine these are **not yet in a prioritised** list - they were just added to the backlog by various stakeholders and\nyou can pick and order them as you see fit. Choose wisely and justify your choices in the `DECISIONS.md` file.\n\n#### FR-001 Complete the computed status heuristic\n\nThis is an important part for usability and user experience. The current implementation is simplified and does not cover\nall cases. Improve the `lib/status.ts` to cover more edge cases and provide a more accurate status computation based on\nthe order's checkpoints and delivery information.\n\n#### FR-002 improve a11y/perf, improve test coverage\n\nMake sure all code and css is WCAG accessibility act compliant as required by law and best practices. Improve\nperformance for mobile devices which are the majority of users. Optimise for lighthouse and Google performance\ncriteria. Add more unit/integration tests to cover edge cases and make sure the code is robust. Achieve 100% test\ncoverage for all new and existing code. This is preparation for the audit in 2 months.\n\n#### DEF-001 Fix the failing test and related type errors\n\nThere is a failing unit test and some TypeScript errors. Identify the root cause, fix the issues, and ensure all tests pass.\n\n#### FR-003 Optional ZIP input to disclose additional order and tracking information\n\nCurrently the zip-code in the lookup is required to submit. We should make that optional and display only basic tracking\ninformation when no zip-code is provided. That also makes the order details page accessible without zip-code, but only\nwith limited information and by calling the url with just the order-number (e.g. `/order/0000RTAB1`). If the ZIP code is\nprovided the page shall display all information relevant to the recipient and the goods in the order.\n\n#### FR-004 UX improvement: show articles included in the order\n\nOur customers (e-commerce shops) want to provide their end-customers with more transparency about what is included in\nthe order. Therefore we want to show the articles included in the order on the order details page. Please enhance the\norder details page to include a section that lists all articles in the order, including their name, quantity, and any\nother relevant information available in the order data. Ideally, include images if available. Links to the article\ndetail page on the shop's website would make a good addition as well.\n\n#### FR-005 UX improvement: enhance the order details page\n\nThe order details page is functional but bare-bones. Improve the user experience by enhancing the visual design,\ninformation hierarchy, and overall usability. Consider what information is most important to a user tracking their\npackage and how to present it effectively. You have creative freedom here — show us how you would make this page\ndelightful and informative for end users.\n\n#### FR-006 Clearly show the user the current status and the next action (for them or the carrier)\n\nwe have a computed status, but it is not very visible in the UI. Improve the order details page to prominently display\nthe current status (e.g. \"In Transit\", \"Out for Delivery\", \"Delivered\") and what the user can expect next (e.g. \"\nExpected delivery tomorrow\", \"Action required: Please contact carrier\"). Or if no action is required, show that clearly\nas well.\nAdd a short human‑readable explanation under the computed status (e.g., “Your parcel left the local depot at 08:12 and\nis expected on Tue”).\n\nImplement a rule‑based explainer function and an evaluation harness (/evaluation/explainer.spec.ts) with 4–6 cases.\n\n#### DEF-002 Orders with two tracking numbers show only one tracking timeline\n\nThere is a bug in the order details page when an order has two tracking numbers (e.g. from different carriers).\nCurrently only one timeline is shown, which can be confusing for users. Fix the bug to ensure that both timelines are\ndisplayed correctly, allowing users to see the full tracking information for their order. Should be easy.\n\n#### OPEN-001 Surprise us\n\nIs there something you'd love to add, improve, or experiment with? A small feature, a polish detail, a clever\nintegration, or just something that makes you proud? This is your chance to show off your creativity and initiative.\nNo constraints — just make sure to document your reasoning in `DECISIONS.md`.\n\n### 3️⃣ Deliverables\n\n\u003e **Important**: Do NOT fork this repository. Clone it, work locally, and submit as described below.\n\nA zip file or link to your own private repository containing:\n\n- [ ] Working code that is error-free, type-safe, and well-structured\n- [ ] Commits in small, readable steps — avoid a single \"monster\" commit\n- [ ] A log of all AI prompts and outputs you used (if any) in `AI_LOG.md`\n- [ ] A brief summary of your design decisions and implementation notes in `DECISIONS.md`\n\n---\n\n© parcelLab — May your commits be atomic and your parcels always delivered.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparcellab%2Fchallenge-frontend-engineer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fparcellab%2Fchallenge-frontend-engineer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fparcellab%2Fchallenge-frontend-engineer/lists"}