Coding Challenges

Build a basic portfolio page using semantic tags like <header>, <main>, <section>, <article>, and <footer>.

Create a simple blog page with a main article and related posts using <article> and <section> tags.

Build a contact form with fields for name, email, subject, and message using proper <label> and input associations.

Create an FAQ section where each question can be expanded/collapsed using <details> and <summary>.

Build a hero section for a product with a headline, subheading, image placeholder, and call-to-action button.

Create a pricing section with at least three pricing plans displayed side-by-side using semantic HTML.

Build an image gallery with at least six images, each having a caption using <figure> and <figcaption>.

Build a top navigation bar that scrolls to different sections of the same page using anchor links.

Create a resume-style page that lists education, experience, skills, and projects using headings and lists.

Design the HTML structure for a multi-step form (personal info, address, review) without adding actual step logic.

Create a long text-based Terms & Conditions page with proper headings, paragraphs, and internal links.

Build a documentation-style page with a table of contents at the top linking to different sections below.

Create a simple 404 page with an error message, short explanation, and a link back to the homepage.

Build a form with labels, aria attributes where needed, and proper error message markup.

Create a small newsletter block with a title, short text, email input, and subscribe button.

Create a footer with 3–4 columns: links, social icons placeholder, and a small about text.

Use <dl>, <dt>, and <dd> to create a feature list that explains terms and their descriptions.

Create a layout where an image is on the left and text content is on the right, like a typical media object.

Build a table comparing at least three products with rows for features and columns for each product.

Create a simple page structure that shows content in two languages with proper lang attributes.

Center a card both vertically and horizontally on the page using Flexbox.

Create a 3-column responsive layout using Flexbox.

Build a top navbar that collapses into a hamburger menu on small screens (no JS logic required).

Build a hero banner with background image, title, subtitle, and a call-to-action button.

Style a login form with proper spacing, inputs and button styles.

Create a card that lifts with a shadow on hover.

Zoom image slightly on hover with smooth transition.

Create an image grid layout that adjusts column count based on screen width.

Divide a full screen into two equal vertical halves with distinct content.

Build a card with frosted glass effect using backdrop-filter.

Show a tooltip on hover using only CSS pseudo-elements.

Show/hide dropdown content on hover using pure CSS.

Create a circular loading spinner animation using @keyframes.

Build a vertical timeline UI using pseudo-elements.

Build a testimonial section with avatar, comment, and name.

Highlight one plan visually using a different background or border.

Include product image, title, price badge and button.

Build tag-style UI used for categories or labels.

Create a dashboard layout with fixed sidebar and scrollable main content.

Create grid cards layout like analytics dashboard

Given a string, return a new string with the characters in reverse order.

Check whether a given string reads the same forwards and backwards. Ignore case and non-alphanumeric characters.

Return the maximum number from a given non-empty array of numbers.

Given an array, return a new array with all duplicate values removed.

Count the number of vowels (a, e, i, o, u) present in a given string.

Print numbers from 1 to n. For multiples of 3 print 'Fizz', for multiples of 5 print 'Buzz', and for multiples of both print 'FizzBuzz'.

Return the sum of all numbers in an array.

Given a non-negative integer n, return n! (n factorial).

Return an array containing the first n numbers of the Fibonacci sequence.

Given a string, return the first character that does not repeat. If none exists, return null.

Check if two given strings are anagrams of each other (same characters with same frequency).

Given an array that may contain nested arrays one level deep, return a new flattened array.

Return an array containing the unique intersection of two arrays (values present in both).

Convert a sentence so that the first letter of each word is uppercase and the rest are lowercase.

Given a sentence, return the longest word. If there are multiple, return any one.

Implement a debounce function that delays invoking a callback until after a certain wait time has elapsed since the last call.

Implement a throttle function that ensures a callback is called at most once in a given interval.

Implement a custom map function called myMap that works similarly to Array.prototype.map.

Implement a custom filter function called myFilter that works similarly to Array.prototype.filter.

Implement a simple EventEmitter with on, off and emit methods to subscribe and trigger events.

Create a User type with id, name, email, and isAdmin fields and use it to type a user object.

Extend the User type so that 'isAdmin' and 'phone' fields are optional.

Create a ReadonlyUser type in which all properties from User are readonly.

Create a UserUpdate type where all User fields are optional using Partial.

Create a type that is both Partial and Readonly version of User.

Define a ButtonVariant type that only allows 'primary', 'secondary', or 'ghost'.

Create a discriminated union type representing loading, success, and error states of an API request.

Implement a generic identity function that returns whatever value it receives with the correct type.

Define a generic type that wraps any type T as an array of T.

Create a generic ApiResult<T> type that has success, data, and optional error message.

Create a PublicUser type that only has 'id' and 'name' from User.

Create a SafeUser type that removes 'password' and 'token' from the User type.

Create a type alias ScoreMap that maps string keys to number values using Record.

Define a type alias ApiCaller that represents a function returning a Promise of generic type T.

Create a Shape union type for 'circle' and 'rectangle', each with appropriate fields.

Using the Shape type, implement a function that returns the area of either a circle or a rectangle.

Create a function that takes an object and a key (restricted to the object's keys) and returns the value.

Define a type ReadonlyStringList that is a readonly array of strings.

Write a generic fetchJson<T> function that fetches a URL and returns Promise<T>.

Define a Props type for a Button component with label (string), onClick (function), and optional variant.

Create a counter with + and - buttons and show the current value.

Build a todo list where users can add items and mark them as completed.

Create a search box that filters a list of items in real-time.

Build a Tabs component that switches visible content when a tab is clicked.

Create an accordion with multiple sections where clicking a header toggles its content.

Build a modal dialog that opens on button click and closes via close button or backdrop click.

Create a toggle that switches between dark and light theme and applies a class to the body.

Create a custom hook useLocalStorage that syncs state with localStorage.

Implement a search input that only triggers filter/API logic after the user stops typing for some time.

Build a component that fetches data from an API and shows loading, error, or data UI.

Create a simple pagination component that lets you navigate through pages of items.

Build a multi-step form with next/previous buttons and a final review step.

Create a simple toast system where messages appear at the corner and disappear after a timeout.

Build an input where user can type a value and press Enter to create a tag, with ability to remove tags.

Load more items when the user scrolls near the bottom of the list.

Create a file input that shows a preview of an image file selected by the user.

Build a 1–5 star rating component that allows user to select a rating.

Create a Kanban board with three columns: Todo, In Progress, Done. Allow moving tasks between columns.

Create a navbar with multiple links and highlight the active one based on current state.

Create a signup form with name, email and password, showing simple validation messages before submit.

Create a simple Next.js page that renders a heading and a short description.

Create a layout component that wraps pages with a navbar and footer.

Create a root layout in the app directory with shared HTML structure and metadata.

Create a /blog page that lists posts and a dynamic [slug] route that shows blog details.

Use dynamic route segments and read params in a page component.

Use generateStaticParams to statically generate multiple dynamic pages at build time.

Add static title and description metadata for a page using the metadata export.

Use generateMetadata to set page title and description based on dynamic route params.

Create a basic API route that returns a JSON response.

Build a dynamic API route that reads an id from the URL and returns fake data.

Create a server component that fetches data on the server and passes it to the client.

Turn a component into a client component to allow hooks like useState and useEffect.

Add a loading.tsx file to show a loading UI while a route segment is fetching data.

Add an error.tsx file to handle rendering when a route throws an error.

Create a catch-all route that matches any nested path segments and prints them.

Create an optional catch-all route that works both with and without additional segments.

Use middleware.ts to protect a dashboard route and redirect to login if no cookie is set.

Create a route that returns a simple XML sitemap listing a few URLs.

Create a route that returns a robots.txt response for your site.

Import a local JSON or JS data file and render a resources list in a Next.js page.

Create a basic HTTP server using Node's built-in http module that responds with plain text.

Create a Node CLI script that takes a file path from command line arguments and prints the word count.

Read a JSON file, update a field, and write it back to disk.

Write a script that logs OS platform, total memory, free memory, and CPU count.

Create a logger module that logs messages with timestamps and levels (info, warn, error).

Create a CLI script that counts down from N seconds to 0 and logs each second.

Build a simple command-line arguments parser that supports flags like --port=3000 --mode=dev.

Create a small config helper that reads required environment variables and throws error if missing.

Implement a minimal EventEmitter class with on, off, and emit methods (without using built-in events module).

Write a script that adds a prefix to all file names in a given folder.

Create a todo CLI where you can add and list todos stored in a JSON file.

Implement the in-memory logic for a URL shortener: createShortUrl(longUrl) and getLongUrl(shortCode).

Implement a basic in-memory rate limiter that allows only N requests per IP in a time window.

Create a script that logs a heartbeat message every minute, and stops after 5 runs.

Write a script that copies all files from a source directory to a backup directory with a timestamped folder.

Create a script that tries to parse a JSON file and reports whether it is valid or prints the parse error.

Implement a simple in-memory queue that processes async tasks one by one.

Build a script that reads a markdown (.md) file and outputs HTML (you may assume a simple library like marked is available).

Implement a fetchWithRetry(url, options, maxRetries) helper that retries on network errors or 5xx responses.

Create a config loader that merges default config, JSON file config, and environment variables (env has highest priority).

Set up a basic Express server with a single GET / route that returns a JSON welcome message.

Build /items endpoints: GET all, GET by id, POST create, PUT update, DELETE remove using an in-memory array.

Create a custom middleware that logs method, URL, and response time for each request.

Add an error-handling middleware that catches thrown errors and returns a standardized JSON error response.

Create a helper function wrapAsync that wraps async route handlers and forwards errors to next.

Create a middleware validateCreateItem that ensures POST /items has a non-empty 'name' field.

Create middleware that checks for an API key in headers (x-api-key) and rejects requests if it's missing or incorrect.

Add middleware that verifies a JWT from Authorization: Bearer <token>, decodes user, and attaches it to req.user.

Add pagination support to GET /items using query params page and limit.

Enhance GET /items to support search by name (?q=) and filter by minPrice/maxPrice query params.

Organize routes into versioned routers for /api/v1 and /api/v2, each returning slightly different responses.

Configure Express to serve static files like images, CSS, and client-side JS from a /public directory.

Enable CORS for your API so it can be consumed from a different origin (e.g., React frontend).

Add a catch-all middleware that returns a JSON 404 error for unknown routes.

Create simple in-memory rate-limiting middleware limiting each IP to N requests per minute.

Move /items routes into a separate router module and mount it under /api/items.

Add GET /health and GET /metrics endpoints for monitoring status and basic stats (uptime, request count).

Create a POST /upload endpoint that accepts a single file field 'file' and stores it in an uploads/ folder.

Implement DELETE /items/:id as soft delete (mark isDeleted) and add /admin/items endpoint to include deleted ones.

Expose a /openapi.json endpoint that returns a basic OpenAPI specification for your items API.

Design a basic user document structure for MongoDB including name, email, passwordHash, roles, createdAt.

Insert multiple user documents into a users collection in a single operation.

Query all users that have 'admin' in their roles array.

Query users but return only name and email, excluding _id if needed.

Create a unique index on the email field of users collection so duplicate emails are not allowed.

Create a text index on articles collection covering title and body, then run a search query.

Perform a text search on articles and sort results by relevance score.

Query users whose createdAt is within the last 7 days.

Use aggregation pipeline to count number of users registered per day.

Add an embedded address object inside user documents instead of separate collection.

Design blog posts collection where each post stores a reference (userId) to the author in users collection.

Use aggregation pipeline with $lookup to fetch posts along with author name and email from users.

Implement pagination using skip and limit for a products collection.

Create a compound index on products price and category to speed up queries filtering both.

Update a user's address.city field without replacing the entire address object.

Increment a product's views count by 1 every time it is viewed.

Design a schema & update pattern to track number of views per day for each article.

Query products that are either in categories ['laptop', 'mobile'] OR have price less than 5000.

Mark a document as deleted using isDeleted flag instead of physically removing it, and update queries to ignore deleted docs.

Design how to store comments for posts: either embedded array of comments or separate comments collection with postId, and explain tradeoffs.

Write a SQL query to select all columns from the users table.

Select only name and email from users table where is_active = true.

Write a query to fetch users who are active AND from country = 'India', OR have role = 'admin'.

Write a query to find all users whose name starts with 'Ha' and email contains 'gmail'.

Select the 10 most recently created users ordered by created_at descending.

Write a query to count how many users are there in each country.

Count users per country but only show countries having more than 100 users.

Write a query to list each order with the user's name and email who placed the order.

List all users and their total order_count, including users who have never placed an order.

Using users and orders tables, compute total revenue per user and show only users with revenue > 1000.

Write a query to find all users that have no orders in orders table.

Select all orders whose total_amount is greater than the average order total for all orders.

For each user's orders, compute a running total (cumulative sum) of total_amount ordered by created_at.

Write a CREATE TABLE statement for users with id primary key, email NOT NULL and UNIQUE, created_at NOT NULL.

Design relational schema for orders and order_items tables to avoid data duplication and support multiple items per order.

Write an UPDATE query to set is_active = 0 for users who haven't logged in since 1 year ago.

Delete all rows from password_reset_tokens table where created_at is older than 30 days.

Group orders by date and calculate total revenue per day, sorted by date ascending.

Using order_items and products, find top 5 products by total revenue (quantity * price).

Demonstrate how to transfer money between two accounts: deduct from one, add to another, safely inside a transaction.

Make a card centered vertically & horizontally with padding, rounded corners, and drop shadow.

Create an image gallery using responsive grid columns (2 → 3 → 4 on larger screens).

Style a primary button with hover transition, rounded-full, and focus ring.

Build a sticky top navbar with backdrop blur and shadow on scroll.

Hero with big heading, supporting text, CTA buttons & image — mobile first.

Use Tailwind's dark: modifier to support light/dark UI switch.

Mobile hamburger menu that reveals sidebar panel with animation.

Three pricing cards where middle one visually highlighted.

Create sliding toast message top-right with fade animations.

Cards scale up slightly on hover for visual feedback.

Image darkens with text appearing centered on hover.

Styled input with focus ring and error state under it.

Circular avatar image with a green dot for online presence.

4 responsive stat cards in grid with icons & growth badges.

Glass effect card with backdrop blur and soft border light.

Grey placeholder skeleton shimmer animation for loading cards.

Show hidden text bubble above icon on hover.

Main content + sidebar layout that stacks vertically on mobile.

Horizontal tabs with active styling; content panel hidden via tailwind utilities toggled by JS.

Fixed footer with 3–4 social links styled as icon-only buttons.

Create a basic HTML page that correctly includes Bootstrap CSS and JS and shows a 'Hello Bootstrap' heading.

Create a layout where on mobile content stacks, and on md+ screens it becomes 2 equal columns.

Create a row with 3 cards in columns that are equal height on desktop and stack on mobile.

Build a responsive navbar with brand logo on left and nav links on right that collapse into hamburger on mobile.

Use .active class to highlight the current page link in the navbar and ensure it looks visually different.

Create success/error Bootstrap alerts that can be closed (dismissed) by the user.

Build a modal that opens from a button, contains a simple login form (email/password), and closes with buttons or backdrop.

Create a table that has striped rows, hover effect, and scrolls horizontally on small screens.

Use Bootstrap button variants like primary, outline, danger, and size (sm/lg) for different actions.

Create a centered login card with email/password inputs, using .is-invalid & .invalid-feedback for validation messages.

Design a hero with heading, text, CTA button, and illustrative image using grid and spacing utilities.

Refine a section by using margin, padding, font-size, and text color utilities instead of custom CSS.

Create tabbed content using Bootstrap nav tabs and tab-content sections with fade animations.

Build a testimonial slider using Bootstrap carousel with indicators and controls.

Use Bootstrap pagination component to display page numbers with active state and disabled previous/next.

Implement a toast that appears at bottom-right when a button is clicked, using Bootstrap toast component.

Create an offcanvas sidebar menu that appears from the left when clicking a burger icon.

Show tags or category labels using Bootstrap badges and pill style.

Create a layout with fixed vertical sidebar (left) and scrollable content area (right) using Bootstrap grid & utilities.

Build a contact section with text on left and form on right; on mobile, they stack vertically.

Create a new project folder, initialize a Git repository, add a README.md, and make the first commit.

Modify multiple files, then stage only specific ones, unstage one file, and finally commit selectively.

Follow a simple convention like 'type: short summary' (feat, fix, chore, docs) and write 3 example commits.

Use git log with different options to see compact one-line history, graph view, and filter by author.

Experiment with commit, reset, and checkout, then observe the difference between git log and git reflog.

Practice undoing last commit using git reset --soft, and git revert for already pushed commits.

Create a new feature branch from main, switch to it, make a commit, then switch back.

Create a feature branch, add a commit, then merge it into main and delete the branch.

Intentionally create a merge conflict by editing the same line on two branches, then resolve it and complete the merge.

Create two branches, make separate commits, and then once integrate using merge, and another time using rebase to see the difference in history.

Create a .gitignore file to ignore node_modules, build artifacts, and environment files like .env.

Create an empty repo on GitHub, then add it as a remote, push local main branch, and verify remote is linked.

Clone a public GitHub repository to your machine and run git commands inside it.

Fork an open-source repo on GitHub, clone your fork, create a branch, make a change, push, and open a Pull Request.

Add original repo as upstream remote, fetch changes, and update your main branch to match upstream/main.

Make some changes without committing, stash them, switch branches, then later re-apply the stash.

Create an annotated tag for a release (v1.0.0), list tags, and push tags to GitHub.

Use git blame to see who last changed each line in a file, and git diff to compare versions.

Set up a basic GitHub Actions workflow that runs npm test on every push and pull request to main.

Define a branching strategy using main, develop (optional), and feature/* branches, and document rules for where to commit and how to merge.

Create signup + login + logout + protected routes using JWT and hashed passwords.

Implement access + refresh tokens with expiration & rotation for maximum security.

Add admin role that can manage all users, while normal users can manage only themselves.

Build dashboard cards showing total users, active users, recent signups using charts.

Add Product create, read, update, delete with images & categories.

Upload product images to Cloud storage and store URL in DB.

Send email from Next.js API using SMTP / Resend / EmailJS.

Send OTP to email + allow user to reset password securely.

Add 2FA using TOTP (Google Authenticator) or email OTP.

Fetch more posts on scroll instead of pagination controls.

Support Markdown files as blog posts + dynamic routing.

Add SEO improvements including sitemap generation and meta tags.

Allow real-time messaging with typing indicator & online users list.

Push notification alerts to users on new message & events.

Add checkout, success page, order history saved in DB.

Create full CRUD user system in SQL DB using Prisma ORM.

Join users and their posts + show total posts count.

Containerize backend + frontend with Docker + docker-compose.

Generate pages at build time + revalidate automatically.

Create Todo app with login + user-specific tasks