Wealth Demo

Live demo hosted on Vercel and the database on Railway.app

Notes & Features

Uses Prisma to save data to a PostgreSQL db.
Using the Types from Prisma throughout app.
Using Tailwind. No raw CSS.
Uses Cypress for testing.
Because I used Tailwind I used the Web Animation API for animations.
I've used custom hooks to shift logic into separate files.
The page is statically generated as it wouldn't make sense to fetch any of this data from the client.
Uses GitHib actions to run Cypress tests & ESLint.

There isn't a free version of the body font Avenir, so I've found the closest substitute Montserrat. You can see they're almost identical in this blog post.
The icons in the tab section are raster images so may look blurry if you have a higher resolution monitor.
I've added web animations. Some clients like the front end developer to add page interactions and "interpret" the design and others not. Either way is fine with me.
Wealthfront logo was an image so I pulled a vector from their website. Normally in cases like this I would check with the designer. Worst case I would just use the .png.

Name		Name	Last commit message	Last commit date
Latest commit History 62 Commits
.github/workflows		.github/workflows
.vscode		.vscode
cypress		cypress
prisma		prisma
public		public
src		src
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierrc		.prettierrc
README.md		README.md
cypress.config.ts		cypress.config.ts
next.config.js		next.config.js
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock