CSV price matcher

Live URL: https://price-matcher.app.pedromealha.dev

Tech stack: HTML, CSS, vanilla JS, Bootstrap, Google Fonts, Google Icons, NPM, Webpack, Netlify, ESLINT

A small website to match prices between two CSV files.

The way this works is, you first upload the two -- old and new -- CSV files, then the app will parse it and display a table with all products found in the new CSV file with the old and new price found on the respective CSV file.

For now this only works with one specific file scheme. See Examples.

Deployment

We are using netlify for hosting, we use github actions to make deployments. On github actions we use netlify CLI to trigger builds and deploy it to staging/production. Deployments to staging and production are different, so what we do is we build and deploy to staging, if everything is OK, when making a new release of the repo we re-deploy the staging build to production. The way to do it is by grabing the last deployment ID and just publish it to production on netlify.

For deployment configuration we keep it simple as the app does not require a lot of fancy things. We configure the build command and thats it

npm run build

Define the public directory to which we serve the static files and it's ready to go.

Build

So why build a static site? First we don't need to serve all files to the browser and for the performance side we want our files to minimazed and obfuscated. We are already using a NGINX server to serve our files so we now can just push the build files to /public and we are good to go.

Initially we were using Gulp and it did work but the gulpfile.js started to be a big mess. Didn't do exactly what we were looking for that.

So we switch to Webpack and it was the best thing we did. It's straigh foward and really easy to configure. We can use the build for production or development and just workds flawless. Currently we are create the bundle with all the sourcemaps and minimafying and uglify all files -- html, css and js.

Development

To get started clone the repo

git clone https://github.com/pedro-mealha/csv-price-matcher.git

cd csv-price-matcher

Install dependencies

npm install

Build Files

npm run build:dev

Start server

npm run serve

You can have automatic builds whenever a file is changed. This will make webpack watching file changes and trigger new builds.

npm run watch

To test the app use the files in the /examples dir.

License

GPLv3 Licensed (file LICENSE).