Trax

Royalty-free music web application

Stack used

• Next.js
• Chakra UI
• TypeScript

Developing

A Node.js LTS setup with yarn is recommended.

# install dependencies
yarn install

# serve with hot reload at localhost:3000
yarn dev

# build for production
yarn build

# run unit tests
yarn test

Architecture

Data fetching

I used SWR for the data-fetching logic, allowing for data fetches to be wrapped in a custom hook.

State management

React Context

Directory structure

• /components - UI/layout components that are used globally throughout project.
• /lib - Shared utility/helper method.
• /public - Next.js public directory, used for storing static assets.
• /types - TypeScript types + interfaces that are used globally throughout the project.
• /prisma - Prisma migrations and seeder script