jharilela/excel-to-json-converter

1. Overall shape

- This is a single-page, client-only React application built with Vite.

- There is no backend service in the repo; all file parsing, conversion, previewing, and downloading happen in the browser.

2. Bootstrap and app shell

- index.html is the Vite entry page.

- src/main.jsx mounts the React app.

- src/App.jsx is likely the main orchestration layer, with src/App.css and src/index.css handling the UI styling.

3. Core user workflow

- The user uploads or drag-drops one or more files.

- The app reads files via browser file APIs, converts them to JSON, shows a preview, and lets the user download the result.

- The README’s “single JSON vs multiple JSON files” and header options suggest the app supports conversion settings that affect how parsed data is shaped and exported.

4. Conversion pipeline boundary

- The key architectural boundary is between:

- UI/state management in React

- file parsing / transformation logic in the browser

- Excel parsing is handled with SheetJS (xlsx); CSV parsing with PapaParse.

- Download generation is client-side, likely using FileSaver.js or an equivalent browser download mechanism.

5. Data flow through the app

- Input files come from the local filesystem into the browser.

- File contents are parsed into in-memory row/object structures.

- Those structures are normalized into JSON output.

- The app then produces a downloadable JSON blob/file and a preview for the user.

- Because processing is local, there is no persistence layer or server-side storage.

6. Analytics as an optional side channel

- src/hooks/useAnalytics.js is a separate concern from conversion.

- The README indicates optional Google Analytics 4 tracking via VITE_GOOGLE_ANALYTICS_ID from .env.

- This hook likely reports UI events such as page views, uploads, conversions, downloads, settings changes, and errors.

- Architecturally, analytics is an external telemetry boundary, not part of the conversion path.

7. Static/public assets and SEO

- The public/ folder contains manifest.webmanifest, robots.txt, and sitemap.xml.

- This indicates the app is deployed as a static site with SEO-oriented metadata and crawl configuration.

- The manifest suggests installable/PWA-adjacent browser metadata, but the primary product is still a browser tool, not an app with offline sync or server state.

8. Development and build tooling

- Vite is the build/dev server layer.

- ESLint provides code quality checks.

- package-lock.json and package.json indicate a standard npm-managed frontend build.

- Production output is a static bundle in dist/, suitable for deployment to static hosting like Vercel.

9. Testing and sample data

- test_samples/ contains sample CSV/JSON/XLSX files and Node scripts such as create_sample_excel.cjs and test-convert.cjs.

- This looks like a lightweight validation fixture set for conversion behavior rather than a formal test framework.

- It provides known inputs/outputs for verifying parser correctness across formats.

10. Operational and privacy model

- The app is explicitly designed for privacy-first, local processing.

- That means the architectural trust boundary is the user’s browser: uploaded files never need to leave the client.

- The only external dependency implied by the architecture is optional analytics; otherwise the app is self-contained.

11. What to show in an architecture diagram

- A good diagram would show:

- Browser UI (React app) at the center

- File input/drag-drop on the left

- Parsing/transformation layer using SheetJS/PapaParse in the middle

- Preview + download output on the right

- Optional Google Analytics as a side integration

- Static hosting/public metadata as the delivery layer

- There should be no server database or API box, because the app does not use one.

12. Repo structure summary

- src/ contains the runtime application.

- public/ contains static deployment assets.

- test_samples/ supports local verification.

- The rest of the repository is mostly packaging, linting, and licensing metadata around a browser-native conversion tool.