---
# System prepended metadata

title: '[TCTS] FE Test Exam'

---

# [TCTS] FE Test Exam

### Question 1

Where does the visible part of the HTML document live?

- [ ] Inside the `<head>` tag
- [x] Inside the `<body>` tag
- [ ] Anywhere in the HTML document
- [ ] Inside any `<script>` tags

### Question 2

Which of the following statements are correct?

- [x] The `href` attribute of `<a>` specifies the URL of the page the link goes to
- [ ] The `width` and `height` attributes of `<img>` provide the sharpness information for images
- [x] The `alt` attribute of `<img>` provides an alternate text for images
- [ ] The `src` attribute of `<img>` specifies the source set for images

### Question 3

Which of the following HTML elements are correct?

- [ ] `</p>Example Paragraph<p>`
- [x] `<P>Example Paragraph</P>`
- [x] `<p>Example Paragraph</p>`
- [ ] `<p>Example Paragraph<p>`

### Question 4

Which one is correct about CSS solutions?

- [ ] styled-components is not a CSS-in-JS solution
- [ ] CSS-in-JS externalize styling from JavaScript into standard CSS
- [x] With CSS-in-JS, styles can use JS logic
- [ ] With CSS modules, it's impossible to use SCSS

### Question 5

What is an example of using TailwindCSS?

- [x] `<div class="bg-white p-2">Example</div>`
- [ ] `<div style="background: white; padding: 0.5rem">Example</div>`
- [ ] `<div class="background: white; padding: 0.5rem">Example</div>`
- [ ] `<div style="bg-white p-2">Example</div>`

### Question 6

What is the primary difference between `let` and `const` in JavaScript?

- [ ] `let` provides block scope, while `const` does not
- [ ] `let` provides global scope, while `const` does not
- [ ] `let` can be redeclared, while `const` cannot
- [x] `let` can be reassigned, while `const` cannot

### Question 7

Which of the following can be the output of `Array.prototype.find()`?

- [x] `undefined`
- [ ] The index of an element in the array
- [x] An array
- [x] An object

### Question 8

Given `array = [1, 2, 3]`. What is the output of `{ ...array }`?

- [ ] `{ 0: [1, 2, 3] }`
- [ ] `[1, 2, 3]`
- [x] `{ 0: 1, 1: 2, 2: 3 }`
- [ ] `[ [1, 2, 3] ]`

### Question 9

What are correct about TypeScript?

- [x] TypeScript is built on top of JavaScript
- [ ] TypeScript is not a superset of JavaScript
- [ ] TypeScript performs static type checking at run time
- [x] TypeScript allows an interface to extend a class

### Question 10

Which of the following are special types of TypeScript?

- [x] `null`
- [ ] `string | number`
- [x] `undefined`
- [ ] `false`

### Question 11

What is the usage of `props` in React?

- [ ] To store global data that can change over time
- [ ] To manage component-specific data that can change over time
- [x] To pass data from parent to child components
- [ ] To pass data from child to parent components

### Question 12

What are correct about `state` in React?

- [x] State is mutable and can be changed within the component
- [ ] State is read-only within the component
- [ ] State can be accessed outside the component
- [x] State can be shared between sibling components by lifting up the state to a common parent component

### Question 13

Which is NOT a benefit of using React hooks?

- [ ] Reuse existing code, share non-visual logic
- [ ] More effective state management
- [x] Avoid using too much props
- [ ] Prevent issue associated with classes

### Question 14

What are correct about using React hooks?

- [x] Call hooks at the top level of React functions
- [ ] Call hooks inside loops, conditions or nested functions
- [x] Call hooks from functional components or custom hooks
- [ ] Call hooks in event handlers

### Question 15

When should you use the `useMemo` hook?

- [x] In case the dependencies rarely change
- [ ] In case the dependencies change frequently
- [ ] In case the calculation is fast
- [x] In case the calculation is slow

### Question 16

Which hook can be used to avoid props drilling?

- [ ] `useState`
- [ ] `useCallback`
- [x] `useContext`
- [ ] `useMemo`

### Question 17

Which solution can be used to share logic?

- [x] HOC (Higher-Order Components)
- [ ] Profiler
- [x] Custom hooks
- [ ] Fragments

### Question 18

Which is an ideal solution to build server-rendered applications?

- [ ] Create React App
- [x] NextJS
- [ ] ExpressJS
- [ ] NestJS

### Question 19

When should you choose Ant Design as the UI library?

- [x] The app requires a consistent and elegant design
- [ ] The app requires a modern and responsive design
- [x] The app needs unique interfaces with highly-customizable components
- [ ] The app needs complex UIs with highly-modular components

### Question 20

Which features are NOT supported by Ant Design?

- [ ] Internationalization
- [x] App routing
- [ ] Theme customization
- [x] Rich text editor

### Question 21

Which of the following is the React components foundation of Ant Design?

- [ ] react-bootstrap
- [x] react-component
- [ ] reactstrap
- [ ] semantic-ui-react

### Question 22

Which solution can be used to create responsive design?

- [x] Media queries
- [ ] CSS transitions
- [x] Container queries
- [x] Popular CSS frameworks (eg: Bootstrap, TailwindCSS...)

### Question 23

Which one should be used in mobile first design?

- [ ] `@media only screen and (min-width: 1200px) {...}`
- [ ] `@media only screen and (max-width: 1200px) {...}`
- [x] `@media only screen and (min-width: 768px) {...}`
- [ ] `@media only screen and (max-width: 768px) {...}`

### Question 24

What are the responsibilities of JavaScript module bundler?

- [x] Combine many JavaScript files into a single one
- [x] Generate a dependency graph of modules
- [ ] Add more whitespace, comments to your code
- [x] Remove unnecessary characters from your code (eg: whitespace, comments...)

### Question 25

What are correct about source maps?

- [ ] Source maps are files whose name ended with `.map` or `.mp`
- [x] Source maps can be generated by module bundlers (eg: Vite, webpack)
- [ ] Source maps cannot help you debug your code easier
- [x] Source maps can be used to map a combined file back to its original state

### Question 26

What are correct about Vite?

- [ ] Vite bundles your code with esbuild
- [x] Vite provides Hot Module Replacement
- [x] Vite supports tree shaking and code splitting
- [ ] Vite can only be used with React

### Question 27

What is the main difference between Vite and Create React App?

- [x] Vite uses a faster build system and development server, while Create React App has a larger ecosystem
- [ ] Vite uses a slower build system and development server, while Create React App has a smaller ecosystem
- [ ] Vite has a larger ecosystem, while Create React App uses a faster build system and development server
- [ ] Vite has a smaller ecosystem, while Create React App uses a faster build system and development server

### Question 28

What is the default output directory of Vite?

- [ ] `src`
- [x] `dist`
- [ ] `build`
- [ ] `lib`

### Question 29

Which of the following tools are used within Vite?

- [x] Rollup
- [ ] Parcel
- [ ] Webpack
- [x] esbuild

### Question 30

What are correct about tree shaking and code splitting?

- [ ] Code splitting removes unused code from your application
- [x] Tree shaking removes unused code from your application
- [ ] Tree shaking divides your code into smaller chunks loaded on demand
- [x] Code splitting divides your code into smaller chunks loaded on demand

### Question 31

What are the use cases of isolated component development?

- [x] Build shared UI components for multiple projects
- [ ] Integrate UI components with stable APIs
- [x] Work with deeply nested components
- [x] Build component library (eg: UI kit)

### Question 32

Where does TypeScript live in the testing trophy?

- [x] Static testing
- [ ] Unit testing
- [ ] Integration testing
- [ ] End-to-end (E2E) testing

### Question 33

What are some of best practices in Frontend testing?

- [ ] Write as much unit tests as you can
- [x] Do not write too many unit tests, focus more on integration tests
- [x] Tests should be deterministic
- [ ] Do your best to achieve 100% coverage

### Question 34

What are correct about unit tests and integration tests?

- [x] One unit test covers only one module while one integration test cover a whole feature
- [ ] Unit tests better resemble how users are using your app
- [ ] Integration tests often require rewrite after refactoring
- [x] Integration tests survive refactoring most of the time

### Question 35

What are the common causes of non-deterministic tests?

- [x] Asynchronous behavior
- [ ] Testing isolated components
- [x] Timezone
- [x] Network issues

### Question 36

Which selector should NOT be used in querying DOM elements for tests?

- [ ] `[data-testid="loginBtn"]`
- [x] `button`
- [ ] `[children="Login"]`
- [x] `.primary-btn`

### Question 37

Which is NOT a common type of code coverage?

- [ ] Branch
- [ ] Statement
- [ ] Line
- [x] Class

### Question 38

What does Gitlab CI/CD help you?

- [x] Catch bugs early in the development cycle
- [ ] Manage containerized workloads and services
- [x] Build, test and deploy your app
- [x] Monitor iterative code changes

### Question 39

Which is NOT the responsibility of K8s (Kubernetes)?

- [x] Deploy code and build your application
- [ ] App discovery and load balancing
- [ ] Manage containerized applications
- [ ] Horizontal scaling

### Question 40

What are the features of NGINX?

- [x] Reverse proxy
- [x] Content caching
- [x] Load balancer
- [ ] Run container applications

### Question 41

What is the primary goal of using Storybook?

- [ ] Make UI components more beautiful
- [x] Build UI components in isolation
- [ ] Write unit test for UI components
- [ ] Optimize performance for UI components

### Question 42

What are benefits of using monorepos?

- [x] Shared code across projects
- [ ] Lower memory and storage requirements
- [x] Consistent code standard & style
- [x] Simplified dependency management

### Question 43

Which are NOT disadvantages of using monorepos?

- [ ] Higher chances of merge conflicts
- [ ] Bad performance
- [x] Complex code organization
- [x] Reduce collaboration among teams

### Question 44

When should you NOT use a monorepo?

- [x] Many projects run by different teams on different technologies
- [x] The Frontend side changes frequently while everything stays the same on the Backend side
- [ ] You want everyone in different teams to be able to view all the code
- [x] You want to restrict access to some parts of the project

### Question 45

Which of the following solutions can be used to build monorepos for Frontend?

- [x] Yarn workspaces
- [x] Nx
- [x] Lerna
- [x] Bazel

### Question 46

Which of the following are the technologies used in Progressive Web Apps (PWA)?

- [x] Service worker
- [x] Background synchronization
- [ ] Hot module replacement
- [x] Push & notification

### Question 47

When should you build a Progressive Web App?

- [ ] You want to create a responsive web app
- [x] Provide good UX even when the device has network connection problems
- [ ] Your users have a good internet connection
- [x] Notify user about events happened while the app was not running

### Question 48

Which of the following are NOT recommended when optimizing website performance?

- [ ] Reduce the impact of third-party code
- [x] Increase JavaScript execution time
- [ ] Remove unused JavaScript
- [x] Add more dependencies

### Question 49

What are the common causes of a poor CLS (Cumulative Layout Shift)?

- [x] Animations on elements
- [ ] Pre-loaded content
- [x] Images without dimensions
- [x] Dynamically injected content

### Question 50

Which solution can be used to optimize LCP (Largest Contentful Paint)?

- [x] Optimize image size
- [x] Improve server response time
- [ ] Enable lazy loading on images rendered above the fold
- [x] Defer parsing of non-critical JavaScript

### Question 51

Given the capstone project: <a href="https://git.teko.vn/teko-ui/react-vite-capstone" target="_blank">https://git.teko.vn/teko-ui/react-vite-capstone</a>. The project is bootstrapped with React + Vite + TypeScript.
Please use the capstone project and **choose one of the 3 topics below** to do this task. When you finish, compress your repo to the format **<yourname>.zip** (please exclude *node_modules*, *.git* and build folders before compressing), **push the zip file** to this Google Drive: <a href="https://drive.google.com/drive/u/1/folders/1i8Zf_KfsDQeE2dmglgVqqvjQjEtjIs0K" target="_blank">https://drive.google.com/drive/u/1/folders/1i8Zf_KfsDQeE2dmglgVqqvjQjEtjIs0K</a>, and **submit the link to your file**.
> Note: You must use **Node 18+** for compatibility (you can use <a href="https://github.com/nvm-sh/nvm" target="_blank">NVM</a> to manage different Node versions if needed).

**1. Build a TODO list**

- The TODO list has some basic features: add new, view and delete item
- There is a text input (to enter the item name) and a button to add new item to the TODO list
- Each row in the TODO list has two information (the ordinal number & the item name) and a "Delete" icon
- Use Ant Design to build the UI (already installed in the project)
- Use React concepts (state, hooks) and event handlers to handle the logic

**2. Build a shared Button component**

- Build the Button component from scratch (do NOT use any UI libraries like Ant Design, etc), with well-defined component props using TypeScript
- The Button component has some types: primary (solid primary-background-color, white text), secondary (white background-color, primary-color text & border). The primary-color is up to your choice
- The Button has some UI effects on hover, click. The UI effects are up to your choice
- The Button can be disabled (prevent user from clicking on the button)
- The Button component uses `onClick` handler to handle `click` event
- The Button's styles can be overridden

**3. Build a login form with validation**

- The form has two fields (username & password) and a "Submit" button
- The username field is in text format, required, max length 20 characters
- The password field is in password format, required, max length 16 characters and has an eye icon to view hidden password
- Clicking on the "Submit" button will validate the form fields and show error messages if any. If all fields are valid, show a popup with success message: "Login successfully with username `<username>`"
- Use Ant Design to build the UI (already installed in the project)

Feel free to add more styles, functionalities to make better UI/UX if you can.
