Daily Coding Challenges & Projects

Frontend Mini Project Challenge

React Hooks & State Management

Challenge:

Build a "Character Counter App" in React.

• Use useState to track text input and count characters in real-time.
• Add a "Max Length" (e.g., 100) and show remaining characters.

Bonus :Color the counter text red when nearing the limit.

Try it on CodeSandbox or StackBlitz.

Backend Challenge

Node.js & Go

Node.js Task :

Problem:

Create an Express.js route /api/random-user that:

• Fetches a random user from randomuser.me,
• Stores the response in a local JSON file (user.json),
• Sends the stored user back in the API response.

Go Task:

Problem:

Write a Go program that:

• Reads a CSV of user data (users.csv),
• Parses it into structs,
• Serves the data via an HTTP server on /users in JSON format.

Database Query Challenge

Problems on SQL - HR Database :

1. Write a SQL query to list employees who have not been promoted in the last 3 years.
2. Write a query to find departments that have fewer than 5 employees currently.

Data Structures & Algorithms Challenge

• Easy:
• Problem: Write a function to check if a string is a palindrome (ignoring spaces and case).
• Hint: Normalize with .replace() and .toLowerCase().
• Medium:
• Problem: Given an array of integers, find the length of the longest subarray with a sum of zero.
• Hint: Use a hashmap to store cumulative sums.
• Hard:
• Problem: Implement a function to find the minimum spanning tree (MST) of a weighted undirected graph using Kruskal’s algorithm.
• Hint: Use Union-Find data structure.

Bug of the Day

Node.js / Go

Node.js

Code:

const fs = require('fs');

fs.writeFile('output.txt', 'Hello World', () => {
  console.log('File written!');
});
console.log('Done writing...');

Challenge:Why does "Done writing..." appear before "File written!"? How can we make sure the order is correct?

📋 Daily Micro-Project

Frontend Focus:

Challenge :

Create a React color theme switcher with two buttons:

• Light Mode / Dark Mode
• Apply background & text color changes using useState and conditional CSS classes.

Trivia: 5 Fun Facts

1. The first website was launched by Tim Berners-Lee in 1991.
2. JavaScript was created in just 10 days by Brendan Eich.
3. Go (Golang) was developed at Google in 2009.
4. React was created by Jordan Walke at Facebook.
5. The original purpose of Git was to manage the Linux Kernel codebase.

Tool of the Day

Tool : React Developer Tools

Helps inspect React component hierarchies in browser DevTools.

Resource Roundup:

• useHooks.com – A collection of reusable React hooks.
• React Cheat Sheet (PDF)
• React Patterns – Design patterns in React.

Interview Question of the Day

Daily Interview Questions

Frontend ( React-Focused ): :
1. What is the purpose of useEffect in React?
2. Explain the concept of controlled vs uncontrolled components.
3. How do you lift state up in React?
4. What is the difference between useMemo and useCallback?

Backend (Node.js & Go):
1. What is the event loop in Node.js?
2. How does Go handle concurrency using goroutines?
3. Explain middleware in Express.js.
4. How does error handling differ between Go and Node.js?

Database :
1. What is a foreign key constraint and why is it important?
2. Explain the difference between clustered and non-clustered indexes.
3. What is the purpose of the HAVING clause in SQL?

Others :
1. What is virtual memory in operating systems?
2. What is CI/CD and how does it relate to DevOps?

Daily Quiz Challenge

Frontend ( React & JS ) :

1. What will this return?

const [count, setCount] = useState(0);
setCount(count + 1);
setCount(count + 1);
console.log(count);

• 0
• 1
• 2
• undefined
2. Which hook is used to manage side effects in React?
• useRef
• useMemo
• useEffect
• useContext
3. What does this CSS do?

.fade {
  opacity: 0;
  transition: opacity 2s ease-in;
}

Backend ( Node.js & Go ) :

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

Others :

1. DB: Which SQL clause is used to group rows sharing a property?
2. General: Which command is used to build a Docker image?

Mixed Quiz :

1. (Frontend) What does useState return?
2. (Backend) What is middleware in Express?
3. (DB) What does LEFT JOIN return if no match is found?

Weekly Cross-Domain Activities ( April 25 to May 01, 2025 )

API of the Day:

Challenge:

Use the Bored API to create a simple app that suggests fun activities when you're bored.

Linux/DevOps Tip:

Useful Commands for File & Directory Management and Troubleshooting

Here are 10 powerful and often underused commands for managing files and debugging issues in Linux systems:

1. stat filename – View detailed metadata about a file (last access, inode, etc.)
2. ls -lhS – List files by size in human-readable format
3. tree -L 2 – Display a directory structure up to 2 levels deep
4. find /path -type f -size +100M – Find files larger than 100MB
5. ncdu – A disk usage analyzer with a simple interactive UI (install required)
6. lsof +D /path/to/dir – List open files in a directory
7. inotifywait -m /some/dir – Watch for real-time file changes in a directory (from inotify-tools)
8. file filename – Determine file type and encoding
9. tail -F /var/log/syslog – Live-follow system logs with file rotation support
10. watch -n 1 'df -h / && free -h' – Watch disk and memory stats refresh every second

Real-World Project of the Week ( April 25 to May 01, 2025 )

Project of the Week:

Build a Personal Expense Tracker App

• Tech Stack Options:
• TypeScript + Express + PostgreSQL + React

Collaborative Project:

• Contribute to EddieHub Open Source Projects
• Join issues tagged good first issue on GitHub!

Case Study:

How is Notion Built?

• Uses React + TypeScript frontend
• Backend with C++/Rust hybrid for performance
• Offline-first architecture

Challenge: Try replicating a basic note-taking component!