w3resource

Daily Coding Challenges & Projects


Weekend ( April 19th to 20th )


Frontend Mini Project Challenge

Challenge:

  • Create a responsive image gallery with lightbox effect using HTML, CSS, and Vanilla JS.
  • Features:
    • Grid layout for images
    • Click to open image in full screen with a dark overlay
    • Prev/Next navigation in lightbox

Try in CodePen

Backend Challenge

Scala, R, Swift, TypeScript

    Scala Challenge:

    • Write a function in Scala to group a list of strings by their starting letter.

    R Challenge:

    • Create an R script that reads a CSV file of user data, filters by age > 25, and visualizes the age distribution with ggplot2.

    Swift (Server-side with Vapor) Challenge:

    • Build a basic Vapor route that returns a JSON response { "message": "Hello from Swift backend!" }.

    TypeScript (Node.js + Express) Challenge:

    • Build a REST API endpoint that accepts a POST request to /add-user with a JSON body and logs the user data.

Database Query Challenge

Problems on SQL - HR Database :

  1. Write a query to list employees who have been with the company for more than 5 years and work in the 'IT' department.
  2. Write a query to find departments that have more than 10 employees earning over $70,000.
Structure of HR database :

HR database



Data Structures & Algorithms Challenge

  • Easy:
    • Problem:Problem: Given a list of integers, check if it contains any duplicates.
    • Hint: Use a set to track seen elements.
  • Medium:
    • Problem: Implement a function that rotates a matrix (NxN) 90 degrees clockwise.
    • Hint: Try using transpose and then reversing rows.
  • Hard:
    • Problem: Given a graph as an adjacency list, detect if it contains a cycle using DFS.
    • Hint: Use visited and recursion stack tracking.

Bug of the Day

Scala Bug:


val nums = List(1, 2, 3, 4)
val doubled = nums.map(num => num * 2
println(doubled)

Challenge: Identify and fix the syntax error.

R Bug:


data <- read.csv("data.csv")
print(data[Age > 30])

Challenge: Why does this return an error?

Swift Bug:


let nums = [1, 2, 3, 4]
let result = nums.map { num in return num + 1 }
print(result[5])

Challenge: What's the problem and how can it crash?

TypeScript Bug:


const user = { name: "Alice", age: 30 };
console.log(user["namez"]);

Challenge: What's the issue and how to prevent it with TS features?

📋 Daily Micro-Project

Backend Focus :

Build a rate-limiter middleware in Node.js using TypeScript

  • Limit each IP to 100 requests per 10 minutes.
  • Use express-rate-limit or implement manually with a simple cache (Map + timestamps).

Trivia: 5 Fun Facts

  1. Scala was created by Martin Odersky in 2003.
  2. The name R is partly derived from the first names of its creators (Robert and Ross).
  3. Swift was introduced by Apple in 2014 as a replacement for Objective-C.
  4. TypeScript was created by Microsoft and released in 2012.
  5. The first relational database model was introduced by Edgar F. Codd in 1970.

Tool of the Day

Tool: Prisma

  • Next-gen ORM for Node.js & TypeScript
  • Resource Roundup:

  • Prisma Docs
  • FreeCodeCamp Prisma Tutorial
  • Interview Question of the Day

    Daily Interview Questions

      Frontend :
      1. What is the difference between state and props in React?
      2. How does reactivity work in Vue.js?
      3. Explain the concept of event bubbling in JavaScript.
      4. How can you optimize performance in a React app?
      Backend :
      1. What is the difference between blocking and non-blocking I/O?
      2. How does the actor model in Scala/Akka differ from traditional multithreading?
      3. How can R be used in a backend pipeline for data processing?
      4. How do you handle errors in async/await flows in Node.js?
      Database :
      1. What is the difference between clustered and non-clustered indexes?
      2. What are common normalization forms and why are they important?
      3. How would you design a schema for a hierarchical employee org chart?
      Others :
      1. What is an API Gateway and how does it differ from a reverse proxy?
      2. How do you ensure secure container deployments?

    Daily Quiz Challenge

    Frontend :

    1. Which lifecycle method is used for data fetching in React?
    2. What does the .sync modifier do in Vue?
    3. Which CSS property is used to create a grid layout?

    Backend :

    1. What does await do in TypeScript?
    2. What’s the difference between val and var in Scala?
    3. What function is used in R to read CSV files?

    Database :

    1. Which SQL clause limits the number of rows returned?
      • WHERE
      • GROUP BY
      • LIMIT
      • ORDER BY

    Others :

    1. What is the default port for HTTPS?
      • 21
      • 22
      • 80
      • 443

    Weekly Cross-Domain Activities ( April 18 to 24, 2025 )

    API of the Day:

    Build a currency converter using the ExchangeRate API

    • Fetch live exchange rates
    • User selects currency pair and amount
    • Displays converted amount instantly

    Linux/DevOps Tip:

    10 Commands to Monitor Server Health:

  • top, htop, free -m, df -h, uptime, vmstat, iostat, netstat, dstat, sar.
  • Real-World Project of the Week ( April 18 to 24, 2025 )

    Project of the Week:

      Build a Task Manager App with login, add/edit/delete tasks, and due date reminders

    • Tech Stack Options:
      • React + Node.js + PostgreSQL

    Collaborative Project:

      Open-source GitHub Project: Habit Tracker App** ← let users add habits, track streaks, share progress. Invite community collaboration!

    Case Study:

      How Trello Works Under the Hood

    • Real-time updates using WebSockets
    • Kanban board layout
    • Offline support via IndexedDB
  • Encourage users to clone Trello features in a simplified clone!

  • Previous Daily Coding Challenges & Projects : 04-04-2025   07-04-2025  08-04-2025  09-04-2025  10-04-2025  11-04-2025  14-04-2025  15-04-2025  16-04-2025  17-04-2025

    

    Follow us on Facebook and Twitter for latest update.