Daily Coding Challenges & Projects

Frontend Mini Project Challenge

React Hooks & State Management

Challenge :

Build a Counter App Using React Hooks

Requirements :

• Use useState for counter state.
• Add buttons to increment, decrement, and reset the counter.
• Use useEffect to log counter changes.

Bonus : Persist counter state to localStorage.

Backend Challenge

Node.js & Go

Challenge : Create a REST API that handles user registration and login

Node.js (Express) or Go (Gin/Gorilla)

Requirements:

• Register: Accept username and password, hash password before saving
• Login: Validate credentials and return JWT token

Bonus: Add middleware to protect a route using the JWT

Database Query Challenge

Problems on SQL - HR Database :

1. Write a SQL query to find the top 3 highest-paid employees in each department.
2. Write a SQL query to list employees who have never been promoted (i.e., same job title since joining).

Data Structures & Algorithms Challenge

• Easy:
• Problem : Find the maximum element in a rotated sorted array.
• Hint : Use binary search, consider mid-element conditions.
• Medium:
• Problem : Group an array of strings into anagrams.
• Hint : Use a hash map with sorted word as key.
• Hard:
• Problem : Implement a Trie (Prefix Tree) with insert, search, and startsWith methods.
• Hint : Use nested dictionaries or nodes with child pointers.

Bug of the Day

Node.js & Go

Node.js Bug

Buggy Code:

const express = require("express");
const app = express();

app.get("/greet", (req, res) => {
  const name = req.query.name || "Guest";
  res.send("Hello, " + name);
});
app.listen(3000);
console.log("Server started");

Challenge : The server throws an error on running. Identify and fix it to correctly greet the user by name.

📋 Daily Micro-Project

Frontend Focus :

Task :

Create a Responsive Navigation Bar using React

• Include logo, navigation links, and a hamburger menu.
• Collapse into a mobile menu on smaller screens.

Bonus : Animate the menu toggle with CSS transitions.

Trivia: 5 Fun Facts

1. JavaScript was created in just 10 days by Brendan Eich.
2. Node.js allows running JS server-side.
3. Go was created at Google in 2009.
4. React was open-sourced by Facebook in 2013.
5. The concept of hooks in React was introduced in version 16.8.

Tool & Resource of the Day

Tool : Postman

A powerful tool to test RESTful APIs and monitor requests.

https://www.postman.com

Interview Question of the Day

Daily Interview Questions

Frontend ( React Focus ) :
1. What is the difference between useEffect and useLayoutEffect?
2. How does state management work in React with useReducer?
3. What are controlled vs uncontrolled components in React?
4. What causes React components to re-render?

Backend ( Node.js & Go ) :
1. How does the event loop work in Node.js?
2. Explain middleware in Express.js.
3. How does Go handle concurrency with goroutines and channels?
4. What is the role of defer in Go?

Database ( SQL ) :
1. What is a clustered vs non-clustered index?
2. How do you optimize a slow SQL query?
3. What are the ACID properties of a database?

Others :
1. What is a race condition and how can it be avoided?
2. What is the purpose of a reverse proxy in a web architecture?

Daily Quiz Challenge

Frontend Quiz ( React ) :

1. Which hook allows you to persist state between renders?
• useMemo
• useEffect
• useState
• useRef
2. What does the second argument of useEffect represent?
• Event handler
• Cleanup function
• Dependency array
• JSX element
3. Which of the following triggers a re-render in React?
• useRef change
• useState change
• console.log
• None of the above

Backend Quiz ( Node.js & Go ) :

1. Which module is used to create a server in Node.js?
• express
• http
• url
• fs
2. What does goroutine mean in Go?
• A data type
• A function pointer
• A lightweight thread
• A type of loop
3. How do you install a Node package locally?
• npm init
• npm install
• node install
• npm get

Database :

1. Which SQL clause is used with aggregate functions to filter rows?
• WHERE
• JOIN
• HAVING
• GROUP

Mixed Quiz :

1. Which of the following is a compiled language?
• PHP
• JavaScript
• Go
• Python

Weekly Cross-Domain Activities ( June 13 to June 19, 2025 )

API of the Day:

OpenWeatherMap API :

Use the REST Countries API

Task : Build a React app that lets users search a country and shows its flag, capital, and region.

Linux/DevOps Tip :

Top 5 Linux commands for server monitoring:

• top
• htop
• vmstat
• iotop
• netstat -tulpn

Real-World Project of the Week ( June 13 to June 19, 2025 )

Project of the Week:

Build a Task Manager App (Frontend + Backend + DB)

• Use React for UI
• Node.js + Express for API
• PostgreSQL for data persistence

Collaborative Project:

Contribute to the open-source Habit Tracker project on GitHub: github.com/codecrafters-io/habit-tracker.

Case Study:

How Notion Manages Real-Time Collaboration:

• WebSockets, Operational Transform (OT), and React for UI syncing.

Try replicating a collaborative notes editor using Firebase Realtime DB