Customer Statement Processor is a Next.js application built using the new Next.js app/ router. This project served as an experiment for me to compare it to the traditional pages/ router. I also took the opportunity to try out Vitest for unit tests and Playwright for end-to-end tests.
It utilizes both client and server components, and it has the currently still experimental server actions enabled.
The project contains some sample files in src/tests/fixtures with records in CSV and XML formats. These files can be uploaded in the front-end and are then parsed and validated on the server. If any errors are identified, then the records with errors are displayed in a HTML report in the front-end.
All code regarding record processing (parsing and validation) can be found in src/record-parsing.
The xml2js library helps with turning XML into JavaScript objects. The csv-parser library helps with turning CSV data into JavaScript objects.
zod is being used to do runtime validation of various shapes of data, such as the data being sent from the client to the server, and the contents of the processed XML and CSV files.
Because JavaScript is not typically the right tool to handle accurate money calculations, the library big.js is used to do precision decimal number comparisons.
The project was built using Node.js version 19.9.0. If you have trouble with any of these steps, please try again with that version of Node.js.
First, install the dependencies:
npm installThem, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
The project has tests in the src/tests directory.
To run the tests, run:
npm testTo run the tests in headless mode, run:
npm run e2eAnd to open the browser for the end-to-end tests, run:
npm run e2e:ui
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent