Daily Coding Challenges & Projects

Frontend Mini Project Challenge

React - Hooks & State Management

Challenge :

Build a Step Counter App using React Hooks (useState).

Your app should include:

• Input to set the step value (e.g., +2, -3).
• Buttons: Add Step, Subtract Step, and Reset.
• Display of the current count.
• Disable "Subtract Step" if the count would go below 0.

Try it Here: [CodeSandbox Starter]

Backend Challenge

Node.js & Go

Node.js Task :

Task : Build a RESTful API using Express that returns a list of products in JSON format.

Requirements :

• GET /products – returns an array of objects with id, name, and price.
• Use Express.js with no database (mock data only).

Go Task :

Task : Write a Go program that sets up a simple HTTP server and responds with “Hello, Go backend!” on /hello.

Database Query Challenge

Problems on SQL - HR Database :

1. Find all employees who have not changed departments in the last 2 years.
2. Find departments that have more than 5 employees currently assigned.

Data Structures & Algorithms Challenge

• Easy:
• Problem : Check if a string is a pangram (contains all 26 letters of the alphabet).
• Hint : Use a Set to track unique characters.
• Medium:
• Problem : Rotate a 2D matrix (NxN) 90 degrees clockwise in-place.
• Hint : Transpose + reverse rows.
• Hard:
• Problem : Design a Least Recently Used (LRU) Cache using a HashMap and Doubly Linked List.
• Hint : HashMap for O(1) access, DLL for order tracking.

Bug of the Day

Node.js & Go

Node.js Bug :

Buggy Code:

const nums = [1, 2, 3];
const result = nums.forEach(num => {
  return num * 2;
});
console.log(result); // What's wrong?

Fix : Fix the bug and make sure it returns the correct transformed array.

Go Bug :

Buggy Code:

package main
import "fmt"
func main() {
    var x int
    if x = 5 {
        fmt.Println("x is", x)
    }
}

Challenge : Identify and fix the syntax error.

📋 Daily Micro-Project

Frontend :

Challenge :

Create a custom toggle switch using HTML, CSS, and React.

• Toggle between “ON” and “OFF” states.
• Use useState to manage state.
• Style it to look like a sliding switch.

Trivia: 5 Fun Facts

1. JavaScript was originally developed in 10 days by Brendan Eich in 1995.
2. The first computer bug was an actual moth trapped in a relay.
3. The name “Python” was inspired by Monty Python’s Flying Circus, not the snake.
4. Go (Golang) was created at Google in 2009 by Robert Griesemer, Rob Pike, and Ken Thompson.
5. Git was created by Linus Torvalds, the creator of Linux, in 2005.

Tool & Resource of the Day

Tool : React Developer Tools

Use this Chrome/Firefox extension to inspect React component hierarchies in the browser Developer Tools.

Resource Roundup ( React State Management ) :

• React useState Hook - MDN
• React Docs - State and Lifecycle

Interview Question of the Day

Daily Interview Questions

Frontend ( React & JS ) :
1. What is the difference between props and state in React?
2. How does useEffect differ from componentDidMount?
3. What is closure in JavaScript and where is it useful?
4. What is the purpose of the key prop in React lists?

Backend :
1. How does Node.js handle asynchronous code with its event loop?
2. What is middleware in Express.js?
3. What are goroutines in Go?
4. Explain the difference between concurrency and parallelism.

Database :
1. What is a foreign key and why is it important?
2. How does a GROUP BY clause work?
3. What is a subquery, and where is it used?

Others :
1. What is the difference between process and thread?
2. What is CI/CD and how is it implemented?

Daily Quiz Challenge

Frontend ( React & JS ) :

1. What does useState return?
• A variable only
• A setter function only
• A state variable and a setter function
2. What’s the output of this JS snippet?

console.log(1 + '2' + 3);

• 6
• '123'
• '33'
3. Which method is used to stop event bubbling in JS?
• event.stopPropagation()
• event.preventDefault()
• event.stopBubble()

Backend ( Node.js & Go ) :

1. In Node.js, fs.readFile() is:
• Blocking
• Non-blocking
2. Which HTTP method is idempotent?
• POST
• GET
• PUT
3. In Go, what keyword starts a goroutine?
• run
• go

Database ( SQL ) :

1. Which clause filters groups in SQL?
• WHERE
• HAVING

Mixed Quiz :

1. Which React hook allows side-effects?
• useState
• useEffect
2. What does SQL JOIN do?
3. What's the default port for HTTP?
• 8080
• 443
• 80

Weekly Cross-Domain Activities (Updated) ( May 16 to May 22, 2025 )

API of the Day:

Use the NASA Astronomy Picture of the Day (APOD) API

Challenge :

Build a mini web app that fetches and displays the daily astronomy picture from NASA's APOD API with its title and description.

• Challenge Add-on: Add a date picker to view past pictures.
• NASA APOD API Documentation

Linux/DevOps Tip :

Monitor Disk Usage with du and ncdu

Commands :

• Use du -sh * to get a summary of disk usage by folder.
• Use ncdu (if installed) for a more interactive and visual exploration of what's eating up space in your directories.

Real-World Project of the Week (Updated) ( May 16 to May 22, 2025 )

Project of the Week:

Build a Blog Platform with Markdown Support

• Use a backend like Node.js, Flask, or Django.
• Use a markdown parser (like marked in JS or markdown in Python) to render posts.
• Add support for categories, tags, and featured images.

Bonus : Allow login functionality to create/edit/delete posts.

Collaborative Project:

Create a “Dev Tools Hub” Web App.

• A multi-tool app offering features like:
• JSON formatter
• UUID generator
• Base64 encoder/decoder
• Regex tester
• Organize collaboration via GitHub and assign different tools to team members.

Case Study:

How Trello Works — Kanban Task Boards.

• Study how Trello organizes cards, lists, and boards.
• Build a mini Kanban board with drag-and-drop functionality using Sortable.js or native drag-and-drop API.
• Focus on data modeling and client-server sync logic.