This application takes a user through the account verification process using the Basiq API. This project has been to built with three main technologies:
- Basiq API Basiq is a Consumer Data Right accredited API platform that provides the building blocks of financial services.
- Next.js A framework for React, Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.
- Tailwind A utility-first CSS framework that can be composed to build any design, directly in your markup.
To get started, you will need click the "Use this template" button on the main page of the repo - this will generate a new repository.
Then you will need to clone the repository you have just generated.
git clone [email protected]:<your_username>/account-verification.git
cd account-verification
If you haven't already, Sign-up to the Basiq API service and grab your API key for your application (via the Developer Dashboard).
Once you have a Basiq API key, move the sample .env.sample
file to .env.local
and paste in your Basiq API key next to BASIQ_API_KEY=
mv .env.sample .env.local
- BASIQ_API_KEY=
+ BASIQ_API_KEY=abc123
Install dependencies with yarn
. If you don't have this installed, please read their installation guide for detailed instructions.
yarn
yarn dev
🎉 You should now see the website running at http://localhost:3000
This project uses eslint
to enforce code quality and code formatting. For more information about using NextJS and ESLint, please refer to this guide.
Cypress is a test runner used for End-to-End (E2E) and Integration Testing. This project includes a simple E2E test which is used to test the account verification form flow.
To run the E2E tests locally, you will first need have the website up and running. This can be done by either running yarn dev
or yarn build && yarn start
. The latter can be used when you want to run the tests againts the production build of the website. Once you have the website running in another terminal window run yarn cypress
.
This started kit uses TailwindCSS for all styling. Easily customise the theme in tailwind.config.js
(colours, font etc) and styles.css
(font import, CSS variables used for icon gradients etc).
Follow these steps to make your Account Verification experience your own.
This starter kit has a custom naming convention, aiming to communicate semantic intent. All the colours the app uses are defined and can be customised in tailwind.config.js
.
This starter kit uses Inter font family.
- Change the font @import in
styles.css
- Change the fontFamily in
tailwind.config.js
('Inter'
) to match the font name
You can simply replace these SVG files, using the same file name.
product-full-logo.svg
- used inindex.js
onlyproduct-square-logo.svg
- used for Account Verification Form
NOTE: Out-of-the-box, the Account Verification Form layout works best with a perfectly square logo, since it uses the square institution logo on some steps.
Search for PRODUCT-COPY
in the codebase to find all the places that needs product-specific copywriting.
Make sure to read through all copywriting in the files to make sure it's accurate with the product you are building.
All icons used in this starter kit are exported from heroicons.com.
You can easily see which icon is which if you search the codebase for Icon:
.