twshiyuliou1997/cmarketprice

Historical commodity prices visualized using Chart.js; submitted as part of Cloudflare's Developer challenge; Cloudflare Workers code is here: https://github.com/jahabeebs/alphavantageworker

cmarketprice

Historical commodity prices visualized using Chart.js; submitted as part of Cloudflare's Developer challenge; Cloudflare Workers code is here: https://github.com/jahabeebs/alphavantageworker

Getting Started

Client-side code build process:

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn dev

# build for production and launch server
$ yarn build
$ yarn start

# generate static project
$ yarn generate

To implement the back-end of the project you must register for a free CommoPrices API account to be able to access their free data endpoint. Then, create a Workers KV namespace called PRICES_DB. Set up a Cron job trigger on Cloudflare to ensure new data is pulled into the KV namespace regularly (I recommend a daily trigger). Bind the Cloudflare Worker to the Workers KV using these instructions.

Build Snapshot

Visit https://cmarketprice.com for the production website

Built With

Client-side code (HTML, Tailwind CSS, JS):

Nuxt.js - Front-end framework

Tailwind CSS - CSS framework

Vue-chartjs - Vue/Nuxt adaptation of Chart.js

nuxtjs/robots - Middleware to generate a robots.txt for the website

Cloudflare Pages - Configured to automatically deploy this repo to production when a successful build is run and avoids CORS issues when working with Cloudflare Workers

Server-side code (Typescript):

Cloudflare Workers - Coordinates Cron job and allows front-end to fetch commodity prices from a KV namespace

Workers KV - An eventually consistent DB that stores the commodity prices data

Commoprices API - API used to get free commodity data provided by the World Bank

General Tools:

Jetbrains Webstorm - IDE

Yarn - Package Manager