This is a simple project that shows the usage of Next.js, integrated with Up's banking API.
We currently have no visibility over our Sharehouse financials π, so we decided to make a website using Up's API to visualise our transactions, balance etc. π€
- We're using
yarn
on this project, make sure you have it installed - Run
yarn
to download all the dependencies - Copy the contents of
.env.template
into a new file named.env.local
at the root of the project. This contains our API Key, and must be kept secret. Replace the templated values with the secrets by asking @jordiup. - Run
yarn dev
to spin up the Next.JS react server - Go to http://localhost:3000 π€
When running next dev
, Next.js will start looking for any .ts
or .tsx
files in our project and builds it. It even automatically creates a tsconfig.json
file for our project with the recommended settings.
Next.js has built-in TypeScript declarations, so we'll get autocompletion for Next.js' modules straight away.
A type-check
script is also added to package.json
, which runs TypeScript's tsc
CLI in noEmit
mode to run type-checking separately. You can then include this, for example, in your test
scripts.
- Chakra UI - We're using Chakra for our React/FE UI framework. Check out the docs for more info.
βββ components # Add all react components here
β βββ Accounts.tsx
β βββ Layout.tsx
β βββ List.tsx
β βββ ListDetail.tsx
β βββ ListItem.tsx
βββ interfaces
β βββ index.ts
βββ next-env.d.ts
βββ next.config.js
βββ .env.template # Copy env template here
βββ .env.local # Create and add the secretes here
βββ package.json
βββ pages
β βββ _app.tsx # Root page that provides things like layout to all other pages
β βββ api # API directory
β β βββ accounts.ts # Accounts api end point https://localhost:300/api/accounts
β β βββ transactions.ts # Transactions api end point
β βββ index.tsx
βββ tsconfig.json
βββ utils # Random utils
β βββ api.ts # An exported Object for OpenAPIClientAxios
β βββ apiHooks.ts # All api definitions that are called from the FE and linked into the BE
β βββ openapi.json # Taken from up's official docs: https://raw.githubusercontent.com/up-banking/api/master/v1/openapi.json
β β # (do not modify)
β βββ _up-api-types.ts # (deprecated) an autogen'd file
β βββ up-client.d.ts # an autogen'd file used by the BE to speak to Up's API
If you're someone that want's to have a play around with deploying your own version of the app, you can do so with the Vercel Details below.
Deploy the example using Vercel: