Interview Preparation - ClientPulse / Software Developer Role

This note is for preparing interview answers for the JobStreet Software Developer role.

1. Role Summary

The job is mainly looking for a web/software developer who can:

• Build and maintain web applications
• Convert UI/UX wireframes into responsive interfaces
• Create and manage API integrations
• Work with databases such as MySQL or Microsoft SQL
• Understand hosting/deployment basics
• Write technical documentation
• Work with designers and other team members

The stack mentioned by the job includes:

• HTML, CSS, JavaScript
• C# or PHP
• .NET / ASP.NET Core MVC / Blazor or Laravel
• MySQL / Microsoft SQL
• Bootstrap or Tailwind CSS
• Figma
• API development
• Web hosting / deployment

Job Key Knowledge Checklist

Source: JobStreet Software Developer listing

Use this section to revise the knowledge that directly matches the job description.

English Version

Frontend And UI Implementation

You should be ready to explain how to convert UI/UX wireframes and prototypes into real web pages.

Key knowledge:

• HTML semantic structure
• CSS box model, spacing, layout, and responsive design
• JavaScript DOM behavior and form handling
• Bootstrap or Tailwind CSS utility classes
• Design consistency across buttons, forms, tables, and navigation
• Accessibility basics such as labels, contrast, keyboard navigation, and readable layout
• Figma handoff: spacing, typography, colors, components, and responsive breakpoints

Interview angle:

Explain that you can read a design, split it into reusable components, build the layout responsively, and keep styling consistent across the application.

API Development And Integration

You should understand how frontend pages communicate with backend services.

Key knowledge:

• REST API design
• HTTP methods: GET, POST, PATCH, PUT, DELETE
• JSON request and response bodies
• Status codes: 200, 201, 400, 401, 404, 500
• Input validation
• Error handling
• Third-party or partner API integration
• API testing with browser, Postman, or similar tools

Interview angle:

Use ClientPulse API routes as examples: fetching tickets, creating tickets, updating ticket status, and adding comments.

Backend Frameworks

The job mentions C#/.NET and PHP/Laravel. You do not need to pretend to be expert, but you should understand the basic architecture.

Key knowledge:

• C# is a strongly typed object-oriented language.
• ASP.NET Core is used to build web applications and APIs.
• MVC means Model, View, Controller.
• Blazor is used to build interactive web UI with C#.
• PHP is a server-side scripting language.
• Laravel is a PHP MVC framework.
• Controllers handle requests.
• Models represent data.
• ORMs such as Entity Framework and Eloquent help query databases.

Interview angle:

Compare your Next.js route handlers to ASP.NET or Laravel controllers: all receive HTTP requests, process data, and return responses.

Database And SQL

The job specifically mentions MySQL and Microsoft SQL, so SQL knowledge matters.

Key knowledge:

• Tables, rows, columns
• Primary keys and foreign keys
• One-to-many relationships
• SELECT, INSERT, UPDATE, DELETE
• WHERE, JOIN, ORDER BY, COUNT, GROUP BY
• Index basics
• Database migration
• Seed data
• Relational schema design

Interview angle:

Explain ClientPulse relationships clearly: one client has many tickets, one ticket has many comments, and users create tickets/comments.

Hosting And Deployment

The role expects basic hosting and deployment understanding.

Key knowledge:

• Development vs production environment
• Build command and start command
• Environment variables
• Database connection string
• Server logs
• Domain and SSL
• Hosting platforms
• Deployment testing

Interview angle:

Explain that before deployment you need production environment variables, a production database, build command, start command, and post-deployment testing.

Nice-To-Have Skills

These are not the core requirement, but they help you stand out.

Key knowledge:

• Svelte and SvelteKit basics
• Flutter basics for mobile apps
• Software design and maintainability
• Technical documentation
• Team collaboration with designers and other developers

Interview angle:

Say you are currently stronger in React/Next.js, but you understand the concepts behind other frameworks and can learn them because the fundamentals are similar.

Sample Interview Questions - English

Frontend And UI Implementation Questions

Question: What is the difference between var, let, and const in JavaScript?

Answer:

var is function-scoped and can be redeclared, so it is easier to create bugs in modern JavaScript. let is block-scoped and is used when the value needs to change. const is also block-scoped and is used when the variable should not be reassigned. I usually prefer const by default, then use let only when reassignment is needed.

Question: What is responsive design?

Answer:

Responsive design means the layout adapts to different screen sizes. For example, a desktop layout may show a sidebar and full table, while a mobile layout may stack content vertically or allow horizontal scrolling for tables.

Question: What is the difference between Flexbox and CSS Grid?

Answer:

Flexbox is better for one-dimensional layout, such as arranging items in a row or column. CSS Grid is better for two-dimensional layout with rows and columns. I use Flexbox for navbars, button groups, and form rows, and Grid for dashboards or larger page layouts.

Question: How do you convert a Figma design into code?

Answer:

I first check the layout, spacing, typography, colors, reusable components, and responsive behavior. Then I break the design into components and build them with consistent styles. After that, I compare the final UI with the design and adjust spacing, alignment, and responsiveness.

Question: What is semantic HTML and why is it important?

Answer:

Semantic HTML uses elements based on meaning, such as main, nav, section, article, button, and form. It improves accessibility, SEO, and code readability because browsers and assistive technologies can understand the page structure better.

API Development And Integration Questions

Question: What is a REST API?

Answer:

A REST API is a way for frontend and backend to communicate using HTTP. Resources are usually represented by URLs, and actions are represented by HTTP methods such as GET, POST, PATCH, and DELETE.

Question: What is the difference between GET and POST?

Answer:

GET is used to read data and should not change server state. POST is used to create data or submit information to the server.

Question: What is the difference between PUT and PATCH?

Answer:

PUT usually replaces a full resource. PATCH updates part of a resource. For example, updating only a ticket status is a good use case for PATCH.

Question: How do you handle API errors?

Answer:

I validate input, return proper status codes, send useful error messages, and handle errors on the frontend. For unexpected server errors, I would log the error and return a safe generic message to the user.

Question: How did you test your API in ClientPulse?

Answer:

I tested the API by using the app in the browser and checking request flows such as creating tickets, updating status, and adding comments. I can also use Postman to test endpoints directly with different request bodies.

Backend Frameworks Questions

Question: What is MVC?

Answer:

MVC stands for Model, View, Controller. Model represents data and business logic, View displays the UI, and Controller handles requests and connects the model to the view.

Question: What is ASP.NET Core?

Answer:

ASP.NET Core is a cross-platform framework for building web applications and APIs using C#. It is commonly used for business and enterprise systems.

Question: What is Laravel?

Answer:

Laravel is a PHP web framework that follows the MVC pattern. It provides routing, controllers, validation, authentication tools, database migrations, and Eloquent ORM.

Question: How does a Next.js route handler compare to an ASP.NET or Laravel controller?

Answer:

They have a similar responsibility. A Next.js route handler receives an HTTP request and returns a response. ASP.NET and Laravel controllers also handle routes, process data, and return responses.

Question: What is an ORM?

Answer:

An ORM maps database tables to code objects. It lets developers query and update data using language code instead of writing raw SQL for every operation. Examples include Prisma, Entity Framework, and Eloquent.

Database And SQL Questions

Question: What is a primary key?

Answer:

A primary key uniquely identifies each row in a table. For example, each ticket has an id, so the system can find one exact ticket.

Question: What is a foreign key?

Answer:

A foreign key links one table to another table. For example, tickets.clientId links a ticket to a client record.

Question: What is a one-to-many relationship?

Answer:

A one-to-many relationship means one record can have many related records. In ClientPulse, one client can have many tickets, and one ticket can have many comments.

Question: What is the purpose of a SQL JOIN?

Answer:

JOIN combines rows from related tables. For example, I can join tickets and clients to show ticket title together with the client company name.

Question: Why did you use SQLite instead of MySQL?

Answer:

SQLite is easier for a local demo because it does not require a separate database server. But the schema is relational, so it can be migrated to MySQL by updating the Prisma datasource, connection string, migrations, and seed data.

Hosting And Deployment Questions

Question: What is the difference between development and production?

Answer:

Development is for building and testing locally. Production is the live environment used by real users, so it needs proper environment variables, database configuration, security, logging, and stable deployment.

Question: What is an environment variable?

Answer:

An environment variable stores configuration outside the source code, such as database URLs, API keys, and session secrets. Sensitive .env files should not be committed to Git.

Question: What is SSL?

Answer:

SSL/TLS encrypts traffic between the browser and server. It makes the site use HTTPS and protects data in transit.

Question: What would you check after deployment?

Answer:

I would check login, main user flows, API requests, database connection, environment variables, server logs, responsive layout, and whether the domain and SSL work correctly.

Question: What is a build command?

Answer:

A build command prepares the app for production. For example, npm run build compiles and optimizes a Docusaurus or Next.js project before deployment.

Nice-To-Have Skills Questions

Question: What is SvelteKit?

Answer:

SvelteKit is a full-stack web framework built around Svelte. It supports routing, server-side rendering, API endpoints, and application structure, similar to how Next.js supports React apps.

Question: What is Flutter?

Answer:

Flutter is a UI framework for building mobile, web, and desktop apps from one codebase. It uses Dart and a widget-based UI model.

Question: How do you learn a new framework quickly?

Answer:

I start with the core concepts, build a small feature, compare it with frameworks I already know, read documentation, and practice by converting a familiar workflow into the new framework.

Question: Why is documentation important?

Answer:

Documentation helps other developers understand setup steps, project structure, API endpoints, database schema, and deployment notes. It also makes handover and maintenance easier.

Question: How do you work with designers?

Answer:

I clarify layout behavior, responsive states, spacing, colors, components, and edge cases. If something is unclear, I ask questions before implementing so the final UI matches the design intention.

中文版本

前端与 UI 实作

你需要准备说明：如何把 UI/UX wireframe 或 prototype 变成真正可以使用的网页。

关键知识：

• HTML 语义结构
• CSS box model、间距、布局、响应式设计
• JavaScript DOM 行为和表单处理
• Bootstrap 或 Tailwind CSS 工具类
• Button、form、table、navigation 的设计一致性
• Accessibility 基础，例如 label、对比度、键盘操作、可读性
• Figma 交付：spacing、typography、color、component、responsive breakpoint

面试讲法：

可以说你会先分析设计稿，把 UI 拆成可复用组件，再做 responsive layout，并保持整个应用的样式一致。

API 开发与整合

你需要理解 frontend 如何和 backend/API 沟通。

关键知识：

• REST API 设计
• HTTP methods：GET、POST、PATCH、PUT、DELETE
• JSON request 和 response
• Status codes：200、201、400、401、404、500
• 输入验证
• 错误处理
• 第三方或 partner API integration
• 用 browser、Postman 或类似工具测试 API

面试讲法：

用 ClientPulse 的 API routes 举例：读取 ticket、创建 ticket、更新 ticket status、添加 comment。

后端框架

这个职位提到 C#/.NET 和 PHP/Laravel。你不需要装成专家，但要懂基本架构。

关键知识：

• C# 是 strongly typed object-oriented language。
• ASP.NET Core 用来开发 web application 和 API。
• MVC 是 Model、View、Controller。
• Blazor 可以用 C# 建 interactive web UI。
• PHP 是 server-side scripting language。
• Laravel 是 PHP 的 MVC framework。
• Controller 处理 HTTP request。
• Model 代表数据。
• Entity Framework 和 Eloquent 这类 ORM 可以帮助查询数据库。

面试讲法：

可以把 Next.js route handler 和 ASP.NET/Laravel controller 对比：它们都是接收 HTTP request、处理数据、返回 response。

数据库与 SQL

职位特别提到 MySQL 和 Microsoft SQL，所以 SQL 基础很重要。

关键知识：

• Table、row、column
• Primary key 和 foreign key
• One-to-many relationship
• SELECT、INSERT、UPDATE、DELETE
• WHERE、JOIN、ORDER BY、COUNT、GROUP BY
• Index 基础
• Database migration
• Seed data
• Relational schema design

面试讲法：

清楚说明 ClientPulse 的关系：一个 client 有很多 tickets，一个 ticket 有很多 comments，user 会创建 ticket/comment。

Hosting 与 Deployment

这个职位需要基本 hosting 和 deployment 概念。

关键知识：

• Development environment vs production environment
• Build command 和 start command
• Environment variables
• Database connection string
• Server logs
• Domain 和 SSL
• Hosting platform
• 部署后的测试

面试讲法：

可以说部署前需要准备 production environment variables、production database、build command、start command，并在部署后测试主要功能。

加分技能

这些不是最核心要求，但可以让你更突出。

关键知识：

• Svelte / SvelteKit 基础
• Flutter mobile app 基础
• Software design 和 maintainability
• Technical documentation
• 和 designer、developer 协作

面试讲法：

可以说你目前比较熟 React/Next.js，但你理解其他 framework 背后的共通概念，所以可以快速学习和迁移。

面试 Sample Questions - 中文

前端与 UI 实作题目

问题：JavaScript 里面 var、let、const 有什么区别？

回答：

var 是 function scope，而且可以重复声明，现代 JavaScript 比较少用，因为比较容易造成 bug。let 是 block scope，适合会重新赋值的变量。const 也是 block scope，适合不会重新赋值的变量。我通常默认用 const，只有需要改变值时才用 let。

问题：什么是 responsive design？

回答：

Responsive design 是指页面会根据不同屏幕大小调整布局。比如 desktop 可以显示 sidebar 和完整 table，mobile 可以把内容上下排列，或者让 table 横向滚动。

问题：Flexbox 和 CSS Grid 有什么区别？

回答：

Flexbox 比较适合一维布局，例如横排或直排。CSS Grid 比较适合二维布局，例如同时控制 rows 和 columns。我会用 Flexbox 做 navbar、button group、form row，用 Grid 做 dashboard card 或大范围页面布局。

问题：你会怎样把 Figma 设计稿变成代码？

回答：

我会先看 layout、spacing、typography、colors、reusable components 和 responsive behavior。然后把设计拆成组件，再用 CSS 或 Tailwind 实作。完成后会对照设计稿检查间距、对齐、颜色和响应式表现。

问题：什么是 semantic HTML？为什么重要？

回答：

Semantic HTML 是根据内容意义选择标签，例如 main、nav、section、article、button、form。它可以提升 accessibility、SEO 和代码可读性，因为浏览器和辅助工具更容易理解页面结构。

API 开发与整合题目

问题：什么是 REST API？

回答：

REST API 是 frontend 和 backend 用 HTTP 沟通的一种方式。资源通常用 URL 表示，动作通常用 HTTP method 表示，例如 GET、POST、PATCH、DELETE。

问题：GET 和 POST 有什么区别？

回答：

GET 通常用来读取数据，不应该改变 server 的数据。POST 通常用来创建数据或提交资料到 server。

问题：PUT 和 PATCH 有什么区别？

回答：

PUT 通常是替换完整资源。PATCH 通常是更新部分资源。例如只更新 ticket status，就适合用 PATCH。

问题：你会怎样处理 API error？

回答：

我会先验证输入，返回正确 status code，给 frontend 有用的 error message。对于意外 server error，我会记录 log，然后给用户安全、简洁的错误提示。

问题：你怎样测试 ClientPulse 的 API？

回答：

我会在 browser 里面测试完整流程，例如创建 ticket、更新 status、添加 comment。也可以用 Postman 直接测试 endpoint，并尝试不同 request body 看 validation 是否正确。

后端框架题目

问题：什么是 MVC？

回答：

MVC 是 Model、View、Controller。Model 代表数据和业务逻辑，View 负责显示 UI，Controller 负责处理 request，并把 model 数据交给 view 或 response。

问题：什么是 ASP.NET Core？

回答：

ASP.NET Core 是用 C# 开发 web application 和 API 的 framework。它是 cross-platform，也常用于 business 和 enterprise system。

问题：什么是 Laravel？

回答：

Laravel 是 PHP 的 web framework，采用 MVC 模式。它提供 routing、controller、validation、authentication tools、database migration 和 Eloquent ORM。

问题：Next.js route handler 和 ASP.NET/Laravel controller 有什么相似？

回答：

它们职责相似。Next.js route handler 会接收 HTTP request 并返回 response。ASP.NET 和 Laravel controller 也会处理 route、处理数据、返回 response。

问题：什么是 ORM？

回答：

ORM 会把 database table 映射成代码里的 object，让开发者用程序语言查询和修改数据库，不需要每次都写 raw SQL。例子有 Prisma、Entity Framework、Eloquent。

数据库与 SQL 题目

问题：什么是 primary key？

回答：

Primary key 是用来唯一识别 table 里每一 row 的字段。例如每个 ticket 都有一个 id，系统可以用它找到指定 ticket。

问题：什么是 foreign key？

回答：

Foreign key 是用来连接两个 table 的字段。例如 tickets.clientId 可以把 ticket 连接到对应的 client。

问题：什么是 one-to-many relationship？

回答：

One-to-many 是指一个记录可以对应多个记录。在 ClientPulse 里，一个 client 可以有很多 tickets，一个 ticket 可以有很多 comments。

问题：SQL JOIN 是做什么的？

回答：

JOIN 用来把相关 table 的资料合并查询。例如可以 join tickets 和 clients，一起显示 ticket title 和 client company name。

问题：为什么 ClientPulse 用 SQLite，不是 MySQL？

回答：

SQLite 适合 local demo，因为不需要另外安装 database server。但 ClientPulse 的 schema 是 relational design，而且使用 Prisma，所以之后可以通过修改 datasource、connection string、migration 和 seed data 迁移到 MySQL。

Hosting 与 Deployment 题目

问题：Development 和 production 有什么区别？

回答：

Development 是本地开发和测试环境。Production 是真实用户使用的线上环境，所以需要正确的 environment variables、database configuration、security、logging 和稳定部署。

问题：什么是 environment variable？

回答：

Environment variable 是放在代码外面的配置，例如 database URL、API key、session secret。包含敏感资料的 .env 文件不应该 commit 到 Git。

问题：什么是 SSL？

回答：

SSL/TLS 会加密 browser 和 server 之间的传输，让网站使用 HTTPS，保护传输中的数据。

问题：部署后你会检查什么？

回答：

我会检查 login、主要 user flow、API request、database connection、environment variables、server logs、responsive layout，以及 domain 和 SSL 是否正常。

问题：什么是 build command？

回答：

Build command 是把 app 准备成 production 版本的命令。例如 npm run build 会编译和优化 Docusaurus 或 Next.js 项目，方便部署。

加分技能题目

问题：什么是 SvelteKit？

回答：

SvelteKit 是基于 Svelte 的 full-stack web framework。它支持 routing、server-side rendering、API endpoints 和项目结构，概念上类似 Next.js 对 React 的作用。

问题：什么是 Flutter？

回答：

Flutter 是用来开发 mobile、web、desktop app 的 UI framework。它使用 Dart 语言，UI 是 widget-based。

问题：你怎样快速学习一个新的 framework？

回答：

我会先理解核心概念，做一个小功能，把它和我已经熟悉的 framework 对比，阅读官方文档，然后用熟悉的业务流程练习。

问题：为什么 documentation 重要？

回答：

Documentation 可以帮助其他开发者理解 setup steps、project structure、API endpoints、database schema 和 deployment notes，也让交接和维护更容易。

问题：你怎样和 designer 合作？

回答：

我会确认 layout behavior、responsive states、spacing、colors、components 和 edge cases。如果设计稿有不清楚的地方，我会先问清楚，避免做出来和设计意图不一致。

2. How To Position ClientPulse

Use this short explanation:

ClientPulse is a client support ticket dashboard that I built to demonstrate a complete small business system. It includes dashboard statistics, client management, ticket creation, ticket status updates, comments, login, API routes, and a relational database design.

It shows that I can build both frontend and backend parts of a web application, connect the app to a database, design tables, handle forms, create API endpoints, and document the project clearly.

3. Project Pitch

Say this in interview:

I built ClientPulse as a support-ticket management system. A support staff can log in, view dashboard statistics, search clients and tickets, create a new ticket, update ticket status, and add follow-up comments. The system records who created each ticket and who wrote each comment.

The project uses Next.js, React, TypeScript, Tailwind CSS, Prisma, and SQLite. Although the role mentions .NET/PHP and MySQL, the project structure is similar to a real business application: frontend pages, backend API routes, relational database tables, authentication flow, and documentation.

4. Requirement Mapping

Responsive UI

Job requirement:

• Convert UI/UX wireframes/prototypes into responsive interfaces
• Maintain UI consistency

ClientPulse example:

• Dashboard, clients page, ticket list, create ticket form, and ticket detail page are built with responsive Tailwind CSS.
• Tables support horizontal scrolling on smaller screens.
• Forms use consistent spacing, borders, buttons, and input styles.

What to say:

I used Tailwind CSS to build responsive layouts and kept a consistent design system across pages. The same sidebar, topbar, form controls, buttons, and table styles are reused across the app.

API Development

Job requirement:

• Create and manage API for partner or third-party integration

ClientPulse example:

• GET /api/clients
• GET /api/tickets
• POST /api/tickets
• PATCH /api/tickets/[id]
• GET /api/tickets/[id]/comments
• POST /api/tickets/[id]/comments

What to say:

I created API routes for reading clients and tickets, creating tickets, updating ticket status, and adding comments. I also added basic validation so invalid request data will return proper error responses.

Database Design

Job requirement:

• MySQL / Microsoft SQL
• Manage database

ClientPulse example:

• users
• clients
• tickets
• ticket_comments

What to say:

I designed four relational tables. Each ticket belongs to one client and one creator user. Each ticket can have many comments, and each comment belongs to one user. This makes the system able to track ownership and ticket history.

Authentication / User Tracking

ClientPulse example:

• User must login before creating ticket or adding comment.
• The app automatically records the current login user.

What to say:

I added a simple login flow using a cookie session. It is a demo implementation, so passwords are plain text, but the workflow shows how the system can track who created a ticket and who commented on it. In production, I would add password hashing and stronger session management.

Documentation

Job requirement:

• Write technical specification and infrastructure documentation

ClientPulse example:

• English README
• Chinese README for explanation
• docs/steps.md
• docs/tech-stack.md
• docs/target.md

What to say:

I documented the setup steps, tech stack, database schema, API endpoints, user flow, MySQL migration notes, and interview explanation. I did this so another developer can understand and run the project.

5. Knowledge To Prepare

Frontend Basics

Know these well:

• HTML structure
• CSS box model
• Flexbox
• CSS Grid
• Responsive design
• Form inputs
• Button states
• Table layouts
• Accessibility basics

Possible questions:

What is responsive design?

Answer:

Responsive design means the layout adapts to different screen sizes. For example, on desktop we can show sidebar and table columns, while on smaller screens we may stack content vertically or allow horizontal table scrolling.

What is the difference between Flexbox and Grid?

Answer:

Flexbox is mainly for one-dimensional layout, either row or column. Grid is for two-dimensional layout with rows and columns. I use Flexbox for navbars and form rows, and Grid for dashboard cards or larger page sections.

JavaScript / TypeScript

Know these:

• let, const
• functions
• async/await
• fetch API
• array methods: map, filter, find
• object destructuring
• TypeScript types
• error handling with try/catch

Possible question:

Why use TypeScript?

Answer:

TypeScript helps catch mistakes earlier by checking data types during development. In ClientPulse, it helps define props, API payloads, and database query results more clearly.

React

Know these:

• Component
• Props
• State
• Event handling
• Controlled input
• Form submission
• Conditional rendering
• Client component vs server component in Next.js

Possible question:

What is a React component?

Answer:

A component is a reusable UI block. For example, in ClientPulse I have components for the app shell, ticket form, comment form, and status select. This keeps the code organized and reusable.

Possible question:

What is state?

Answer:

State is data that changes inside a component. For example, the ticket form uses state to track submit loading, error messages, selected client, and dropdown visibility.

Next.js

Know these:

• App Router
• Page files
• Server components
• Client components
• Route handlers / API routes
• Dynamic routes
• Redirect
• notFound

Possible question:

Why use Next.js?

Answer:

Next.js lets me build frontend pages and backend API routes in one project. It also supports server-side rendering, routing, and deployment-friendly structure.

Possible question:

What is the difference between frontend page and API route?

Answer:

A frontend page renders UI for the user. An API route returns data or performs backend actions, such as creating a ticket or updating status.

API Knowledge

Know these:

• REST API
• HTTP methods: GET, POST, PATCH, DELETE
• Status codes: 200, 201, 400, 401, 404, 500
• JSON request/response
• Basic validation
• Postman testing

Possible question:

What is REST API?

Answer:

REST API is a way for frontend and backend to communicate using HTTP methods. For example, GET /api/tickets reads tickets, POST /api/tickets creates a ticket, and PATCH /api/tickets/[id] updates ticket status.

Possible question:

How did you test your API?

Answer:

I tested the API using Postman and also checked page flows in the browser. I verified that ticket creation, status update, and comment creation work correctly.

Database Knowledge

Know these:

• Table
• Row
• Column
• Primary key
• Foreign key
• One-to-many relationship
• SQL SELECT / INSERT / UPDATE
• Index basics
• Migration
• Seed data

Possible question:

What is a primary key?

Answer:

A primary key uniquely identifies each row in a table. For example, every ticket has an id.

Possible question:

What is a foreign key?

Answer:

A foreign key links one table to another. For example, tickets.clientId links a ticket to a client in the clients table.

Possible question:

What is migration?

Answer:

Migration is a controlled way to update the database structure, such as creating tables or adding columns, while keeping track of schema changes.

Possible question:

What is seed data?

Answer:

Seed data is sample starting data inserted into the database, usually for development or demo. In ClientPulse, I seed demo users, clients, tickets, and comments.

Prisma ORM

Know these:

• ORM meaning
• Prisma schema
• Prisma Client
• findMany
• findUnique
• create
• update
• include
• Relationship query

Possible question:

What is Prisma?

Answer:

Prisma is an ORM. It lets me interact with database tables using TypeScript instead of writing raw SQL every time. For example, I can use prisma.ticket.findMany() to get tickets.

Possible question:

Why use Prisma?

Answer:

It gives type safety, cleaner database queries, and easier relationship handling. It also makes it easier to switch databases later compared with writing database-specific SQL everywhere.

MySQL Knowledge

The job mentions MySQL, so prepare this well.

Know these:

• CREATE DATABASE
• CREATE TABLE
• SELECT
• INSERT
• UPDATE
• DELETE
• WHERE
• JOIN
• ORDER BY
• COUNT
• GROUP BY

Example queries:

SELECT * FROM tickets;
SELECT * FROM tickets WHERE status = 'Open';
SELECT * FROM tickets ORDER BY created_at DESC;
SELECT COUNT(*) FROM tickets WHERE priority = 'High';

Join example:

SELECT tickets.id, tickets.title, clients.company_name
FROM tickets
JOIN clients ON tickets.client_id = clients.id;

What to say about SQLite vs MySQL:

ClientPulse uses SQLite for local demo because it is fast and does not require installing a database server. However, the schema is relational and can be migrated to MySQL by changing the Prisma datasource provider, updating the connection string, running migrations, and seeding data again.

C# / .NET Knowledge To Prepare

The role mentions C# and .NET / ASP.NET Core MVC / Blazor. Even if your project is Next.js, prepare basic .NET concepts.

Know these:

• C# is a strongly typed object-oriented language
• ASP.NET Core is used to build web apps and APIs
• MVC means Model, View, Controller
• Controller handles HTTP requests
• Model represents data
• View renders UI
• Entity Framework is an ORM for .NET
• Dependency Injection is built into ASP.NET Core

Possible question:

What is MVC?

Answer:

MVC stands for Model, View, Controller. Model represents data and business logic, View is the UI, and Controller handles requests and connects model data to the view.

Possible question:

What is ASP.NET Core?

Answer:

ASP.NET Core is a framework for building web applications and APIs using C#. It is cross-platform and commonly used for enterprise systems.

Possible question:

How does your Next.js API compare to ASP.NET Controller?

Answer:

In ClientPulse, Next.js route handlers receive HTTP requests and return JSON responses. In ASP.NET Core, controllers do a similar job by handling routes like GET, POST, and PATCH.

PHP / Laravel Knowledge To Prepare

The role also mentions PHP / Laravel.

Know these:

• PHP is a server-side scripting language
• Laravel is a PHP web framework
• Laravel uses MVC pattern
• Eloquent is Laravel's ORM
• Routes define URLs
• Controllers handle requests
• Blade is Laravel's templating engine
• Migrations manage database schema

Possible question:

What is Laravel?

Answer:

Laravel is a PHP framework for building web applications. It provides routing, controllers, ORM, migrations, validation, authentication tools, and Blade templates.

Possible question:

What is Eloquent?

Answer:

Eloquent is Laravel's ORM. It lets developers interact with database tables using PHP models instead of writing raw SQL for every query.

Hosting / Deployment Knowledge

Know these:

• Environment variables
• Build command
• Start command
• Database connection string
• Server logs
• Domain
• SSL
• Production vs development

Possible question:

What do you need before deploying a web app?

Answer:

I need to configure environment variables, database connection, production build command, start command, and hosting platform settings. I also need to check logs and test the deployed site.

Possible question:

What is .env used for?

Answer:

.env stores environment-specific configuration such as database connection strings. It should not store public code logic and should not be committed if it contains secrets.

UI/UX And Figma Knowledge

Know these:

• Wireframe
• Prototype
• Design system
• Spacing
• Typography
• Color consistency
• Accessibility
• Responsive layout

Possible question:

How do you convert Figma design to code?

Answer:

I first identify the layout, spacing, colors, typography, reusable components, and responsive behavior. Then I build reusable React components and match the design using CSS or Tailwind.

Possible question:

What is a design system?

Answer:

A design system is a set of reusable UI rules and components, such as buttons, inputs, colors, typography, spacing, and layout patterns. It helps keep the application consistent.

Questions They May Ask About ClientPulse

Why did you choose this project?

Answer:

I wanted to build something close to a real business workflow. A support ticket system has frontend UI, database relationships, API routes, authentication, forms, search, filters, and documentation, so it is a good way to demonstrate full-stack ability.

What was the hardest part?

Answer:

One challenge was making ticket creation linked to the logged-in user. I had to make sure the user cannot manually choose the creator from the form. Instead, the API reads the current user from the session cookie and saves that user as the creator.

How does the frontend connect to the database?

Answer:

The frontend does not connect directly to the database. It either renders server-side pages that use Prisma, or client components call API routes. The API route then uses Prisma to read or write database data.

How do you prevent users from entering invalid client names?

Answer:

The create ticket page uses a searchable client dropdown. Users can type to filter clients, but the form only submits if they select an existing client from the list. This prevents invalid client names.

What would you improve if you had more time?

Answer:

I would add hashed passwords, role-based permissions, client create/edit pages, ticket assignment, file attachments, email notifications, audit logs, automated tests, and deploy it with MySQL.

Why did you use SQLite instead of MySQL?

Answer:

SQLite is faster for local demo because it does not require installing a database server. But the database is designed relationally and I used Prisma ORM, so migrating to MySQL later is realistic.

Is this production ready?

Answer:

Not yet. It is a portfolio demo. For production, I would add password hashing, stronger authentication, authorization rules, better validation, centralized error logging, automated tests, and a production database such as MySQL or PostgreSQL.

Short Technical Self Introduction

Use this:

I am comfortable building web applications with frontend and backend parts. In my ClientPulse project, I built a support ticket dashboard using Next.js, React, TypeScript, Tailwind CSS, Prisma, and SQLite. The system has login, dashboard statistics, clients, tickets, comments, API routes, and relational database tables.

I understand how frontend forms send data to backend APIs, how APIs validate and save data, and how database relationships connect users, clients, tickets, and comments. I also prepared documentation so the project can be understood and run by another developer.

Short HR-Friendly Explanation

Use this if HR is non-technical:

I built a small customer support system. When a customer has a problem, staff can create a ticket, set priority, update progress, and write follow-up notes. The dashboard shows how many issues are open, in progress, resolved, or urgent. This project shows that I can build a complete business application from interface to database.

Technical Demo Flow

During demo, show in this order:

1. Login page
2. Dashboard summary cards
3. Ticket list search/filter
4. Create new ticket
5. Ticket detail page
6. Update ticket status
7. Add comment
8. Settings page logout
9. README documentation

What To Revise Before Interview

• Read through README.md
• Read through README.zh-CN.md
• Practice explaining database relationships
• Practice explaining API endpoints
• Practice basic MySQL joins
• Revise basic C#/.NET MVC concepts
• Revise basic Laravel MVC concepts
• Prepare to explain why SQLite was used and how to migrate to MySQL
• Prepare to explain what you would improve for production

Important Keywords To Mention

• Responsive design
• REST API
• CRUD
• Relational database
• Primary key
• Foreign key
• One-to-many relationship
• ORM
• Authentication
• Session cookie
• Validation
• Error handling
• Documentation
• Migration
• Seed data
• Deployment