Add fullstack questions

src/data/question-groups/full-stack/content/api-security.md

@@ -0,0 +1,32 @@
+Rather than overlapping each other, authorization and authentication reference two very distinct stages of security within your app. 
+
+##### Authentication
+
+On one side, we have authentication, in charge of verifying the user identity. You can use tokens (e.g., JWT, OAuth) or sessions for this.
+
+Example: Validate a JWT sent in headers:  
+
+```javascript
+const token = req.headers['authorization'];
+jwt.verify(token, secretKey, (err, decoded) => { ... });
+```
+
+##### Authorization
+
+Once authenticated, users need to be authorized to access the resources. For this to work, you’ll need to define roles  and permissions for your users.
+
+Middleware example:  
+
+```javascript
+app.use((req, res, next) => {
+  if (req.user.role !== 'admin') return res.status(403).send('Forbidden');
+  next();
+});
+```
+
+##### Best Practices
+
+* Use HTTPS to ensure a secure channel between the browser and the server.  
+* Validate input to prevent injection attacks.  
+* Rate-limit API requests to avoid having your APIs overwhelmed by potential attackers.  
+* Store sensitive data securely (e.g., hashed passwords).

src/data/question-groups/full-stack/content/async-javascript.md

@@ -0,0 +1,83 @@
+JavaScript handles asynchronous operations, like fetching data from an API or reading files, through different paradigms: **callbacks**, **promises**, and **async/await**. Each offers unique advantages and challenges. Here's a detailed look:
+
+##### 1\. Callbacks
+
+**What it is**:  
+A callback is a function passed as an argument to another function to be executed later, usually after an asynchronous task completes.
+
+**Example**:
+
+```javascript
+fs.readFile('file.txt', (err, data) => {
+  if (err) {
+    console.error('Error reading file:', err);
+    return;
+  }
+  console.log('File content:', data.toString());
+});
+```
+
+**Challenges**:
+
+**Callback Hell**: As tasks become more complex, nesting callbacks leads to hard-to-read and maintainable code.
+
+```javascript
+doTask1(() => {
+  doTask2(() => {
+    doTask3(() => {
+      console.log('All tasks done!');
+    });
+  });
+});
+```
+
+##### 2\. Promises
+
+**What it is**:  
+A promise represents a value that may be available now, in the future, or never usually coming as a result of an asynchronous operation. It provides a cleaner way to handle asynchronous operations, chaining actions with `.then()` and catching errors with `.catch()`.
+
+**Example**:
+
+```javascript
+fetch('https://api.example.com/data')
+  .then((response) => response.json())
+  .then((data) => {
+    console.log('Fetched data:', data);
+  })
+  .catch((error) => {
+    console.error('Error fetching data:', error);
+  });
+```
+
+**Advantages**:
+
+- Eliminates deeply nested callbacks.
+- Provides a clearer structure for handling asynchronous workflows.
+
+##### 3\. Async/Await
+
+**What it is**:  
+Async/await is built on promises but provides a more synchronous and readable syntax for managing this type of code.
+
+Functions declared with `async` automatically return a promise, and the `await` keyword pauses execution until a promise resolves.
+
+**Example**:
+
+```javascript
+const fetchData = async () => {
+  try {
+    const response = await fetch('https://api.example.com/data');
+    const data = await response.json();
+    console.log('Fetched data:', data);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+};
+
+fetchData();
+```
+
+**Advantages**:
+
+- Reads like synchronous code, making it easier to understand.
+- Simplifies error handling with `try/catch` blocks.

src/data/question-groups/full-stack/content/client-server-programming.md

@@ -0,0 +1,22 @@
+The **client-side** and **server-side** refer to two distinct parts of a **web application** that work together to deliver functionality to users. Understanding their roles is essential for building efficient and responsive applications.
+
+#### Client-Side
+* **What it Does**: This is the part of the application that runs in the user’s browser. It handles **user interfaces** and interactions, allowing users to see and interact with the application.  
+* **Key Characteristics**:  
+  * Executes **JavaScript code** directly in the browser to handle tasks like form validation, animations, and dynamic content updates (through DOM \-Document Object Model- updates).  
+  * Manages rendering of HTML and CSS for a seamless visual experience.  
+  * Often communicates with the server via **REST (Representational State Transfer)** APIs to fetch or send data asynchronously.  
+* **Examples**:  
+  * Clicking a button that triggers a JavaScript function to show a popup.  
+  * Fetching additional items on a page using `fetch()` or `axios` without a full page reload.  
+
+#### Server-Side
+
+* **What it Does**: This part operates on the server and processes requests from the client, performing tasks like database queries, business logic, and serving responses.  
+* **Key Characteristics**:  
+  * Executes server-side programming languages like Python, Java, or Node.js.  
+  * Handles sensitive operations like authentication and data storage securely.  
+  * Sends data to the client in structured formats (e.g., JSON) via **REST APIs** for rendering.  
+* **Examples**:  
+  * Processing a login request by verifying credentials in a database.  
+  * Returning a list of products in JSON format for the client to display dynamically.

src/data/question-groups/full-stack/content/css-selectors.md

@@ -0,0 +1,22 @@
+**CSS selectors** are patterns used to select and style specific elements in an HTML document. They define which elements a set of CSS rules should apply to, making them a fundamental part of designing the appearance of **web applications** and **user interfaces**.
+
+##### **Why CSS Selectors Matter**
+
+Selectors allow you to target elements precisely, enabling you to control layout, colors, fonts, and other visual aspects of your website. They are essential for creating structured and maintainable CSS code.
+
+There are different types of selectors, categorized based on what they target:
+
+* Elements: these selectors reference a specific type of element, and affect all instances of that element throughout the page. Example: `p {}`  
+* Classes: These selectors only affect those elements that hava a matching class. They’re great to target large groups of elements of the same type, without affecting the entire set. Example: `.my-class {}`  
+* ID: ID-level selectors affect only one element (as IDs can only be used on a single element). They’re great when you have a single element that breaks the pattern from the rest of the group. Example: `#my-id {}`  
+* Attribute: Attribute-level selectors target elements based on the value of their attributes. They’re great for the cases where you have to dynamically highlight elements. Example: `[type="text"] {}`  
+* Descendant:  Another way to target other elements is to target them based on the parent element. This method works with any combination of the above, so you can potentially target elements using a specific class that are descendants of an element with a specific attribute value (or any other combination you can think of). Example: `div p {}`
+
+##### When to Use Selectors
+
+* Use type selectors for global styling.  
+* Use class selectors for reusable styles across multiple elements.  
+* Use ID selectors sparingly for unique elements.  
+* Combine selectors for granular control and better maintainability.
+
+CSS selectors give you the power to control every aspect of your web application’s design, ensuring that your user interfaces are consistent, visually appealing, and responsive

src/data/question-groups/full-stack/content/database-relationships.md

@@ -0,0 +1,3 @@
+1. **One-to-Many**: One record in a table relates to multiple records in another. Handled via foreign keys. Example: A `user` has many `posts`.  
+2. **Many-to-Many**: Requires a join table to link records from two tables. Example: `students` and `courses` with an intermediary `enrollments` table.  
+3. **Primary/Foreign Keys**: Establish links between tables for querying and ensuring data consistency.

src/data/question-groups/full-stack/content/div-span-purpose.md

@@ -0,0 +1,2 @@
+* **`<div>`**: This is a block-level element that groups other block-level elements (layout or sections) together. It’s quite useful for layout definition.  
+* **`<span>`**: This inline element is great for grouping together other inline elements, such as text nodes. Because the \<span \> has no structural impact on the content when used, it’s perfect for styling text (or even sections of a larger text) without visually affecting it (other than the actual CSS applied).

src/data/question-groups/full-stack/content/environment-variables.md.md

@@ -0,0 +1,6 @@
+Environment variables store configuration values (e.g., API keys, database URLs) outside the codebase. This is important for two main reasons:
+
+1. **Security**. By extracting these values (which tend to be private) from the codebase, you avoid potential code leaks from becoming a bigger security problem.  
+2. **More flexible deployments**. If these values need to change, by having them as environment variables you don’t need to re-deploy your code, you just need to reload those values (either by restarting the app, or hot reloading the values from a file).
+
+For the actual implementation, one might use something like the `dotenv` module, which loads environment variables from a .env file in the local folder of the project, or interact with a secret manager, such as **AWS Secret Manager** which stores these values externally in a secure storage.

src/data/question-groups/full-stack/content/flexbox-vs-grid.md

@@ -0,0 +1,3 @@
+**Flexbox**: Designed for one-dimensional layouts (row or column). Best for aligning items within a container. Example use cases: Navigation bars or centering elements.
+
+**CSS Grid**: Designed for two-dimensional layouts (rows and columns). Best for creating complex grid-based layouts. Example use cases: Full-page layouts or dashboards.

src/data/question-groups/full-stack/content/full-stack-development.md

@@ -0,0 +1,10 @@
+**Full-stack development** refers to the practice of building and maintaining both the **frontend** and **backend** of a **web application** or **web service**. A full-stack developer works across all layers of the application, ensuring seamless functionality from the user interface to the server and database.
+
+Key aspects of full-stack development include:
+
+* **Frontend Development**: Involves creating the parts of the application that users interact with directly, such as buttons, forms, and layouts. Tools and technologies often used include **HTML**, **CSS**, **JavaScript**, and frameworks like React, Angular, or Vue.js. This may also include building **Progressive Web Apps (PWAs)** for enhanced user experiences.  
+* **Backend Development**: Focuses on server-side logic, databases, and APIs that power the frontend. Common programming languages for backend development include **Python**, **Java**, **Node.js**, and **PHP**. Developers often design and integrate **web services** or REST/GraphQL APIs for data handling.  
+* **Databases and Storage**: Managing data through relational databases (e.g., MySQL, PostgreSQL) or non-relational databases (e.g., MongoDB, Redis).  
+* **DevOps and Deployment**: Setting up hosting environments, CI/CD pipelines, and handling cloud services to deploy and maintain applications.
+
+Full-stack developers are valued for their versatility and ability to understand how different components of a web application interact, making them crucial for delivering well-rounded, functional products.

src/data/question-groups/full-stack/content/get-post-difference.md

@@ -0,0 +1,5 @@
+While there is no hard rule stating these methods needs to be used in a very specific way, the currently accepted standard, says that:
+
+* **GET**: Retrieves data from a server (read-only).  
+* **POST**: Sends data to the server to create or update resources.
+

src/data/question-groups/full-stack/content/html-css-js-purpose.md

@@ -0,0 +1,3 @@
+* **HTML**: Defines the structure and content of a webpage.  
+* **CSS**: Styles the webpage (colors, layout, fonts).  
+* **JavaScript**: Adds interactivity and dynamic behavior to the webpage.

src/data/question-groups/full-stack/content/include-css.md

@@ -0,0 +1,16 @@
+There are two main ways to include CSS into your HTML, you can either do it “inline” or you can do it with the “style” tag.
+
+**Inline**: Add `style` directly in an HTML element.
+
+`<p style="color: red;">Hello</p>`
+
+**Internal**: Use a `<style>` tag in the `<head>`.
+
+`<style>`  
+  `p { color: red; }`  
+`</style>`
+
+1. 
+
+**External**: Link a CSS file using `<link>` in the `<head>`.  
+`<link rel="stylesheet" href="styles.css">`  

src/data/question-groups/full-stack/content/js-dom-manipulation.md

@@ -0,0 +1,6 @@
+JavaScript accesses and modifies the DOM using methods like:
+
+* **Get elements**: `document.getElementById("id")`, `querySelector(".class")`.  
+* **Modify content**: `element.innerHTML = "New Content"`.  
+* **Change styles**: `element.style.color = "blue"`.  
+* **Add/remove elements**: `appendChild()`, `removeChild()`.

src/data/question-groups/full-stack/content/js-equality-operators.md

@@ -0,0 +1,2 @@
+* **`==`**: Compares values with each other directly, performing type conversion if required first (example: `'5' == 5` → `true`).  
+* **`===`**: This operator strictly compares values and types with each other. There is no type conversion performed with this operator. For example, if you try to compare a string and a number, the result will always be false, no matter what: `'5' === 5` → `false`.

src/data/question-groups/full-stack/content/nodejs-database-crud.md

@@ -0,0 +1,95 @@
+In general terms, connecting to a database using Node.js requires the following steps:
+
+1. Install the DB driver.  
+2. Use the driver to connect to the database.  
+3. Use the returned connection object to send requests.
+
+Of course, depending on the database engine you decide to go with, there might be some slight changes to those steps.  
+However, if we think about either MongoDB or PostgreDB, let’s take a look at how to interact with them through Node.js:
+
+##### Install the Database Driver
+
+The first thing you gotta do, is install either the driver which will let you directly interact with the database, or an ORM, which will abstract that connection and give you a higher-level layer of abstraction.   
+Use the appropriate driver for your database.
+
+* For MongoDB: `npm install mongoose`  
+* For PostgreSQL: `npm install pg`
+
+##### Connect to the database
+
+Now to connect to the actual database, you’ll have to adapt the code based on the connection method you’re using. Let’s take a closer look at how to connect either to MongoDB or PostgreDB.
+
+**MongoDB**:  
+
+```javascript
+const mongoose = require('mongoose');
+mongoose.connect('mongodb://localhost:27017/mydb', { useNewUrlParser: true, useUnifiedTopology: true });
+```
+
+**PostgreSQL**:  
+
+```javascript
+const { Pool } = require('pg');
+const pool = new Pool({ user: 'user', host: 'localhost', database: 'mydb', password: 'password', port: 5432 });
+```
+
+##### Perform CRUD Operations
+
+For the CRUD (Create, Read, Update & Delete), the code is going to change based on the technology you’re using. Here in our examples, we have one that’s using an ORM which means we have an abstraction layer on top of the native query language, and then we also have a simple SQL driver, which means we have to directly write SQL queries.
+
+**Create operation**:
+
+**MongoDB**:  
+
+```javascript
+const User = mongoose.model('User', { name: String });
+User.create({ name: 'John Doe' });
+```
+
+**PostgreSQL**:  
+
+```javascript
+pool.query('INSERT INTO users (name) VALUES ($1)', ['John Doe']);
+```
+
+**Read operation**:
+
+**MongoDB**:  
+
+```javascript
+User.find({}, (err, users) => console.log(users));
+```
+
+**PostgreSQL**:  
+
+```javascript
+pool.query('SELECT * FROM users', (err, res) => console.log(res.rows));
+```
+
+**Update operation**:
+
+**MongoDB**:  
+
+```javascript
+User.updateOne({ name: 'John Doe' }, { name: 'Jane Doe' });
+```
+
+**PostgreSQL**:  
+
+```javascript
+pool.query('UPDATE users SET name = $1 WHERE name = $2', ['Jane Doe', 'John Doe']);
+```
+
+**Delete operation**:
+
+**MongoDB**:  
+
+```javascript
+User.deleteOne({ name: 'Jane Doe' });
+```
+
+**PostgreSQL**:  
+
+```javascript
+pool.query('DELETE FROM users WHERE name = $1', ['Jane Doe']);
+```

src/data/question-groups/full-stack/content/nodejs-middleware.md

@@ -0,0 +1,9 @@
+Middleware in Express is a function that processes requests and responses in the app’s request-response cycle. It can be used to modify request/response objects adding extra information or removing unnecessary data, it can execute code (like logging, parsing JSON, etc) and it can also end the request-response cycle, allowing it to short-circuit the process and return a different response (commonly used to handle invalid or unauthorized requests).
+
+Example:  
+```javascript
+app.use((req, res, next) => {
+  console.log('Middleware triggered');
+  next();
+});
+```

src/data/question-groups/full-stack/content/package-json-purpose.md

@@ -0,0 +1,3 @@
+The `package.json` file in a Node.js project has multiple uses. It defines the project's metadata, like its name, version, and description. It also lists the dependencies and devDependencies required to run or develop the application, as well as scripts for tasks like building, testing, or running the app (and any custom script you’d like to add). 
+
+Finally, it ensures reproducible installations by allowing the `npm install` command to pull consistent dependencies, ensuring you can easily port your project into other systems.

src/data/question-groups/full-stack/content/react-hooks.md

@@ -0,0 +1,9 @@
+React hooks are functions that let you use state and other React features in functional components.
+
+With hooks you can simplify state and lifecycle management without needing class components. They also enable code reuse through custom hooks.
+
+**Examples of different hooks**:
+
+* `useState` for managing state.  
+* `useEffect` for handling side effects (e.g., fetching data).  
+* `useContext` for global state.

src/data/question-groups/full-stack/content/react-performance.md

@@ -0,0 +1,10 @@
+The performance of a React application can be affected by multiple aspects, but some of the most common ones and their way to fix them are:
+
+1. **Reduce Re-renders**:  
+   * Use `React.memo` and `useCallback` to avoid unnecessary updates.  
+   * Split large components into smaller, focused components.  
+2. **Lazy Loading**: Load components or routes on demand using `React.lazy` and `Suspense`.  
+3. **Efficient State Management**: Keep state local where possible and avoid overusing global state.  
+4. **Minimize DOM Updates**: Use keys in lists and avoid deeply nested props/state updates.  
+5. **Code Splitting**: Use Webpack or tools like `react-loadable` to split the bundle.  
+6. **Profile and Debug**: Use React Developer Tools to identify bottlenecks.

src/data/question-groups/full-stack/content/react-state-management.md

@@ -0,0 +1,11 @@
+In React you have two different ways to handle state, depending on the scope of the data inside that state. 
+
+If the scope is local, then you can handle it through a simple `useState` hook inside the component itself. 
+
+If on the other hand, you need to store a global state which is accessible for many components, then you can use something like the `Context API` or specific state libraries like Redux, MobX or Zustand.
+
+The way state handling works in React (in general terms) works like this:
+
+* State is updated via actions (e.g., event handlers).  
+* Updated state triggers re-renders to reflect changes in the UI.  
+* Avoid excessive re-renders by optimizing context or using memoization (`React.memo`, `useMemo`).

src/data/question-groups/full-stack/content/relational-vs-nosql.md

@@ -0,0 +1,2 @@
+* **Relational**: Stores data in structured tables with rows and columns (e.g., MySQL, PostgreSQL). Good for relationships and complex queries.  
+* **Non-relational**: Stores data in flexible formats like documents, key-value pairs, or graphs (e.g., MongoDB, Redis). Better for unstructured or hierarchical data.

src/data/question-groups/full-stack/content/responsive-design.md

@@ -0,0 +1,10 @@
+**Responsive design** ensures a website looks good on all devices by adapting its layout to different screen sizes.
+
+To help ensure this, you can use flexible grids (either `CSS Grid` or `Flexbox`).
+
+You will also have to apply media queries which help set breakpoints where the different styles need to be applied based on the width of the window:  
+`@media (max-width: 768px) {`  
+  `.container { flex-direction: column; }`  
+`}`
+
+You can also use relative units (`%`, `em`, `rem`) instead of fixed units (`px`) to ensure the values automatically adapt to the size of the container.

src/data/question-groups/full-stack/content/rest-api.md

@@ -0,0 +1,20 @@
+A **REST API** (Representational State Transfer Application Programming Interface) is a standardized way for applications to communicate over HTTP by following a set of principles. It allows clients (like web browsers or mobile apps) to interact with servers to perform operations like fetching or modifying data.
+
+**Key Features of a REST API**:
+
+1. **Stateless Communication**: Each request from the client to the server must contain all the information needed for the server to process it, with no reliance on stored session data.  
+2. **Resource-Based**: Data and functionality are treated as "resources" accessed using endpoints (URLs).  
+   * Example: `/users` to get a list of users, `/users/1` to access a specific user.  
+3. **HTTP Methods**: REST APIs use HTTP methods to define actions:  
+   * **GET**: Retrieve data.  
+   * **POST**: Create new resources.  
+   * **PUT**: Update existing resources.  
+   * **DELETE**: Remove resources.  
+4. **Structured Responses**: Data is typically returned in a lightweight format like **JSON** or **XML**.
+
+**Why is it Used?**
+
+* **Interoperability**: REST APIs enable communication between different systems and platforms, making them ideal for building **web services**.  
+* **Scalability**: They are stateless, allowing them to handle more traffic with horizontal scaling.  
+* **Ease of Use**: Clear structure and standard conventions make it easy for developers to understand and implement.  
+* **Flexibility**: Suitable for a variety of clients, from **web applications** to mobile and IoT devices.

src/data/question-groups/full-stack/content/rest-pagination.md

@@ -0,0 +1,35 @@
+Adding pagination to a RESTful API can be done in multiple ways, but assuming a standard implementation, the best option is to go with query parameters.
+
+**Query Parameters**: Using `limit` and `offset` (or `page` and `size`).  
+
+```
+GET /api/items?limit=10&offset=20
+```
+
+**Back-End Implementation**:
+
+In the backend, we’re turn those query params into something like:
+
+**SQL code:**  
+```sql
+SELECT * FROM items LIMIT 10 OFFSET 20;
+```
+
+**In code:**  
+```javascript
+const items = await db.find().skip(offset).limit(limit);
+res.json({ data: items });
+```
+
+##### Metadata
+
+Include total count and current page in the response for better UX.
+
+```json
+{ 
+  "data": [...], 
+  "total": 100,
+  "page": 3,
+  "size": 10 
+}
+```

src/data/question-groups/full-stack/content/user-authentication.md

@@ -0,0 +1,7 @@
+There are many ways to handle authentication, from simple auth, all the way to oAuth. The right option depends on your particular business needs.  
+A classical example is using JWT for authenticating a website with a RESTful API using the following process:
+
+1. **Frontend**: Present a login form to collect credentials from the user.  
+2. **Backend**: Verify credentials against a database and if they’re valid, create a signed token and return it in the response.  
+3. **Secure connection**: From this point on, the frontend will send the token on every request and the backend will validate it to ensure it’s a valid and authenticated user.  
+4. **Secured best practices**: Ensure your passwords are hashed (e.g., with bcrypt) and use HTTPS for a secured data transmission channel.

src/data/question-groups/full-stack/content/version-control.md

@@ -0,0 +1,11 @@
+**Purpose**: Version control tracks changes in code, enables collaboration, and allows reverting to previous versions.
+
+**Git Workflow Example**:
+
+1. Clone the repository: `git clone <repo_url>`.  
+2. Create a branch: `git checkout -b feature-branch`.  
+3. Make changes and stage them: `git add .`.  
+4. Commit changes: `git commit -m "Add feature"`.  
+5. Push to the remote: `git push origin feature-branch`.  
+6. Create a pull request for review.  
+7. Merge the branch into the main branch after approval.

src/data/question-groups/full-stack/content/websockets.md

@@ -0,0 +1,11 @@
+**WebSockets**: A protocol for full-duplex communication between client and server over a single persistent connection.
+
+**Difference**:
+
+* **HTTP**: Request-response model; client initiates every interaction.  
+* **WebSockets**: Persistent, allowing real-time, two-way communication (e.g., live chat, notifications).
+
+Example:
+
+* HTTP: Send a request for new messages repeatedly (polling).  
+* WebSocket: Server pushes new messages as they arrive.

src/data/question-groups/full-stack/full-stack.md

@@ -0,0 +1,245 @@
+---
+order: 4
+briefTitle: 'Full-stack'
+briefDescription: 'Test, Rate and Improve your Full-stack knowledge with these questions.'
+title: 'Top 50 Full Stack Developer Interview Questions'
+description: 'Ace your interview with our curated list of 50 full-stack developer interview questions, perfect for beginners and experienced candidates.'
+authorId: 'fernando'
+isNew: true
+date: 2025-01-29
+seo:
+  title: 'Top 50 Full Stack Developer Interview Questions'
+  description: 'Ace your interview with our curated list of 50 full-stack developer interview questions, perfect for beginners and experienced candidates.'
+  keywords:
+    - 'full-stack quiz'
+    - 'full-stack questions'
+    - 'full-stack interview questions'
+    - 'full-stack interview'
+    - 'full-stack test'
+sitemap:
+  priority: 1
+  changefreq: 'monthly'
+questions:
+  - question: What is full-stack development?
+    answer: full-stack-development.md
+    topics:
+      - 'Beginner'
+  - question: Explain the difference between client-side and server-side programming
+    answer: client-server-programming.md
+    topics:
+      - 'Beginner'
+  - question: What is the purpose of HTML, CSS, and JavaScript in web development?
+    answer: html-css-js-purpose.md
+    topics:
+      - 'Beginner'
+  - question: What is a REST API, and why is it used?
+    answer: rest-api.md
+    topics:
+      - 'Beginner'
+  - question: Explain the difference between GET and POST HTTP methods
+    answer: get-post-difference.md
+    topics:
+      - 'Beginner'
+  - question: How do you include CSS in an HTML document?
+    answer: include-css.md
+    topics:
+      - 'Beginner'
+  - question: What is the purpose of the div and span tags in HTML?
+    answer: div-span-purpose.md
+    topics:
+      - 'Beginner'
+  - question: What are CSS selectors, and can you name a few types?
+    answer: css-selectors.md
+    topics:
+      - 'Beginner'
+  - question: How does JavaScript manipulate the DOM?
+    answer: js-dom-manipulation.md
+    topics:
+      - 'Beginner'
+  - question: What is the difference between == and === in JavaScript?
+    answer: js-equality-operators.md
+    topics:
+      - 'Beginner'
+  - question: What is the difference between relational and non-relational databases?
+    answer: relational-vs-nosql.md
+    topics:
+      - 'Beginner'
+  - question: How would you handle user authentication in a web application?
+    answer: user-authentication.md
+    topics:
+      - 'Beginner'
+  - question: What is the purpose of package.json in a Node.js project?
+    answer: package-json-purpose.md
+    topics:
+      - 'Beginner'
+  - question: How would you connect a Node.js application to a database and perform basic CRUD operations?
+    answer: nodejs-database-crud.md
+    topics:
+      - 'Beginner'
+  - question: What are environment variables, and how are they used?
+    answer: environment-variables.md
+    topics:
+      - 'Beginner'
+  - question: Explain the concept of responsive design. How would you implement it?
+    answer: responsive-design.md
+    topics:
+      - 'Intermediate'
+  - question: What is the difference between Flexbox and CSS Grid?
+    answer: flexbox-vs-grid.md
+    topics:
+      - 'Intermediate'
+  - question: What are React hooks, and why are they used?
+    answer: react-hooks.md
+    topics:
+      - 'Intermediate'
+  - question: How does state management work in React applications?
+    answer: react-state-management.md
+    topics:
+      - 'Intermediate'
+  - question: Explain how you would optimize the performance of a React app
+    answer: react-performance.md
+    topics:
+      - 'Intermediate'
+  - question: What is middleware in the context of Node.js and Express?
+    answer: nodejs-middleware.md
+    topics:
+      - 'Intermediate'
+  - question: How do you manage asynchronous code in JavaScript?
+    answer: async-javascript.md
+    topics:
+      - 'Intermediate'
+  - question: Explain how relational databases handle relationships
+    answer: database-relationships.md
+    topics:
+      - 'Intermediate'
+  - question: How would you implement pagination in a REST API?
+    answer: rest-pagination.md
+    topics:
+      - 'Intermediate'
+  - question: Describe how you would secure an API using authentication and authorization techniques
+    answer: api-security.md
+    topics:
+      - 'Intermediate'
+  - question: Explain the purpose of a version control system and Git workflow
+    answer: version-control.md
+    topics:
+      - 'Intermediate'
+  - question: What are WebSockets, and how do they differ from HTTP requests?
+    answer: websockets.md
+    topics:
+      - 'Intermediate'
+  - question: Describe the concept of MVC architecture
+    answer: mvc-architecture.md
+    topics:
+      - 'Intermediate'
+  - question: What is CORS, and how do you handle it in a web application?
+    answer: cors-handling.md
+    topics:
+      - 'Intermediate'
+  - question: How do you use Postman for testing APIs?
+    answer: postman-testing.md
+    topics:
+      - 'Intermediate'
+  - question: How would you deploy a full-stack application to a cloud provider?
+    answer: cloud-deployment.md
+    topics:
+      - 'Advanced'
+  - question: What is the purpose of a build tool like Webpack or Vite?
+    answer: build-tools.md
+    topics:
+      - 'Advanced'
+  - question: How do you debug an issue that occurs in both the frontend and back-end?
+    answer: full-stack-debugging.md
+    topics:
+      - 'Advanced'
+  - question: Explain the role of Docker in development and deployment
+    answer: docker-role.md
+    topics:
+      - 'Advanced'
+  - question: How would you implement real-time updates in a web application?
+    answer: real-time-updates.md
+    topics:
+      - 'Advanced'
+  - question: What are some strategies for improving the SEO of a React-based application?
+    answer: react-seo.md
+    topics:
+      - 'Advanced'
+  - question: How would you implement server-side rendering in a modern React app?
+    answer: react-ssr.md
+    topics:
+      - 'Advanced'
+  - question: What is code splitting, and how does it improve performance?
+    answer: code-splitting.md
+    topics:
+      - 'Advanced'
+  - question: Explain how to handle memory leaks in frontend applications
+    answer: memory-leaks.md
+    topics:
+      - 'Advanced'
+  - question: How would you implement internationalization in a full-stack app?
+    answer: internationalization.md
+    topics:
+      - 'Advanced'
+  - question: Explain how you would design and implement a microservices architecture
+    answer: microservices.md
+    topics:
+      - 'Advanced'
+  - question: What are some strategies to ensure high availability and scalability?
+    answer: high-availability.md
+    topics:
+      - 'Advanced'
+  - question: How do you handle database migrations in production systems?
+    answer: database-migrations.md
+    topics:
+      - 'Advanced'
+  - question: What is GraphQL, and how does it differ from REST?
+    answer: graphql-vs-rest.md
+    topics:
+      - 'Advanced'
+  - question: How would you implement caching in a back-end system?
+    answer: backend-caching.md
+    topics:
+      - 'Advanced'
+  - question: How do you handle security vulnerabilities such as SQL injection and XSS?
+    answer: security-vulnerabilities.md
+    topics:
+      - 'Advanced'
+  - question: Explain how CI/CD pipelines work and tools used to implement them
+    answer: cicd-pipelines.md
+    topics:
+      - 'Advanced'
+  - question: How do you approach performance monitoring in a full-stack application?
+    answer: performance-monitoring.md
+    topics:
+      - 'Advanced'
+  - question: What is event-driven architecture, and when would you use it?
+    answer: event-driven-architecture.md
+    topics:
+      - 'Advanced'
+  - question: What are common challenges in building full-stack applications?
+    answer: common-challenges.md
+    topics:
+      - 'Advanced'
+
+---
+
+![Top full-stack developer interview questions](https://assets.roadmap.sh/guest/full-stack-developer-interview-questions-baq90.jpg)
+
+Full-stack developers are the backbone of modern software teams, bravely connecting the dots between what users see and the powerful systems working behind the scenes. They're not "just" frontend developers, nor they're "just" backend devs, instead, they tackle the full spectrum. From designing intuitive interfaces to crafting efficient web server logic, they juggle multiple responsibilities, making their role one of the most versatile—and critical—in the tech industry.
+
+If you're aiming for a full-stack role, you'll need to prove you've got the skills to handle it all. That's why we've put together this guide to the **most common full-stack developer interview questions**. 
+
+And if this is not enough, we also have a full [full-stack roadmap](https://roadmap.sh/full-stack) for you to follow. 
+
+So get comfortable, and let's begin.
+
+## Getting ready for your full-stack interview
+
+Before jumping right into your full-stack developer interview, remember the following points:
+
+1. **Understand the Core Concepts**: Familiarize yourself with the foundations of full-stack development, including frontend frameworks (like React or Angular), back-end technologies (such as Node.js or Django), RESTful APIs, and databases. Understanding how these pieces work together is key to unlocking the role of full-stack developer.  
+2. **Practice Hands-On Skills**: Full-stack development is all about practical knowledge, so put your skills to the test. Build a small project or refine an existing one. Practice creating REST APIs, styling responsive UIs, or integrating a database. The more you practice, the more comfortable you'll feel in solving real-world problems.  
+3. **Study Software Architecture**: While you may not be a system architect, a solid understanding of software architecture principles—such as MVC, microservices, and event-driven designs—can be a huge advantage. Being able to discuss how these concepts apply to modern web apps can make you stand out.  
+4. **Research the Company**: Always research the company you're interviewing with. Investigate the tools and technologies they use for any type of software development (regardless if it's backend or frontend), their overall tech stack, and their approach to building software. This will show genuine interest and help you ask insightful questions during the interview.
+
+We're now ready to get started, so let's dive into some of the most common full-stack developer interview questions to help you prepare\!