w3resource

Daily Coding Challenges & Projects


Thursday


Frontend Mini Project Challenge

React Hooks & State Management :

  • Challenge: Build a React Counter with Undo & Redo Functionality
  • Difficulty Level: Moderate
  • Requirements:
    • Use useState for state management.
    • Implement useReducer to handle undo/redo functionality.
    • Bonus: Store the counter state in localStorage to persist changes.

Backend Challenge

Node.js & Go :

  • Node.js Challenge:
    • Create a simple REST API with Express.js that fetches and updates user profiles stored in an in-memory object.
  • Go Challenge:
    • Write a Go function that reads a CSV file and parses it into a struct without using third-party packages.

Database Query Challenge

Problems on SQL - HR Database :

  1. Find employees who have worked for the company for more than 5 years.
  2. Write a query to find departments where no employees have been hired in the last 1 year.
Sample table: employees
+-------------+-------------+-------------+----------+--------------------+------------+------------+----------+----------------+------------+---------------+
| EMPLOYEE_ID | FIRST_NAME  | LAST_NAME   | EMAIL    | PHONE_NUMBER       | HIRE_DATE  | JOB_ID     | SALARY   | COMMISSION_PCT | MANAGER_ID | DEPARTMENT_ID |
+-------------+-------------+-------------+----------+--------------------+------------+------------+----------+----------------+------------+---------------+
|         100 | Steven      | King        | SKING    | 515.123.4567       | 2003-06-17 | AD_PRES    | 24000.00 |           0.00 |          0 |            90 |
|         101 | Neena       | Kochhar     | NKOCHHAR | 515.123.4568       | 2005-09-21 | AD_VP      | 17000.00 |           0.00 |        100 |            90 |
|         102 | Lex         | De Haan     | LDEHAAN  | 515.123.4569       | 2001-01-13 | AD_VP      | 17000.00 |           0.00 |        100 |            90 |
|         103 | Alexander   | Hunold      | AHUNOLD  | 590.423.4567       | 2006-01-03 | IT_PROG    |  9000.00 |           0.00 |        102 |            60 |
|         104 | Bruce       | Ernst       | BERNST   | 590.423.4568       | 2007-05-21 | IT_PROG    |  6000.00 |           0.00 |        103 |            60 |
|         105 | David       | Austin      | DAUSTIN  | 590.423.4569       | 2005-06-25 | IT_PROG    |  4800.00 |           0.00 |        103 |            60 |
|         106 | Valli       | Pataballa   | VPATABAL | 590.423.4560       | 2006-02-05 | IT_PROG    |  4800.00 |           0.00 |        103 |            60 |
|         107 | Diana       | Lorentz     | DLORENTZ | 590.423.5567       | 2007-02-07 | IT_PROG    |  4200.00 |           0.00 |        103 |            60 |
|         108 | Nancy       | Greenberg   | NGREENBE | 515.124.4569       | 2002-08-17 | FI_MGR     | 12008.00 |           0.00 |        101 |           100 |
|         109 | Daniel      | Faviet      | DFAVIET  | 515.124.4169       | 2002-08-16 | FI_ACCOUNT |  9000.00 |           0.00 |        108 |           100 |
.......

View the table



Data Structures & Algorithms Challenge

  • Easy: Implement a function to check if a string is a palindrome (without using built-in functions).
  • Medium: Write a function to merge two sorted linked lists into one sorted linked list.
  • Hard: Implement Dijkstra’s shortest path algorithm using a priority queue.

Bug of the Day

Node.js & Go Debugging Challenge :

Node.js Bug:


const obj = { a: 1, b: 2 };
console.log(Object.keys(obj).length === obj.size); // What's wrong?

Find and fix the issue!

Go Bug:


package main
import "fmt"
func main() {
    var nums = []int{1, 2, 3}
    nums[3] = 4 // What's the issue here?
    fmt.Println(nums)
}

Find and fix the issue!

📋 Daily Micro-Project

Frontend Focus - React

    Build a custom hook (useFetch) that fetches data from an API and handles loading & error states.

Trivia: 5 Fun Facts

  1. What company originally developed JavaScript?
  2. What does JSX stand for in React?
  3. What is the main advantage of Go's garbage collector?
  4. Who invented Node.js, and in what year?
  5. What is the key difference between React class components and functional components?

Tool of the Day

Tool: Postman – A powerful API development & testing tool.

Why use it? Easily test REST APIs, automate API requests, and debug server responses.

Interview Question of the Day

Daily Interview Questions

    Frontend React: (4 Questions)
    1. Explain the difference between useState and useReducer.
    2. How does useEffect work, and when should you use it?
    3. What are the benefits of using React Context API over props drilling?
    4. How does React.memo help optimize performance?
    Backend (Node.js & Go):
    1. Explain the event loop in Node.js?
    2. What is the difference between goroutines and OS threads in Go?
    3. How does middleware work in Express.js?
    4. What are Go interfaces, and how do they work?
    Database (3 Questions)
    1. What is the difference between a primary key and a unique key?
    2. What is normalization, and why is it important?
    3. Explain the concept of database transactions.
    Others ( OS & DevOps ): (2 Questions)
    1. What is virtualization, and how does it differ from containerization?
    2. How does CI/CD work, and what are its benefits?

Daily Quiz Challenge

Frontend (React & JavaScript) (3 Questions)

  1. What will useState return when called in a functional component?
  2. How can you prevent unnecessary re-renders in React components?
  3. What is the difference between controlled and uncontrolled components?

Backend Node.js & Go (3 Questions)

  1. What is process.nextTick() in Node.js, and when should you use it?
  2. What does the defer keyword do in Go?
  3. How do you handle file uploads in Express.js?

Database & Other Quiz (2 Questions)

  1. Which SQL function is used to find the highest value in a column?
  2. What is a swap file in an operating system?

Weekly Cross-Domain Activities ( April 4 to 10, 2025 )

Task: Hints for Building a Simple Weather App using OpenWeatherMap API

  1. Get an API Key
    • Sign up at OpenWeatherMap and get a free API key.
  1. Choose an HTTP Request Method
    • Use fetch() in JavaScript or requests in Python to get weather data.
  1. API Endpoint Example
  1. Use this URL:
    • https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY&units=metric
    • Replace London with the city name and YOUR_API_KEY with your actual API key
  1. Extract Important Data
    • Parse the JSON response to extract key details like temperature, humidity, and weather description.
  1. Display the Data
    • Show weather details in a simple UI using HTML, CSS, and JavaScript.
    • Example: Display city name, temperature, and weather conditions.
  1. Handle Errors Gracefully
    • Show an error message if the city is not found or the API call fails.
  1. Enhancements (Optional)
    • Allow users to enter any city name.
    • Show weather icons based on conditions.
    • Use geolocation to fetch the user’s current weather.

orgopenweathermap.org

Current weather and forecast - OpenWeatherMap

OpenWeather provides comprehensive weather data services, including current, forecast, and historical weather information. Explore a wide range of APIs for solar radiation, road risk assessment, solar energy prediction, and more, with global coverage and user-friendly access. Ideal for developers and businesses seeking accurate and reliable weather insights.

Real-World Project of the Week ( April 4 to 10, 2025 )

Project: Build a Personal Portfolio Website

Tech Stack: HTML, CSS, JavaScript (Optional: React, TailwindCSS)


Previous Daily Coding Challenges & Projects : 04-04-2025   07-04-2025  08-04-2025  09-04-2025



Follow us on Facebook and Twitter for latest update.