Prerequisites
Before you begin, ensure you have the following installed:- Node.js 18.0 or higher
- Bun package manager (preferred)
- Git for version control
- A code editor (VS Code recommended)
This project uses Bun as the primary package manager. All commands in this documentation use
bun, but you can also use npm or yarn if preferred.Installation
Set up environment variables
Create a
.env.local file in the root directory for local environment variables:Never commit sensitive data to git. The
.env.local file is already in .gitignore.Available Scripts
The following scripts are available inpackage.json:
Script Details
| Script | Command | Description |
|---|---|---|
dev | next dev --turbopack | Starts development server with Turbopack |
build | next build | Creates production build |
start | next start | Starts production server |
lint | eslint | Runs ESLint code analysis |
format | prettier --write "**/*.{ts,tsx}" | Formats TypeScript files |
typecheck | tsc --noEmit | Checks TypeScript types without emitting files |
Development Workflow
Before Making Changes
-
Pull latest changes from main branch:
-
Create a feature branch:
During Development
- Make incremental changes and test frequently
-
Run type checks to catch errors early:
-
Run linting to ensure code quality:
-
Format your code before committing:
Quality Checks
Before committing your code, run all quality checks:Editor Setup
VS Code (Recommended)
Install the following extensions for the best development experience:- ESLint - For code linting
- Prettier - For code formatting
- Tailwind CSS IntelliSense - For Tailwind class suggestions
- TypeScript and JavaScript Language Features - Built-in
VS Code Settings
Add these settings to.vscode/settings.json:
Troubleshooting
Port Already in Use
If port 3000 is already in use, you can specify a different port:Module Not Found
If you encounter module not found errors, try:Type Errors
If TypeScript shows unexpected errors, restart the TypeScript server in VS Code:- Open Command Palette (Cmd/Ctrl + Shift + P)
- Type “TypeScript: Restart TS Server”
- Press Enter
Next Steps
System Architecture
Learn about the application structure and architecture
Components
Explore the UI component library
