Daily Coding Challenges & Projects

Frontend Mini Project Challenge

React Hooks & State Management

Task :

React Theme Switcher Component

Challenge :

• Build a React component that toggles between "Light Mode" and "Dark Mode".
• Use useState to manage the current theme.
• Apply corresponding styles dynamically using conditional classNames.

Bonus : Save the selected theme in localStorage and restore it on page reload.

Backend Challenge

Node.js & Go

Node.js Challenge :

Title : Express.js Route Rate Limiting

Task :

• Create an Express server with a /login endpoint.
• Implement a basic rate limiter that allows only 5 requests per minute per IP.

Hint : Use middleware and Map to track timestamps per IP.

Database Query Challenge

Problems on SQL - HR Database :

1. List employees who joined in the last 6 months and have a salary above the department average.
2. Write a SQL query to display the employee name, department, and manager name for each employee.

Validate Submit Reset

Data Structures & Algorithms Challenge

• Easy:
• Problem : Reverse an Integer
• Hint : Watch out for negative numbers and overflow.
• Medium:
• Problem : Find the First Unique Character in a String
• Hint : Use a frequency map and index tracking.
• Hard:
• Problem : Trapping Rain Water Problem
• Hint : Two-pointer approach or precompute maxLeft and maxRight arrays.

Bug of the Day

Node.js & Go

Node.js Bug :

Buggy Code:

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

app.get('/', (req, res) => {
  res.send('Welcome');
});

app.listen(3000);
console.log('Server running');

Challenge : Why is "Server running" printed before the server starts? Where should it be?

GO Bug :

Buggy Code:

package main

import "fmt"

func main() {
	var names = []string{"Alice", "Bob"}
	for i := 0; i <= len(names); i++ {
		fmt.Println(names[i])
	}
}

Challenge : Spot the runtime error and correct the logic.

📋 Daily Micro-Project

Frontend React :

Project :

Build a Live Character Counter Input Box

• Create an input field and display live character count below.
• Limit characters to 150 and show warning when 90% full.

Use useState and dynamic styles.

Trivia: 5 Fun Facts

1. React’s Virtual DOM is inspired by functional programming principles.
2. Go was originally created to improve compilation times.
3. JavaScript was originally named Mocha.
4. Node.js uses the V8 JavaScript engine developed by Google.
5. JSX is not required in React – it's syntactic sugar over React.createElement.

Tool & Resource of the Day

Tool : Vite

A blazing fast frontend build tool for modern web development.

• Why use it?
• Lightning-fast cold starts.
• Instant Hot Module Replacement (HMR).
• Native support for ES Modules and TypeScript.
• Great for React, Vue, and Svelte apps.
• Official Site : https://vitejs.dev

Resource Roundup :

State Management in React (Beyond useState)

1. Redux Essentials Tutorial (Official Docs)

https://redux.js.org/tutorials/essentials/part-1-overview-concepts

2. Jotai – Atomic State Management for React

https://jotai.org/

Minimal and scalable alternative to Redux or Context API.

3. React Global State Management Comparison (Blog)

https://blog.logrocket.com/comparing-react-global-state-management/

Covers Context, Redux, Jotai, Recoil, Zustand, and more.

Interview Question of the Day

Daily Interview Questions

Frontend ( React Hooks & State ) :
1. What does useEffect do and how does dependency array affect it?
2. Explain the difference between useMemo and useCallback.
3. How would you prevent unnecessary re-renders in a React component?
4. Why is it a bad practice to update state directly in React?

Backend ( Node.js & Go ) :
1. What is middleware in Express.js?
2. How do goroutines differ from OS threads?
3. Explain the Event Loop in Node.js.
4. What are Go channels and how do they help with concurrency?

Database ( SQL ) :
1. What is a correlated subquery and when would you use it?
2. What are stored procedures and what are their advantages?
3. Explain what a database view is and when it should be used.

Others :
1. What is the difference between virtualization and containerization?
2. What does the top command in Linux show?

Daily Quiz Challenge

Frontend Quiz ( React & JavaScript ) :

1. What does useRef() return by default?
• Mutable object
• DOM element
• State variable
• Undefined
2. What is the output?

const [count, setCount] = useState(0);
setCount(prev => prev + 1);
setCount(prev => prev + 1);

• 0
• 1
• 2
• 3
3. What causes an infinite re-render in React?
• No return in render
• Updating state inside render
• Using useEffect with missing dependency
• Using useMemo without return

Backend Quiz ( Node.js / Go ) :

1. What is the default port for Express.js apps?
• 8080
• 3000
• 5000
• 4000
2. In Go, which package is used for HTTP handling?
• os
• http
• fmt
• net/http
3. What is req.params used for in Express?
• Body data
• URL query
• Route parameters
• Headers

Database :

1. Which key ensures uniqueness in a table?
• Foreign Key
• Primary Key
• Index
• Group Key

Mixed Quiz :

1. Which of the following is not a JavaScript data type?
• Symbol
• Float
• Undefined
• Object

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