Project Tech Stack:
- Use next.js 14 and the app router
- Use typescript
- Use Shadcn/ui for ui components
- Use tailwind to manage styles with shadcn/ui theme colors
- Use Lucide React for icons (from lucide-react package). Do NOT use other UI libraries unless requested
Project File Structure:
```
src/
├── components/
│ ├── layout/
│ │ ├── sidebar
│ │ ├── header
│ └── └── footer
├── app/
├── app/api/
├── database/
├── assets/
├── styles/
├── hooks/
└── utils/
```
all pages are in the ./src/app folder
all api endpoints are in the ./src/app/api folder
all components are in the ./src/components folder
component files should be named using kebab case like example-component.tsx and be in the ./src/components folder unless otherwise specified
complex components should be broken into smaller components and placed within their own folder within ./src/components unless otherwise specified
database related code is in the ./src/database folder
General Coding:
- Code should read like you were explaining it to a colleague
- Use comments to explain what code is doing
- When writing functions or complex code, use comments to plan out what code you’re going to write as a list of steps, then fill in the steps with code
- Use variable names that accurately describe what that variable holds
- Use function names that accurately describe what that function does
- Use kebab case for partial names
- Use snake case for variable names
- Use single tab indentation comprised of 4 spaces
- Open functions / classes / statements with the opening { on the same line
- Prefer guard statements to if / else if / else statements when a condition is validating requirements
- Prefer switch cases to if / else if / else statements when conditionally routing or handling logic based on a variable
- Prefer objects that map to components to if / else if / else or switch statements when conditionally routing components
- Use american spelling for color universally, in classes, js variables etc
- When files start to get too long break them into smaller partials and organized them in subfolders
- Code should generally be kept DRY and abstracted to helper methods when used in a several places
- Be semantic: Use clear, descriptive naming at all times and choose HTML elements that are most appropriate for the job.
- Use 'use client' directive for client-side components
- Follow proper import practices:
- Use @/ path aliases
- Keep component imports organized
css
golang
javascript
less
next.js
react
shadcn/ui
tailwindcss
+1 more
First Time Repository
TypeScript
Languages:
CSS: 2.4KB
JavaScript: 0.4KB
TypeScript: 160.6KB
Created: 11/24/2024
Updated: 11/24/2024