Daily Coding Challenges & Projects

Frontend Mini Project Challenge

Theme : React Hooks & State Management

Challenge :

Build a "Like Button" React component with the following features:

Requirements :

• Toggle between Liked/Unliked.
• Show count of total likes.
• Use useState for managing the like state.
• Add a prop to start with a custom initial count

function LikeButton({ initialCount = 0 }) {
  const [liked, setLiked] = React.useState(false);
  const [count, setCount] = React.useState(initialCount);

  const toggleLike = () => {
    setLiked(!liked);
    setCount(prev => liked ? prev - 1 : prev + 1);
  };

  return (
    <button onClick={toggleLike}>
      {liked ? '💖 Liked' : '🤍 Like'} ({count})
    </button>
  );
}

Try It Online : CodeSandbox Starter

Backend Challenge

Language Focus : Node.js & Go

Node.js Task :

Create an Express API endpoint that receives a POST request with a list of numbers and returns:

• Sum
• Average
• Highest and Lowest numbers

Go Task :

Write a Go program that accepts a list of domain names from a file and performs DNS lookups using net.LookupHost.

Database Query Challenge

Problems on SQL - HR Database :

1. Find employees with the highest salary in each department
2. Find employees who have not received a promotion in the last 3 years.

Data Structures & Algorithms Challenge

• Easy:
• Problem :Implement a function to reverse a string without using built-in reverse().
• Hint :Use two-pointer approach.
• Medium:
• Problem : Find the longest substring without repeating characters in a given string.
• Hint :Use sliding window + set.
• Hard:
• Problem :Implement Kruskal's algorithm to find the Minimum Spanning Tree of a graph.
• Hint :Use Union-Find for cycle detection.

Bug of the Day

Node.js / Go

Node.js Bug

Buggy Code:

const fs = require('fs');
fs.readFile('file.txt', 'utf8', (err, data) => {
  if (err) throw err;
  console.log(data.toUpperCase());
});
// What if file.txt doesn't exist?

Challenge : Make it fail-safe using try-catch or error-handling middleware.

📋 Daily Micro-Project

Frontend :

Task :

Create a React Tooltip component that appears on hover over any text and supports:

• Custom content
• Positioning (top, bottom, left, right)
• Delay in showing/hiding

Optional :Use setTimeout, useEffect, and useRef.

Trivia: 5 Fun Facts

1. Node.js was created by Ryan Dahl in 2009.
2. React was originally developed by Facebook in 2013.
3. Go (Golang) was created at Google by Rob Pike and others.
4. JSON stands for JavaScript Object Notation.
5. Express.js is a minimalist web framework built on top of Node.js.

Tool & Resource of the Day

Tool : Insomnia

Description : A powerful open-source API client for REST, GraphQL, and gRPC. Known for its clean UI and advanced debugging tools. Great for API design, testing, and collaboration.

Insomnia REST Client

Resource Roundup :

• You Might Not Need jQuery – A curated list of common JavaScript equivalents for jQuery methods.
• JavaScript30 by Wes Bos – 30-day vanilla JS coding challenge.
• Go Doc – Official documentation site for Go packages and libraries.

Interview Question of the Day

Daily Interview Questions

Frontend ( React-Focused ) :
1. What are controlled vs uncontrolled components in React?
2. What is the use of useReducer?
3. How does React reconcile changes in the DOM?
4. What are React portals?

Backend ( Node.js / Go ) :
1. Explain the event loop in Node.js.
2. What is the purpose of middleware in Express?
3. How do goroutines work in Go?
4. How is concurrency different from parallelism?

Database :
1. What is normalization in databases?
2. Difference between UNION and UNION ALL.
3. What is an index, and how does it affect performance?

Others :
1. What is a load balancer?
2. How do container registries like Docker Hub work?

Daily Quiz Challenge

Frontend ( React ) :

1. What hook is used to perform side effects?
• useState
• useEffect
• useMemo
2. What’s the purpose of key in React list rendering?
3. What does useRef help you do?

Backend ( Node.js & Go ) :

1. What module is used to create HTTP servers in Node.js?
2. Which Go keyword is used to create goroutines?
3. In Go, what does defer do?

Others :

• Database :What is a foreign key used for?
• Concept :What is horizontal vs vertical scaling?

Weekly Cross-Domain Activities ( July 18 to July 24, 2025 )

API of the Day:

JokeAPI : Build a random joke app with categories and flags (NSFW filter).

Linux/DevOps Tip :

Use htop, iotop, and iftop to monitor CPU, disk, and network usage on Linux servers.

Real-World Project of the Week ( July 18 to July 24, 2025 )

Project of the Week:

Build a Task Manager App

• Use React + Express + MongoDB
• Support CRUD: Tasks with due dates, priority, and status
• Implement filters (Today, Completed, Priority)

Collaborative Project:

Start a GitHub repo for this task manager and invite others to contribute (issues, PRs, README).

Case Study:

Analyze the GitHub UI/UX — Can you recreate the repository page using frontend tools?