ali-ahnaf / ali-ahnaf/pocket_pixel
Import/Export Data Backup - Settings UI
- Dominant language
- TypeScript
- Stars
- 14
- Forks
- 91
- PR merge metrics
- No merged PRs in 30d
Description
## 🗺️ Context / Background
Users should be able to back up their data (transactions, vaults, debts, recurring transactions) and restore it later — for example, when switching devices or preventing data loss. This feature will live inside the Settings page that is being built as a prerequisite.
---
## 🎯 Problem / Goal
Add **Export** and **Import** buttons to the Settings page so users can download their data as a JSON file and restore it by uploading a backup.
---
## 🔧 Suggested Approach
Work inside the Settings page at `packages/ui/src/app/settings/page.tsx` (created in the settings prerequisite issue).
### Export
- Add an "Export Data" button in a clearly labeled "Backup & Restore" section
- On click, call `GET /api/users/:userId/export` (see companion backend issue)
- Trigger a browser download of the returned JSON using a dynamically created `` element with `href: URL.createObjectURL(...)` and `download: "pocket_pixel_backup.json"`
```ts
// Example download trigger
const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'pocket_pixel_backup.json';
a.click();
URL.revokeObjectURL(url);
```
### Import
- Add an "Import Data" button that opens a hidden ``
- When a file is selected, read it with `FileReader`, parse the JSON, and POST it to `POST /api/users/:userId/import`
- Show a loading indicator during upload
- Show a success message on completion, or an error message if the file is invalid or the request fails
### API client
- Add the export and import calls to the appropriate API client file in `packages/ui/src/lib/api/` (follow the pattern of existing API calls)
- Use the shared DTOs from `@expense-tracker/shared` for the request/response types
---
## ✅ Acceptance Criteria
- [ ] A "Backup & Restore" section appears on the Settings page
- [ ] "Export Data" triggers a download of a `.json` file containing all user data
- [ ] "Import Data" opens a file picker and uploads the selected `.json` backup
- [ ] Success and error states are clearly shown to the user
- [ ] A loading/progress indicator is shown during import
- [ ] Styling matches the pixel-art design system
---
## 🔗 Dependencies
**Must be completed first:**
- Settings Page frontend issue ("Settings Page - Navigation & Income/Expense Visibility Toggles")
- Import/Export backend issue ("Import/Export Data Backup - Backend API")
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with packages/ui/src/app/settings/page.tsx and inspect existing calls in packages/ui/src/lib/api/ to follow the project’s API-client pattern. Confirm the shared DTOs and the companion backend endpoints before implementing the export and import flows. Done means the Settings page has the Backup & Restore section, download and file-picker flows, loading and result states, and matching styling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- api, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100