Atlassian Online Assessment – Medium Full-Stack Task
Build a complete “change avatar” flow that lets a logged-in user upload a new profile picture and immediately see it updated across the page. You must implement both the browser-side code and a small Node/Express backend, and you are required to use the AWS S3 SDK for the final object storage. The flow must satisfy the following:
Frontend
Render a file picker that accepts only images (png, jpg, jpeg, gif, webp) and rejects anything larger than 5 MiB before it ever leaves the browser.
Show a live preview of the selected image inside a 200 × 200 circle.
Display a circular progress bar that tracks real upload progress (0-100 %).
On success, swap the old avatar for the new one everywhere on the page without a full reload; on any error (invalid type, oversize, network failure, 5xx) show a concise inline message and keep the old avatar.
Network
POST the file as multipart/form-data to /api/users/me/avatar with the user’s JWT in the Authorization header.
Do NOT set Content-Type manually; let the browser generate the boundary.
Support abort: if the user clicks “Cancel” while uploading, the request must be aborted and the UI reset within 200 ms.
Backend (Node 18 + Express)
Authenticate the JWT and extract userId.
Validate the file: inspect magic bytes, reject non-images, and enforce the 5 MiB limit.
Resize the image so the largest dimension is at most 400 px and convert to WebP with 80 % quality before uploading to S3.
Generate a unique key: avatars/{userId}/{uuid}.webp and upload with public-read ACL and a 1-year cache-control header.
Store the new S3 URL in your Postgres users.avatar_url field and return JSON { avatarUrl: "https://..." }.
If anything fails after S3 upload starts, delete the partial object and return 500.
End-to-end latency budget
95th percentile upload + processing time ≤ 2 s on a 1 MiB image over a 10 Mbps link.
You are provided a starter repo with a React front-end (Vite) and an Express server. Implement all missing code; do not change the existing file structure. Your solution will be scored on correctness, adherence to constraints, code clarity, and performance.