Daily Coding Challenges & Projects

Frontend Mini Project Challenge

Vue.js Components:

Challenge:

• Create a reusable NotificationToast.vue component that auto-dismisses after 3 seconds and supports different message types (success, error, warning).

Hint:

• Use props to accept type and message, v-if or v-show for display, and setTimeout() in mounted() for dismissal.

Try it Online:

• Test your component on CodeSandbox or Vue SFC Playground

Backend Challenge

Python, PHP

Task (Python):

• Write a script that monitors a directory for changes (new file creation or file deletion) and logs the events in a log.txt file.
• Hint: Use watchdog or os.listdir() with polling for change detection.

Task (PHP):

• Create a simple class BankAccount that supports deposit, withdrawal, and balance checking. Throw an exception if withdrawal exceeds balance.

Database Query Challenge

Problems on SQL - HR Database :

1. Write a SQL query to find employees who have been with the company for more than 10 years.
2. Write a query to return the top 3 departments with the highest average salary.

Structure of HR database :

Validate Submit Reset

Data Structures & Algorithms Challenge

• Easy:
• Problem:Write a function to find the second largest number in an array.
• Hint: Traverse once to find the max, again for second max.
• Medium:
• Problem: Implement a MinStack class with push(), pop(), top(), and getMin() in O(1) time.
• Hint: Use an auxiliary stack to keep track of mins.
• Hard:
• Problem: Given an array of integers and a target sum, find all unique quadruplets that sum to the target.
• Hint: Sort + Two pointers inside two loops (4Sum variant).

Bug of the Day

Python, PHP

Python Bug:

def multiply_list(lst):
    for i in lst:
        result *= i
    return result

print(multiply_list([1, 2, 3, 4]))

Challenge: What's wrong? Fix it.

PHP Bug:

<?php
function divide($a, $b) {
    if($b = 0) {
        return "Cannot divide by zero.";
    }
    return $a / $b;
}
echo divide(10, 0);
?>

Challenge: Find the bug and fix the logic.

📋 Daily Micro-Project

Database Focus

• Task: Identify a slow-performing SQL query (use EXPLAIN) and optimize it by adding proper indexes and avoiding unnecessary joins or subqueries.
• Bonus: Compare before/after execution times.

Trivia: 5 Fun Facts

1. The first computer virus was called Creeper, written in 1971.
2. PHP originally stood for "Personal Home Page."
3. Vue.js was created by Evan You after working at Google.
4. PostgreSQL started as "Ingres" at UC Berkeley in the 1980s.
5. Guido van Rossum named Python after “Monty Python's Flying Circus,” not the snake!

Tool of the Day

Tool: Fiddler

A powerful web debugging proxy for logging HTTP(s) traffic.

Resource Roundup:

Fiddler Documentation

Free course: Debug Web Traffic Like a Pro with Fiddler (YouTube)

Interview Question of the Day

Daily Interview Questions

Frontend : Vue.js Focus
1. What are Vue.js lifecycle hooks?
2. Explain the role of v-model in Vue.js.
3. How does Vue.js reactivity system work?
4. What is the difference between computed and methods in Vue.js?

Backend : Python, PHP
1. What is the Global Interpreter Lock (GIL) in Python?
2. How do you handle exceptions in PHP?
3. Explain generators in Python with an example.
4. What are traits in PHP?

Database :
1. What is normalization and why is it important?
2. Explain the difference between HAVING and WHERE.
3. What are ACID properties in database systems?

Others :
1. What is a cron job?
2. How does Git branching strategy help in collaboration?

Daily Quiz Challenge

Frontend : Vue.js

1. What directive is used for conditional rendering in Vue?
• v-if
• v-for
• v-bind
• v-model
2. Which Vue lifecycle hook runs after the component is mounted?
• created
• mounted
• beforeMount
• destroyed
3. What is the purpose of key in Vue list rendering?

Backend (Python & PHP) :

1. What’s the output of print(0.1 + 0.2 == 0.3) in Python?
2. Which PHP function is used to include a file only once?
• require
• include_once
• include
• require_once
3. What does yield do in Python?

Database & Other Quiz :

1. Which SQL keyword is used to rename a column or table?
2. What does the command git stash do?

Mixed Quiz :

1. Frontend: What does the ref attribute do in Vue?
2. Backend: How is exception handling done in Python?
3. Database: What does the DISTINCT keyword do?

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.