Daily Coding Challenges & Projects

Frontend Mini Project Challenge

HTML, CSS, and JavaScript Focus

Challenge :

Build a Slide-In Sidebar Navigation

• Use HTML, CSS, and JavaScript to create a responsive sidebar menu.
• The sidebar should slide in from the left on a button click.
• Include links with hover effects and close on outside click.

Bonus: Add support for light/dark mode toggle

Backend Challenge

Focus : Swift & TypeScript

Swift ( Vapor Framework )

Task : Build a simple REST API endpoint in Swift using Vapor that returns a JSON list of books with title, author, and year.

TypeScript ( Node.js with Express + TS )

Task : Create a /search endpoint that accepts a query param and returns filtered results from an array of objects. Use TypeScript interfaces to type the data.

Database Query Challenge

Problems on SQL - HR Database :

1. Write a SQL query to list the names of employees who have the same job title as their manager.
2. Write a SQL query to calculate the average salary of employees in each department who have been with the company for more than 5 years.

Data Structures & Algorithms Challenge

• Easy:
• Problem : Given a string, check if it's a palindrome ignoring case and non-alphanumeric characters.
• Hint : Normalize the string using regex and use two-pointer technique.
• Medium:
• Problem : Implement a function to return all unique permutations of a given string.
• Hint : Use backtracking with a visited array or set to handle duplicates.
• Hard:
• Problem : Given an integer array nums, return all the subsequences where the sum is divisible by 7.
• Hint : Use bitmasking to generate all subsequences and filter by sum modulo 7.

Bug of the Day

Language Focus : TypeScript

TypeScript Bug:

Buggy Code:

function greet(user: { name: string, age: number }){
    if(user.age > "18"){
        return "Welcome, " + user.name;
    }
    return "Access denied.";
}

console.log(greet({ name: "Alice", age: 20 }));

Challenge : Fix the TypeScript bug so that the conditional properly checks the user's age.

📋 Daily Micro-Project

TypeScript & Node.js

Task :

Build a TypeScript + Node.js script to read a large JSON file (e.g., users data) in streaming mode and log only users above 30 years old.

Trivia: 5 Fun Facts

1. The first computer bug was a literal moth found in a Mark II computer.
2. Swift was developed by Apple as a safer alternative to Objective-C.
3. TypeScript was released by Microsoft in 2012 to improve JavaScript scalability.
4. Linus Torvalds originally created Git to manage Linux source code.
5. The term "cookie" in web development was coined by Lou Montulli in 1994.

Tool & Resource of the Day

Tool : Postman

Postman is an API development and testing tool.

Why use it? Test REST APIs, automate test collections, and simulate endpoints with mock servers.

Resource Roundup:

Topic : TypeScript Learning

• TypeScript Handbook (official)
• TS Cheat Sheet

Interview Question of the Day

Daily Interview Questions

Frontend :
1. How does JavaScript event loop work?
2. What are CSS variables, and how do they differ from preprocessor variables (e.g., SCSS)?
3. What is the purpose of key prop in React lists?
4. How does the v-for directive in Vue differ from map() in JavaScript?

Backend :
1. What is a closure and how is it used in functional programming (e.g., Swift)?
2. Explain the difference between RESTful APIs and RPC-based APIs.
3. What is hot-reloading in server-side development?
4. How does TypeScript’s type inference system improve code quality?

Database :
1. What is a covering index in SQL?
2. Explain the difference between horizontal and vertical database scaling.
3. What is a correlated subquery?

Others :
1. What’s the role of the kernel in an operating system?
2. Explain the CAP theorem in distributed systems.

Daily Quiz Challenge

Frontend Quiz :

1. What will typeof null return in JavaScript?
• "null"
• "object"
• "undefined"
• "boolean"
2. Which CSS property controls the stacking order?
• z-order
• position
• z-index
• order
3. In React, what does the useEffect hook replace?
• componentWillMount
• componentDidMount
• componentWillUpdate
• All of the above

Backend Quiz :

1. What is the correct way to define a function in TypeScript?
2. In Swift, which keyword is used for optional binding?
3. Which HTTP status code indicates “Created”?
• 200
• 201
• 204
• 301

Database :

1. Which clause groups rows sharing a property in SQL?
• WHERE
• GROUP BY
• HAVING
• ORDER BY

Others :

1. Which command is used to check disk usage in Linux?
• df
• du
• lsblk
• top

Mixed Quiz :

1. Which of the following is NOT a primitive data type in JavaScript?
• String
• Number
• Object
• Boolean

Weekly Cross-Domain Activities ( June 06 to June 12, 2025 )

API of the Day:

OpenWeatherMap API :

Challenge : Create a TypeScript + React component that fetches and displays current temperature and condition for a searched city.

Linux/DevOps Tip :

5 Handy Disk & Memory Commands

• df -h: disk usage
• du -sh *: directory sizes
• free -m: memory usage
• top: process monitoring
• vmstat: system performance

Real-World Project of the Week ( June 06 to June 12, 2025 )

Project of the Week:

Build a Job Listing Board with search, filter by tech stack, and posting forms. Stack: React + Node.js + PostgreSQL

Collaborative Project:

Contribute to dev.to open-source. It’s the engine behind dev.to—built with Ruby on Rails.

Case Study:

Notion Clone UI – Study how Notion handles blocks and dynamic layouts using React.

Instagram Stories Feature

• Built using horizontally swipable carousels
• Preloading, caching, and state transitions

Challenge: Recreate it using React + CSS Transitions.