Build a full-stack TypeScript application using NestJS, Angular, and Drizzle ORM with SQLite. The application is a commercial real estate property search platform that demonstrates proficiency across the entire stack.
- Feature Completion — Did you deliver working functionality for each task? We're looking at whether the features meet the requirements, handle edge cases, and work end-to-end across the stack.
- Code Quality & Best Practices — Is the code clean, well-structured, and maintainable? We evaluate adherence to Angular/NestJS conventions, proper typing, separation of concerns, component design, error handling, and consistent patterns throughout the codebase.
- AI Usage — We encourage you to use AI tools. We want to see how you use them — the prompts you write, the skills you leverage, and how you orchestrate AI assistance to be productive. Treat AI as a tool in your workflow and show us your ability to direct it effectively.
- Thought Process — How do you break down problems and direct AI to solve them? We're looking at how you decompose tasks, sequence your prompts, and course-correct when output isn't right.
| Layer | Technology |
|---|---|
| Frontend | Angular, Angular Material, Tailwind |
| Backend | NestJS |
| ORM | Drizzle ORM |
| Database | SQLite (via better-sqlite3) |
| Monorepo | Nx |
| State Mgmt | NgRx (optional) |
Tip
State Management - We have included all of the @ngrx packages but you're welcome to use any state management library you see fit or just stateful services.
Component Library - We have included @angular/material but you're welcome to use any component library that suites your needs. Ex: PrimeNG
Styling - We have included tailwindcss but you can style using scss, or css directly if you prefer.
Run pnpm start to install dependencies, push the database schema, and serve the full stack in one step.
- API is available at
http://localhost:3000/api - Web app is available at
http://localhost:4200
Or run each step manually:
- Install packages with
pnpm install - Push the database schema with
pnpm exec drizzle-kit push --config=apps/api/drizzle.config.ts - Serve the full stack with
pnpm nx serve web(automatically starts the API)
Build a property search page that displays commercial real estate listings in a card-based layout. Each card should show basic property information such as name, address, price, property type, and a thumbnail image. Clicking a card should navigate to the property detail page.
Create a property detail page at /properties/:id that displays comprehensive information about a single property including full description, location details, financials, property specs, and image gallery.
Enhance the property search page with:
- Sorting by price, name, date listed, etc.
- Filtering by property type, price range, location, etc.
- Pagination to handle large result sets efficiently (server-side)
Add an AI-powered chat bot widget to the property detail page that allows users to ask questions and get more information about the property they are viewing.
| Command | Description |
|---|---|
pnpm nx serve web |
Serve the full stack (web + api) |
pnpm nx serve api |
Serve just the API |
pnpm nx build web |
Build the web app |
pnpm nx build api |
Build the API |
pnpm nx test web |
Run web unit tests |
pnpm nx lint web |
Lint the web app |
pnpm nx affected -t lint test build |
Run affected lint, test, and build |
pnpm exec drizzle-kit generate --config=apps/api/drizzle.config.ts |
Generate a migration |
pnpm exec drizzle-kit push --config=apps/api/drizzle.config.ts |
Push schema to DB |
pnpm exec drizzle-kit studio --config=apps/api/drizzle.config.ts |
Open Drizzle Studio |
Tip
NX Generators - you're more than welcome to modify the NX Generators section inside of the nx.json file with any changes you prefer for your setup.
- @nx/angular:component -
pnpm nx g @nx/angular:component - @nx/angular:service -
pnpm nx g @nx/angular:service - @nx/angular:pipe -
pnpm nx g @nx/angular:pipe - @nx/angular:directive -
pnpm nx g @nx/angular:directive - @nx/angular:library -
pnpm nx g @nx/angular:library