Daily Coding Challenges & Projects

Frontend Mini Project Challenge

CSS Animation Effects:

Challenge:

• Design a CSS-only animated loader that mimics a typing dots animation (like three dots pulsing in sequence).

Hint:

• Use @keyframes, opacity, and animation-delay to create the typing effect. Try using inline-block circles and staggered animations.

Try it Online:

• Use CodePen or JSFiddle to test and play around instantly!

Backend Challenge

Java / Kotlin

Task (Java):

• Write a Java program that reads a large file line by line using BufferedReader and counts how many times a specific word appears.

Task (Kotlin):

• Create a simple REST API using Ktor that returns the current server time in JSON format.

Database Query Challenge

Problems on SQL - HR Database :

1. Write a SQL query to list employees whose job title is ‘Sales Representative’ and who earn more than the department average.
2. Write a SQL query to display the second highest salary in each department.

Structure of HR database :

Validate Submit Reset

Data Structures & Algorithms Challenge

• Easy:
• Problem: Check if a given string is a palindrome.
• Hint: Compare characters from both ends moving towards the center.
• Medium:
• Problem: Given a rotated sorted array, find the index of the smallest element.
• Hint: Use binary search with modified conditions.
• Hard:
• Problem: Implement an LFU (Least Frequently Used) Cache.
• Hint: Combine HashMap with a frequency list.

Bug of the Day

Language: Java

Go Bug:

public class Main {
    public static void main(String[] args) {
        String[] items = {"apple", "banana", "orange"};
        for (int i = 0; i <= items.length; i++) {
            System.out.println(items[i]);
        }
    }
}

Challenge: Can you spot and fix the bug that causes a runtime error?

📋 Daily Micro-Project

Backend Focus

• Task: Create a basic user authentication system using Java + Spring Boot with in-memory data (no database).
• Endpoints: /login, /register, /logout.

Trivia: 5 Fun Facts

1. The first computer bug was an actual moth found in a computer in 1947.
2. Kotlin was designed to interoperate fully with Java.
3. The "J" in Java doesn’t stand for anything—it was named after coffee.
4. CSS was first proposed in 1994 by Håkon Wium Lie.
5. Git was created by Linus Torvalds in just 10 days.

Tool of the Day

Tool: Hoppscotch

A lightweight, fast, and open-source alternative to Postman for API testing and debugging.

Resource Roundup:

Hoppscotch Docs — Official documentation to get started

Intro to Hoppscotch on YouTube — Quick video tutorials for beginners

GitHub Repository — Contribute or explore the code

Interview Question of the Day

Daily Interview Questions

Frontend :
1. What is the difference between == and === in JavaScript?
2. How does CSS specificity work?
3. What are media queries in CSS and how are they useful?
4. How do you optimize performance in a large React application?

Backend :
1. Explain the JVM and how Java bytecode is executed.
2. What is a memory leak in Java? How do you detect it?
3. What are coroutines in Kotlin and how do they work?
4. What is the difference between Spring MVC and Spring WebFlux?

Database :
1. What is a correlated subquery?
2. What is normalization? Explain its types.
3. How does a clustered index differ from a non-clustered index?

Others :
1. How does the Java Virtual Machine (JVM) manage memory?
2. What is CI/CD in DevOps?

Daily Quiz Challenge

Frontend :

1. What is the correct syntax to select all elements in CSS?
• #p
• .p
• p
• *p*
2. What does opacity: 0; do in CSS?
• Hides the element and removes it from the layout
• Hides the element but keeps space
• Makes the element semi-transparent
• Sets background color to white
3. What is the output of: console.log(typeof NaN);
• "undefined"
• "number"
• "NaN"
• "object"

Backend :

1. What does the final keyword do in Java?
• Makes a variable constant
• Makes a class abstract
• Forces method overriding
• None of the above
2. What is the correct way to declare a lambda in Kotlin?
• { x -> x + 1 }
• (x) => x + 1
• fun(x): x + 1
• lambda x: x + 1
3. What HTTP status code represents "Created"?
• 200
• 201
• 400
• 404

Database & Other Quiz :

1. What SQL clause is used to group rows sharing the same value?
• WHERE
• ORDER BY
• GROUP BY
• HAVING
2. Which of the following is a container orchestration tool?
• Docker
• Kubernetes
• Git
• SSH

Mixed Quiz :

1. What does git reset --hard do?
• Resets staging but keeps working directory
• Resets both staging and working directory to last commit
• Commits changes with a hard flag
• Only resets the remote repo

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.