Daily Coding Challenges & Projects

Frontend Mini Project Challenge

React Hooks & State Management:

Challenge:

• Build a simple counter component in React using Hooks. The counter should increment, decrement, and reset to zero.

Hint:

• Utilize the useState Hook to manage the counter's state. Remember to import it from React.

Try it Online:

• Experiment with this challenge on platforms like CodeSandbox or StackBlitz.

Backend Challenge

Node.js & Go

Node.js Challenge:

• Create a RESTful API using Express.js that manages a list of tasks. Implement endpoints to add, retrieve, update, and delete tasks.
• Hint: Use Express.js for routing and middleware. Store tasks in an in-memory array for simplicity.

Go Challenge:

• Develop a simple HTTP server in Go that serves static files from a directory.
• Hint: Use the net/http package and the http.FileServer function to serve files.

Database Query Challenge

Problems on SQL - HR Database :

1. Retrieve the names of employees who have not received a salary increase in the last two years.
• Hint: Use the employees and salary_history tables, filtering based on the increase_date.
2. Find the departments with more than five employees.
• Hint: Use GROUP BY on the department_id in the employees table and apply HAVING COUNT(*) > 5.

Structure of HR database :

Validate Submit Reset

Data Structures & Algorithms Challenge

• Easy:
• Problem:Implement a function to reverse a string.
• Hint: Convert the string to a slice of runes, reverse it, and convert back to a string.
• Medium:
• Problem: Design a stack that supports push, pop, top, and retrieving the minimum element in constant time.
• Hint: Use two stacks: one for all elements and another for tracking minimums.
• Hard:
• Problem: Given a list of intervals, merge all overlapping intervals.
• Hint: Sort the intervals based on start times, then iterate and merge as needed.

Bug of the Day

Node.js & Go

Node.js Bug:

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

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

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

Issue: The server might not start properly.

Challenge: Identify and fix the issue.

Go Bug:

go
CopyEdit
package main

import "fmt"

func main() {
    var numbers = [3]int{1, 2, 3}
    fmt.Println(numbers[3])
}

Issue: The program panics at runtime.

Challenge: Identify and fix the issue.

📋 Daily Micro-Project

Database Focus

• Task: Create a responsive navigation bar that collapses into a hamburger menu on smaller screens.
• Hint: Use CSS media queries and JavaScript to toggle the menu visibility.

Trivia: 5 Fun Facts

1. The term "bug" in programming originated when a moth caused a malfunction in an early computer.
2. The first computer programmer was Ada Lovelace in the 19th century.
3. The first high-level programming language was Fortran, developed in the 1950s.
4. The original name of Java was Oak.
5. The first computer virus was created in 1986 and was called Brain.

Tool of the Day

Tool: React Developer Tools

A powerful Chrome and Firefox extension that allows you to inspect the React component hierarchy, view props/state, and debug apps easily.

Resource Roundup:

React DevTools Official Guide

Chrome Extension - React Developer Tools

Interview Question of the Day

Daily Interview Questions

Frontend :
1. What are the differences between controlled and uncontrolled components in React?
2. How does the virtual DOM work in React?
3. Explain the concept of lifting state up in React.
4. What is the purpose of keys in React lists?

Backend :
1. What is the event loop in Node.js?
2. How does Go handle concurrency?
3. Explain the concept of middleware in Express.js.
4. What are goroutines in Go?

Database :
1. What is normalization? Explain its types.
2. What is the difference between clustered and non-clustered indexes?
3. Explain ACID properties in databases.

Others :
1. What is the difference between a process and a thread?
2. Explain the concept of containerization.

Daily Quiz Challenge

Frontend :

1. Which hook is used to manage state in a functional React component?
• useEffect
• useState
• useContext
• useReducer
2. What does CSS stand for?
• Cascading Style Sheets
• Computer Style Sheets
• Creative Style Sheets
• Colorful Style Sheets
3. Which HTML tag is used to define an unordered list?
• <ol>
• <ul>
• <li>
• <list>

Backend :

1. Which of the following is a NoSQL database?
• MySQL
• PostgreSQL
• MongoDB
• Oracle
2. What does REST stand for?
• Representational State Transfer
• Remote Execution Standard Transfer
• Representational Standard Transfer
• Remote State Transfer
3. In Go, what keyword is used to start a goroutine?
• start
• goroutine
• go
• run

Database & Other Quiz :

1. Which SQL clause is used to filter records?
• WHERE
• HAVING
• SELECT
• ORDER BY
2. What is the main purpose of Docker?
• Version control
• Containerization
• Continuous integration
• Deployment

Weekly Cross-Domain Activities ( April 11 to 17, 2025 )

API of the Day:

Integrate NASA’s Astronomy Picture of the Day (APOD) API.

• Challenge: Integrate NASA’s APOD API to fetch and display the Astronomy Picture of the Day.
• API URL: api.nasa.gov/
• Steps to Implement:
1. Get an API Key – Sign up on NASA’s website to obtain a free API key.
2. Fetch Data – Use fetch() (JavaScript) or requests (Python) to retrieve the latest image.
3. Display the Image & Description – Show the image along with its title and explanation.
4. Bonus Features:
• Add a date picker to fetch past images.
• Implement dark mode for better UX.
• Allow users to download images or share them on social media.

• Tech Stack Options:
• Frontend: JavaScript (React/Vue) for fetching and displaying data.
• Backend (Optional): Node.js/Python backend to cache results and reduce API calls.

Linux/DevOps Tip:

Monitor server performance using htop and vmstat.

Why? Monitoring system performance helps in identifying CPU/memory bottlenecks.

Using htop (Interactive Process Viewer)

• Installation:

sudo apt install htop   # Debian/Ubuntu
sudo yum install htop   # RHEL/CentOS

• Command:

htop

• Features:
• Displays CPU, RAM, Swap usage in real-time.
• Shows running processes, sorted by CPU/memory.
• Allows killing processes directly.
• Use F5 for tree view, F9 to kill a process.

Using vmstat (System Performance Metrics)

• Command:

vmstat 5 10

• 5: Update every 5 seconds.
• 10: Run 10 updates and stop.
• Metrics Explained:
• r (run queue) – Number of processes waiting to run.
• b (blocked) – Processes blocked on I/O.
• swpd – Swap memory usage.
• us, sy, id – User, system, and idle CPU time.
• si, so – Swap-in, swap-out activity.

Pro Tip:

• Combine htop and vmstat with iostat for deeper disk performance analysis.
• Use tmux to keep monitoring running even after disconnecting from SSH.

Real-World Project of the Week ( April 11 to 17, 2025 )

Project of the Week: Build a Personal Task Manager App (Frontend + Backend + Database)

Goal: Develop a simple but functional task manager where users can add, update, delete, and mark tasks as completed.

Tech Stack Options:

• Frontend: React, Vue.js, or Svelte for a dynamic UI.
• Backend: Node.js with Express, Django (Python), or Spring Boot (Java) for API handling.
• Database: PostgreSQL, MongoDB, or Firebase for data storage.

Features to Implement:

• User Authentication: Allow users to sign up/login using email & password (or OAuth).
• Task Management: Users can create, edit, and delete tasks.
• Task Status Updates: Mark tasks as completed/incomplete.
• Due Dates & Reminders: Allow users to set due dates and get notifications.
• Categories & Filters: Organize tasks by priority or category.
• Dark Mode & Responsive Design: Ensure mobile compatibility.

Bonus Features:

• Add a calendar view for better visualization.
• Implement speech-to-text for quick task creation.
• Allow users to drag & drop tasks to change priority.

APIs to Use:

• Google Calendar API (for reminders).
• Web Push Notifications (for task reminders).

Collaborative Project: Open-Source Expense Tracker using React & Node.js

Goal: Build a fully functional open-source expense tracker that logs and categorizes daily expenses.

Tech Stack:

• Frontend: React + TailwindCSS for a sleek UI.
• Backend: Node.js with Express + JWT for authentication.
• Database: MongoDB (NoSQL) for flexibility or PostgreSQL (SQL) for structured data.

Core Features:

• User Authentication: Secure login & signup with JWT.
• Expense Logging: Users can add daily expenses with categories.
• Charts & Analytics: Visualize spending with graphs (Recharts/D3.js).
• Export Data: Users can download expense reports in CSV format.
• Multi-Currency Support: Convert expenses into different currencies.

Bonus Features:

• Connect with Plaid API to fetch transactions from banks.
• Add AI-based spending insights (e.g., detect high spending trends).
• Implement PWA (Progressive Web App) for offline tracking.

Open Source Contribution:

• Host on GitHub: Encourage contributions (features, bug fixes).
• Use GitHub Projects & Issues: Manage development tasks efficiently.
• Create a Wiki/Docs: Guide contributors on setting up the project.

Case Study: How Netflix Optimizes Streaming Using Microservices

Overview:

Netflix, the world’s largest streaming platform, handles millions of concurrent users while delivering high-quality video streaming. It achieves this using a microservices architecture running on AWS.

Key Technologies Used:

• Microservices: Each function (authentication, recommendations, video encoding) runs as an independent service.
• AWS (Amazon Web Services): Netflix uses EC2, S3, Lambda, and DynamoDB for scalable cloud operations.
• CDN (Content Delivery Network): Netflix caches videos in Open Connect Appliances (OCA) placed worldwide to reduce latency.
• Dynamic Adaptive Streaming: Uses MPEG-DASH & HLS to adjust video quality in real-time based on internet speed.
• Chaos Engineering: Netflix runs "Chaos Monkey" to simulate failures and improve system resilience.

Lessons for Developers:

• Design for Scalability: Use microservices instead of a monolithic approach.
• Optimize Performance: Utilize caching & CDNs to reduce response time.
• Fault Tolerance: Simulate failures in production to test system robustness.
• Data-Driven Personalization: Netflix's recommendation engine is powered by big data & AI models analyzing user behavior.