ali-ahnaf / ali-ahnaf/pocket_pixel
Import/Export Data Backup - Settings UI
- Lenguaje dominante
- TypeScript
- Estrellas
- 14
- Forks
- 91
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Descripción
## 🗺️ 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")
Guía de contribución
No hay ninguna guía de contribución indexada para este repositorio
Línea de trabajo
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.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- nextjs, react, typescript
- Área
- api, frontend
- Tipo de issue
- Nueva funcionalidad
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Tranquilo
- Claridad
- Bastante claro
- Aptitud para principiantes
- 55/100