Daily Coding Challenges & Projects

Frontend Mini Project Challenge

Theme : React Hooks & State Management

Challenge :

"Build a Character Counter using React"

Create a simple React app with a text input and a dynamic character count display. Use useState and explore useEffect for bonus logic like warning on character limits.

Bonus : Add a visual progress bar that fills based on a 200-character limit.

Try it on CodeSandbox (example playground suggestion)

Backend Challenge

Node.js Challenge

Task :

Create a middleware function in Express that logs the request method, URL, and timestamp for every incoming request.

Then, build a simple route (/hello) that returns "Hello from Node.js".

Bonus : Add a query parameter ?name=John so it returns "Hello, John" if name is passed.

Go Challenge :

Task :

Build a simple HTTP server in Go that responds to GET requests at /status with a JSON message like:

{
  "status": "Server is running",
  "time": "2025-05-13T14:30:00Z"
}

Bonus : Use Go's time package to dynamically insert the current server time in RFC3339 format.

Database Query Challenge

Problems on SQL - HR Database :

1. Write a SQL query to find the top 3 departments with the highest average employee salary.
2. Write a SQL query to list all employees who report to a manager that earns less than the employee.

Data Structures & Algorithms Challenge

• Easy:
• Problem : Check if an array is a palindrome (same forward and backward).
• Hint : Compare elements from both ends of the array using two-pointer technique.
• Medium:
• Problem : Find the first non-repeating character in a string.
• Hint : Use a hash map to store frequencies, then iterate the string again.
• Hard:
• Problem : Given an array of integers, find the length of the longest consecutive elements sequence.
• Hint : Use a Set for O(1) lookup and iterate to check sequences only from starting numbers.

Bug of the Day

Language : Node.js ( JavaScript )

Buggy Code:

function fetchData(url) {
  fetch(url)
    .then(response => response.json)
    .then(data => {
      console.log("Data:", data);
    })
    .catch(err => console.error("Error:", err));
}

fetchData("https://api.example.com/data");

Challenge : Find and fix the bug in this code.

📋 Daily Micro-Project

Frontend Focus :

Task :

Build a “Password Strength Indicator” in React

• Shows password strength as weak, medium, or strong.
• Uses useState and optionally useMemo to calculate strength.

Trivia: 5 Fun Facts

1. The first website ever created is still online: info.cern.ch.
2. React was created by Jordan Walke, a Facebook engineer, in 2011.
3. Node.js was initially released in 2009.
4. Go was developed at Google by Robert Griesemer, Rob Pike, and Ken Thompson.
5. JavaScript was created in just 10 days by Brendan Eich.

Tool & Resource of the Day

Tool : React Developer Tools (Chrome Extension)

Inspect component hierarchies, hooks, and props in real-time.

React DevTools :

Resource Roundup :

Top Free Resources to Master React State Management :

• React Docs - State & Lifecycle
• FreeCodeCamp - Hooks Tutorial
• Awesome React GitHub Repo

Interview Question of the Day

Daily Interview Questions

Frontend ( React/JavaScript ) :
1. What is the use of useEffect in React?
2. What are controlled vs uncontrolled components in React?
3. Explain the difference between props and state.
4. What is memoization in React, and how does React.memo() work?

Backend ( Node.js & Go ) :
1. What are middleware functions in Express.js?
2. How does the event loop work in Node.js?
3. What are goroutines in Go?
4. What is the purpose of defer in Go?

Database :
1. What is a foreign key constraint?
2. Explain the difference between WHERE and HAVING.
3. What is normalization in relational databases?

Others :
1. What is the difference between virtual memory and physical memory?
2. What are microservices, and how are they different from monolithic architecture?

Daily Quiz Challenge

Frontend Quiz ( React/JavaScript ) :

1. What does useState return?
• A variable and a loop
• A variable and a setter function
• A component and props
• None of the above
2. Which CSS property controls element stacking order?
• order
• z-index
• position
• stack
3. What will this return?

console.log([..."hello"]);

• ['hello']
• ['h', 'e', 'l', 'l', 'o']
• ['h,e,l,l,o']
• Error

Backend Quiz ( Python, PHP ) :

1. Which module is used to create a server in Node.js?
• express
• http
• server
• node-net
2. What does defer do in Go?
• Immediately calls the function
• Executes the function before main()
• Schedules a function to run after the surrounding function returns
• Skips a function entirely
3. In Node.js, which method is used to read files asynchronously?
• readFileSync
• fs.open
• fs.readFile
• fileReader

Others :

1. Which SQL clause filters grouped rows?
• WHERE
• GROUP
• HAVING
• SELECT
2. What is Docker primarily used for?
• Building UIs
• Hosting Websites
• Containerization
• Code Compilation

Mixed Quiz :

1. JavaScript: What is the result of typeof null?
2. Python: What does list(set([1,2,2,3])) return?
3. SQL: What is the purpose of LIMIT clause?

Weekly Cross-Domain Activities ( May 23 to May 29, 2025 )

API of the Day:

Project: Build a news feed using the NewsAPI.

• Endpoint: https://newsapi.org/v2/top-headlines?country=us
• Display the title, image, and description of each article.

Linux/DevOps Tip :

10 Useful Commands for Monitoring Server Health:

• top, htop, iotop, vmstat, netstat, free -m, df -h, uptime, iostat, dstat

Real-World Project of the Week ( May 23 to May 29, 2025 )

Project of the Week:

Build a "Remote Job Board" with React (Frontend), Node.js (Backend), PostgreSQL (Database).

Collaborative Project:

Contribute to Public APIs GitHub Repo – Add new APIs with proper documentation.

Case Study:

• Analyze how Trello uses drag-and-drop + real-time sync.
• Rebuild a Trello-style kanban board with Vue.js or React + Firebase.