- Download the
clerkdependency. - Add the
environmentvariables to the .env files. - Setup the middleware file and provide
clerkMiddleware. - Wrap the whole app with the
ClerkProvider. - Make sure to add the
sign-inandsign-uproutes.
- Hono.js is a famous web
frameworkwhich wraps the file based api's toexpresslike structure. - Add the api routes which are being catched by the
route catcher. - Add the clerk dependency from the docs to
protectthe api routes.
- Create a new database on neon and update the .env file with
connectionurl. - Download the dependencies
drizzle-orm,@neondatabase/serverlessvia using the official docs. - Download the dev dependencies like
dotenv,drizzle-kit,pg. - Create the
dbconfig andschema. - Add the
migrationscript to push the schema to cloud.
- The RPC is used to co-ordinate the
schemabetween neon & client. - We need to
chainall the routes and export them. - We are able to achieve end to end
type safety. - Download
drizzle-zodfor exporting the accounts schema. - Then use it in the
zod-validator, for json verification.
- To get the
datafrom the api routes to frontend. - Wrap the whole application using the
Provider. - Creating different hooks for
accounts,transactions. - Using the
RPC clientprovider to get the data.
- Create a state management using
zustand. - Create a new sheet and it's
provider.
- For data table we use the shadcn tables component and
@tanstack/react-table. - The tables provides
filteringandsearchingoptions. - For
bulk deletewe have use the selection option.
- Drizzle provides a great way to define relations between
entities. - The transactions route include a greate stuff about db
queries. - The queries are designed to protect the accounts/transactions of other users.
- For date we have use the
calendarandtooltipfrom shadcn. - For account and category, a new component is created i.e
Select. - This component allows to create new category/accounts directly.
- For developing this component we have used
react-select. - The currency input is provided by using
react-currency-input-field
- We created an enum to show different data depending on type.
- The upload button contains CSVReader to read and set the data using
react-papaparse. - The data is then passed to
ImportCard, which displays theImportTable. - The
ImportTablecontains headers, body and selectedColumns. - The components displays all the headers using
TableHeadSelect. - The selectedColumns contains the indexes as key used to
extract data.
- The library used to show the charts is
recharts. - There are three types of graph
variantswhich accepts data and showstooltip. DataChartsfetches summary and then provides it toCharts.
- For generating random account id, we used
@paralleldrive/cuid2. - For converting dates to desired format, we used
date-fns. - For showing couting we have used
react-countup. - To create hashed params, we have use
query-string