Full Stack Developer Interview Questions for Freshers
Full Stack Developer Interview Questions for Freshers address both front-end and back-end development skills, database knowledge, and integration abilities that companies look for in new graduates. Beginning your full stack career means you must know how to build complete web applications from user interfaces to server logic and database connections.
Here we are covering Full Stack Developer Interview Questions for Freshers seeking entry-level positions in web development, including HTML/CSS basics, JavaScript programming, server-side languages, and database management concepts.
These Full Stack Developer Interview Questions for Freshers will assist you in showcasing your versatile coding abilities, explaining your full development process understanding, and demonstrating your capability to handle end-to-end application development in modern web environments.
Table of Contents
Entry Level Full Stack Developer Interview Questions
Que 1. What is the role of a full stack developer in a web application?
Answer:
A full stack developer works on both frontend (UI/UX, client-side logic) and backend (server, database, APIs), building and maintaining end-to-end web applications. They ensure seamless integration between layers, focusing on functionality, performance, and user experience.
Que 2. What is the difference between frontend and backend development?
Answer:
Frontend development focuses on the user interface, using HTML, CSS, and JavaScript to create interactive web pages. Backend development handles server-side logic, databases, and APIs, using languages like Node.js or Python to manage data and business logic.
Que 3. What is a REST API, and how does it connect frontend and backend?
Answer:
A REST API uses HTTP methods (GET, POST, PUT, DELETE) to enable communication between frontend and backend. The frontend sends requests to API endpoints, and the backend responds with data, typically in JSON format.
Que 4. How do you create a basic GET endpoint in Node.js with Express?
Answer:
Use Express to define a GET endpoint that returns JSON data, handling client requests.
const express = require('express');
const app = express();
app.get('/api/users', (req, res) => {
res.json([{ id: 1, name: 'John' }]);
});
app.listen(3000);Que 5. What is the purpose of HTML, CSS, and JavaScript in frontend development?
Answer:
HTML structures content, CSS styles and layouts the UI, and JavaScript adds interactivity and dynamic behavior. Together, they create a responsive and engaging user interface.
Que 6. How do you write a simple SQL query to fetch data?
Answer:
Use a SELECT statement to retrieve specific columns from a database table, with optional conditions.
SELECT name, email FROM users WHERE age > 18;Que 7. What is the difference between let, const, and var in JavaScript?
Answer:var is function-scoped, hoisted, and allows redeclaration. let is block-scoped and reassignable. const is block-scoped with immutable bindings (though object properties can change).
let x = 1;
const y = 2;
var z = 3;Que 8. How do you style a button in CSS to make it visually appealing?
Answer:
Apply styles like padding, border, and hover effects to enhance a button’s appearance and usability.
button {
padding: 10px 20px;
border: none;
background-color: #007bff;
color: white;
}
button:hover {
background-color: #0056b3;
}Que 9. What is the purpose of a primary key in a database?
Answer:
A primary key uniquely identifies each record in a table, ensuring data integrity and enabling efficient queries and relationships.
CREATE TABLE users (
id INT PRIMARY KEY,
name VARCHAR(255)
);Que 10. How do you fetch data from an API in a frontend application?
Answer:
Use the Fetch API or axios to make HTTP requests, handling responses with promises or async/await.
async function fetchUsers() {
try {
const response = await fetch('/api/users');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}Que 11. What is the box model in CSS, and how does it affect layouts?
Answer:
The CSS box model includes content, padding, border, and margin, determining an element’s size and spacing. It affects layout calculations, especially with box-sizing: border-box.
div {
box-sizing: border-box;
width: 100px;
padding: 10px;
border: 5px solid black;
}Que 12. How do you handle form submission in a full stack application?
Answer:
On the frontend, capture form data and send it to a backend endpoint. On the backend, validate and process the data, returning a response.
// Frontend
form.addEventListener('submit', async (e) => {
e.preventDefault();
const data = new FormData(form);
await fetch('/api/submit', { method: 'POST', body: data });
});// Backend (Express)
app.post('/api/submit', (req, res) => {
res.json({ message: 'Form submitted' });
});Que 13. What is the difference between GET and POST HTTP methods?
Answer:
GET retrieves data, sending parameters in the URL, and is idempotent. POST submits data in the request body, used for creating or updating resources, and is non-idempotent.
Que 14. How do you connect a backend to a relational database?
Answer:
Use a driver or ORM (e.g., pg for PostgreSQL, Sequelize) to establish a connection and execute queries.
const { Pool } = require('pg');
const pool = new Pool({
user: 'dbuser',
database: 'mydb',
password: 'secret'
});
pool.query('SELECT * FROM users', (err, res) => {
console.log(res.rows);
});Que 15. What is event handling in JavaScript, and how is it used?
Answer:
Event handling responds to user actions (e.g., clicks) using addEventListener. It’s used to make web pages interactive.
document.getElementById('btn').addEventListener('click', () => {
alert('Button clicked');
});Que 16. How do you prevent SQL injection in a backend application?
Answer:
Use parameterized queries or prepared statements to separate user input from SQL code, preventing malicious queries.
# Using Python with SQLAlchemy
from sqlalchemy.sql import text
query = text('SELECT * FROM users WHERE name = :name')
result = conn.execute(query, {'name': user_input})Que 17. What is the purpose of environment variables in a full stack application?
Answer:
Environment variables store sensitive or environment-specific data (e.g., API keys, database URLs) securely, accessed via process.env in Node.js or os.environ in Python.
require('dotenv').config();
const dbUrl = process.env.DATABASE_URL;Que 18. How do you make a website responsive using CSS?
Answer:
Use relative units (%, vw, rem), media queries, and Flexbox or Grid. Design mobile-first and test across devices.
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}Que 19. What is CORS, and how do you handle it in a backend application?
Answer:
CORS (Cross-Origin Resource Sharing) controls cross-domain requests. Enable it in the backend with specific origins or allow all using middleware.
const cors = require('cors');
app.use(cors({ origin: 'http://frontend.com' }));Que 20. How do you validate user input in a full stack application?
Answer:
On the frontend, use HTML5 attributes (required, pattern) and JavaScript for client-side validation. On the backend, use libraries like Joi or pydantic for robust validation.
// Backend validation with Joi
const Joi = require('joi');
const schema = Joi.object({ email: Joi.string().email().required() });
app.post('/api/user', (req, res) => {
const { error } = schema.validate(req.body);
if (error) return res.status(400).send(error.details[0].message);
});
Also Check: Full Stack Developer Interview Questions for Experienced
Basic Full Stack Developer Interview Questions for Freshers
Que 21. What is the purpose of the data- attribute in HTML?
Answer:
The data- attribute stores custom data on HTML elements, accessible via JavaScript’s dataset property or CSS. It’s used for metadata without affecting rendering.
<div data-user-id="123"></div>
<script>
const div = document.querySelector('div');
console.log(div.dataset.userId); // 123
</script>Que 22. How do you handle events in JavaScript for a web application?
Answer:
Use addEventListener to attach handlers to DOM elements for events like clicks or inputs, enabling interactivity.
document.getElementById('myButton').addEventListener('click', () => {
console.log('Button clicked');
});Que 23. What is the difference between INNER JOIN and LEFT JOIN in SQL?
Answer:INNER JOIN returns only matching rows from both tables. LEFT JOIN returns all rows from the left table, with NULLs for non-matching rows from the right table.
SELECT users.name, orders.id
FROM users
LEFT JOIN orders ON users.id = orders.user_id;Que 24. How do you create a POST endpoint in Python with Flask?
Answer:
Use Flask’s @app.route with methods=['POST'] to handle POST requests, parsing JSON data and returning a response.
from flask import Flask, request
app = Flask(__name__)
@app.route('/api/users', methods=['POST'])
def create_user():
data = request.json
return {"message": f"User {data['name']} created"}Que 25. What is the purpose of the flex property in CSS?
Answer:
The flex property in CSS is a shorthand for flex-grow, flex-shrink, and flex-basis, used in Flexbox layouts to control how items grow, shrink, or size within a container.
.item {
flex: 1 0 auto; /* Grow, don't shrink, auto basis */
}Que 26. How do you connect a frontend to a backend API?
Answer:
Use fetch or axios to send HTTP requests from the frontend to backend API endpoints, handling responses with JSON.
fetch('/api/users', { method: 'GET' })
.then(response => response.json())
.then(data => console.log(data));Que 27. What is the difference between sessionStorage and localStorage in JavaScript?
Answer:sessionStorage stores data for a single session (tab), cleared on tab close. localStorage persists data across sessions until explicitly cleared, both with a 5-10MB limit.
sessionStorage.setItem('key', 'value');
localStorage.setItem('key', 'value');Que 28. How do you secure a backend API endpoint?
Answer:
Use authentication (e.g., JWT), validate inputs, and enforce HTTPS. Implement middleware to check tokens and return appropriate status codes for unauthorized access.
const jwt = require('jsonwebtoken');
app.use((req, res, next) => {
const token = req.header('Authorization');
if (!token) return res.status(401).send('Unauthorized');
jwt.verify(token, process.env.JWT_SECRET, (err) => {
if (err) return res.status(403).send('Invalid token');
next();
});
});Que 29. What is the purpose of a foreign key in a database?
Answer:
A foreign key links a column in one table to the primary key of another, ensuring referential integrity and enabling table relationships.
CREATE TABLE orders (
id INT PRIMARY KEY,
user_id INT,
FOREIGN KEY (user_id) REFERENCES users(id)
);Que 30. How do you create a responsive layout using CSS Grid?
Answer:
Use display: grid with grid-template-columns and media queries to adjust layouts for different screen sizes.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}Que 31. What is the purpose of middleware in a backend framework like Express?
Answer:
Middleware processes requests in a pipeline, handling tasks like logging, authentication, or parsing. It runs before route handlers and can modify requests/responses.
app.use((req, res, next) => {
console.log('Request URL:', req.url);
next();
});Que 32. How do you style a responsive image in HTML and CSS?
Answer:
Use max-width: 100% to scale images within containers and srcset for responsive image sources based on device resolution.
<img src="image.jpg" srcset="image-2x.jpg 2x" alt="Responsive image">
<style>
img { max-width: 100%; height: auto; }
</style>Que 33. What is the difference between async/await and Promises in JavaScript?
Answer:async/await is syntactic sugar over Promises, providing cleaner asynchronous code. Promises use .then() and .catch(), while async/await uses try-catch for error handling.
async function getData() {
try {
const response = await fetch('/api/data');
return await response.json();
} catch (error) {
console.error(error);
}
}Que 34. How do you handle errors in a backend application?
Answer:
Use try-catch for async code, implement error-handling middleware, and return appropriate HTTP status codes. Log errors for debugging.
app.use((err, req, res, next) => {
console.error(err.stack);
res.status(500).json({ error: 'Server error' });
});Que 35. What is the purpose of the aria- attributes in HTML?
Answer:aria- attributes enhance accessibility by providing context for screen readers (e.g., aria-label for unlabeled elements), ensuring compliance with WCAG standards.
<button aria-label="Close">X</button>Que 36. How do you implement a DELETE endpoint in a backend API?
Answer:
Use a DELETE route to remove a resource, typically identified by an ID, and return a success status.
app.delete('/api/users/:id', (req, res) => {
// Delete logic
res.json({ message: `User ${req.params.id} deleted` });
});Que 37. What is the difference between block and inline display in CSS?
Answer:block elements take full width and stack vertically (e.g., <div>). inline elements sit within text flow, taking only content width (e.g., <span>).
div { display: block; }
span { display: inline; }Que 38. How do you test a full stack application?
Answer:
Use Postman for API testing, Jest for frontend unit tests, and pytest for backend tests. Mock dependencies and automate with CI/CD pipelines like GitHub Actions.
# pytest example
import requests
def test_api():
response = requests.get('http://localhost:3000/api/users')
assert response.status_code == 200Que 39. What is the purpose of a .env file in a full stack application?
Answer:
A .env file stores configuration settings like database URLs or API keys, keeping them secure and separate from code. Load with dotenv in Node.js or python-dotenv in Python.
require('dotenv').config();
const apiKey = process.env.API_KEY;Que 40. How do you create a simple form validation in JavaScript?
Answer:
Validate form inputs using JavaScript with regex or HTML5 attributes, displaying error messages for invalid data.
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
const email = form.querySelector('#email').value;
if (!email.includes('@')) {
e.preventDefault();
alert('Invalid email');
}
});Advanced Full Stack Developer Interview Questions for Freshers
Que 41. How do you implement lazy loading for a frontend application integrated with a backend API?
Answer:
Use dynamic imports or React.lazy with Suspense on the frontend for code splitting, and fetch data from the backend only when needed using pagination or infinite scroll. Optimize API calls with caching (e.g., Redis) on the backend.
// Frontend: React.lazy
const LazyComponent = React.lazy(() => import('./Component'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}// Backend: Express with Redis
app.get('/api/data', async (req, res) => {
const cached = await redis.get('data');
if (cached) return res.json(JSON.parse(cached));
const data = await db.query('SELECT * FROM data LIMIT 10');
await redis.setEx('data', 3600, JSON.stringify(data));
res.json(data);
});Que 42. What is the difference between server-side rendering (SSR) and client-side rendering (CSR)?
Answer:
SSR generates HTML on the server for each request, improving SEO and initial load time (e.g., Next.js). CSR renders pages in the browser using JavaScript (e.g., React), offering faster interactions but slower initial loads. Combine with API endpoints for dynamic data.
Que 43. How do you secure a full stack application against XSS and CSRF attacks?
Answer:
For XSS, sanitize inputs with DOMPurify on the frontend and avoid dangerouslySetInnerHTML. For CSRF, use tokens in forms, validated on the backend with middleware like csurf. Implement Content Security Policy (CSP) headers.
// Backend: Express CSRF
const csurf = require('csurf');
app.use(csurf());
app.post('/form', (req, res) => {
res.json({ message: 'Form submitted' });
});// Frontend: DOMPurify
import DOMPurify from 'dompurify';
const cleanInput = DOMPurify.sanitize(userInput);Que 44. How do you implement authentication in a full stack application using JWT?
Answer:
On the backend, generate JWTs with jsonwebtoken after user login, store in HTTP-only cookies or headers. On the frontend, send tokens in requests and validate in middleware. Refresh tokens for session management.
// Backend: Generate JWT
const jwt = require('jsonwebtoken');
app.post('/login', (req, res) => {
const user = { id: 1, name: 'John' };
const token = jwt.sign(user, process.env.JWT_SECRET, { expiresIn: '1h' });
res.json({ token });
});// Frontend: Send request with token
fetch('/api/protected', {
headers: { Authorization: `Bearer ${token}` }
});Que 45. How do you optimize database queries in a full stack application for performance?
Answer:
Use indexing, avoid SELECT *, and implement pagination with LIMIT and OFFSET. Cache results with Redis on the backend, and fetch only necessary data on the frontend to reduce load.
CREATE INDEX idx_user_email ON users(email);
SELECT id, name FROM users WHERE email = 'test@example.com';Que 46. How do you handle file uploads in a full stack application?
Answer:
On the frontend, use <input type="file"> and FormData to send files. On the backend, use multer (Node.js) or Flask’s request.files to process uploads, validate file types, and store in cloud storage like AWS S3.
<!-- Frontend -->
<input type="file" id="fileInput">
<script>
const file = document.getElementById('fileInput').files[0];
const formData = new FormData();
formData.append('file', file);
fetch('/upload', { method: 'POST', body: formData });
</script>// Backend: Express with multer
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('file'), (req, res) => {
res.json({ message: 'File uploaded' });
});Que 47. How do you implement a responsive layout with CSS Grid and integrate it with a backend API?
Answer:
Use CSS Grid with grid-template-columns for responsive layouts, adjusting with media queries. Fetch dynamic data from a backend API to populate the grid.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
@media (max-width: 600px) {
.container { grid-template-columns: 1fr; }
}// Frontend: Fetch data
async function loadGrid() {
const response = await fetch('/api/items');
const items = await response.json();
document.querySelector('.container').innerHTML = items.map(item => `<div>${item.name}</div>`).join('');
}Que 48. What is the role of middleware in a full stack application?
Answer:
Middleware processes requests in the backend (e.g., authentication, logging) and can enhance frontend requests (e.g., adding headers). It ensures modularity and reusability across the stack.
// Backend: Express middleware
app.use((req, res, next) => {
req.startTime = Date.now();
next();
});Que 49. How do you implement real-time updates in a full stack application?
Answer:
Use WebSockets (e.g., socket.io) for real-time communication. The backend pushes updates via a WebSocket server, and the frontend listens for events to update the UI.
// Backend: Socket.io
const io = require('socket.io')(server);
io.on('connection', (socket) => {
socket.on('message', (msg) => io.emit('message', msg));
});// Frontend: Socket.io client
import io from 'socket.io-client';
const socket = io('http://localhost:3000');
socket.on('message', (msg) => {
document.getElementById('chat').innerText += msg;
});Que 50. How do you handle CORS in a full stack application?
Answer:
Enable CORS on the backend with specific origins using middleware like cors (Express) or Flask-CORS. Ensure the frontend sends requests with appropriate headers.
// Backend: Express CORS
const cors = require('cors');
app.use(cors({ origin: 'http://frontend.com' }));Que 51. How do you validate form inputs across frontend and backend?
Answer:
On the frontend, use HTML5 attributes and JavaScript for client-side validation. On the backend, use libraries like Joi or pydantic for robust validation to ensure security.
// Frontend
form.addEventListener('submit', (e) => {
if (!form.email.value.includes('@')) {
e.preventDefault();
alert('Invalid email');
}
});// Backend: Joi
const Joi = require('joi');
const schema = Joi.object({ email: Joi.string().email().required() });
app.post('/api/form', (req, res) => {
const { error } = schema.validate(req.body);
if (error) return res.status(400).send(error.details[0].message);
});Que 52. What is the difference between a relational and NoSQL database in a full stack context?
Answer:
Relational databases (e.g., PostgreSQL) use structured tables and SQL for relationships, ideal for structured data. NoSQL databases (e.g., MongoDB) handle unstructured data, scaling horizontally for flexibility in dynamic applications.
Que 53. How do you implement pagination in a full stack application?
Answer:
On the backend, use LIMIT and OFFSET in SQL or equivalent in NoSQL, returning metadata like total pages. On the frontend, display paginated data with navigation controls.
// Backend: Express
app.get('/api/items', async (req, res) => {
const page = parseInt(req.query.page) || 1;
const limit = 10;
const offset = (page - 1) * limit;
const items = await db.query('SELECT * FROM items LIMIT $1 OFFSET $2', [limit, offset]);
res.json({ items, page });
});// Frontend
async function loadPage(page) {
const response = await fetch(`/api/items?page=${page}`);
const data = await response.json();
document.getElementById('items').innerHTML = data.items.map(item => `<div>${item.name}</div>`).join('');
}Que 54. How do you optimize API response times in a full stack application?
Answer:
On the backend, cache responses with Redis, optimize queries with indexing, and use async processing. On the frontend, minimize requests, use lazy loading, and leverage CDNs for assets.
// Backend: Redis caching
const redis = require('redis');
const client = redis.createClient();
app.get('/api/data', async (req, res) => {
const cached = await client.get('data');
if (cached) return res.json(JSON.parse(cached));
const data = await db.query('SELECT * FROM data');
await client.setEx('data', 3600, JSON.stringify(data));
});Que 55. How do you handle environment variables in a full stack application?
Answer:
Store sensitive data (e.g., API keys) in .env files, load with dotenv (Node.js) or python-dotenv (Python), and access via process.env or os.environ.
require('dotenv').config();
const dbUrl = process.env.DATABASE_URL;Que 56. How do you implement a responsive navigation bar integrated with a backend?
Answer:
Use CSS Flexbox for a responsive navbar, fetching dynamic menu items from a backend API. Handle navigation events with JavaScript.
.nav {
display: flex;
justify-content: space-between;
}
@media (max-width: 600px) {
.nav { flex-direction: column; }
}// Frontend: Fetch menu
async function loadNav() {
const response = await fetch('/api/menu');
const menu = await response.json();
document.getElementById('nav').innerHTML = menu.map(item => `<a href="${item.url}">${item.name}</a>`).join('');
}Que 57. What is the purpose of a reverse proxy in a full stack application?
Answer:
A reverse proxy (e.g., Nginx) routes client requests to backend servers, providing load balancing, caching, and security. It serves static frontend assets and proxies API requests.
server {
listen 80;
location /api/ {
proxy_pass http://backend:3000;
}
location / {
root /frontend/build;
}
}Que 58. How do you test a full stack application for reliability?
Answer:
Use Jest and React Testing Library for frontend unit tests, pytest or Mocha for backend tests, and Cypress for end-to-end tests. Mock APIs with msw and automate with CI/CD.
// Frontend test
import { render, screen } from '@testing-library/react';
test('renders component', () => {
render(<App />);
expect(screen.getByText('Welcome')).toBeInTheDocument();
});Que 59. How do you handle database migrations in a full stack application?
Answer:
Use tools like Flyway or Sequelize to manage schema changes. Test migrations in staging, backup data, and ensure frontend compatibility with updated data structures.
// Sequelize migration
module.exports = {
up: async (queryInterface, Sequelize) => {
await queryInterface.addColumn('users', 'email', Sequelize.STRING);
}
};Que 60. How do you implement logging in a full stack application?
Answer:
On the backend, use Winston or Python’s logging for structured logs. On the frontend, log errors with console.log or Sentry. Centralize logs with ELK Stack for analysis.
// Backend: Winston
const winston = require('winston');
const logger = winston.createLogger({
transports: [new winston.transports.File({ filename: 'app.log' })]
});
logger.info('API called');Conclusion
The full stack development sector continues advancing with modern JavaScript frameworks, cloud hosting solutions, and automated testing practices becoming standard requirements for beginning developers. These Full Stack Developer Interview Questions for Freshers provide the essential knowledge base required for your job applications, covering basic web development principles to complete application deployment. With thorough preparation using these Full Stack Developer Interview Questions for Freshers and awareness of current full stack technologies, you will be properly equipped to launch your comprehensive web development career.
Also Check:
