Templates overview

The templates are built with Next.js, TailwindCSS, TypeScript, Shadcn/UI and Tanstack Query. We recommend reading the documentation for each of these to improve your understanding of the project and best practices.

Project Structure

The project structure follows the NextJS App Router conventions. Here's an overview of the main directories and files:

wallet-template/
|
+-- public/
|
+-- src/
|   |
|   +-- app/
|   |   +-- (dashboard)/
|   |   |   +-- layout.txx
|   |   |   +-- page.tsx
|   |   |   +-- ...
|   |   +-- auth/
|   |   +-- global.css
|   |   +-- layout.tsx
|   |   +-- providers.tsx
|   |
|   +-- components/
|   |   +-- layout/
|   |   +-- ui/
|   +-- contexts/
|   +-- hooks/
|   +-- services/
|   +-- types/
|   +-- lib/
|
+-- styles/
|
+-- ...

• app/: Contains the App Router pages (see NextJS Docs)
• public/: Stores static assets such as images and fonts.
• .env.local: Local environment variable file for storing sensitive configuration.
• hooks/: Contains custom React hooks, including useQuery wrappers and other utility hooks.
• services/: Contains functions for making API calls and interacting with external services.
• types/: Contains TypeScript type definitions and interfaces used throughout the project.
• lib/: Contains utility functions and helper modules used across the application.

UI Components

For building the user interface, we primarily use reusable components from shadcn/ui which are installed (using the Shadcn CLI) or copied into /components/ui.

If a specific component is not available from shadcn/ui, you can create a custom component (for example, using a headless component library like Radix UI or React Aria) or use a package. Sometimes searching github with search terms like "shadcn datepicker" can be helpful in finding community contributions in the same shadcn/ui style.

Layout Components

For larger, custom layout components (e.g. accounts-card, transactions-list etc.), we create them in the components/layout folder. These components are built using TailwindCSS classes for styling.