coding exercises in React, Angular etc - realestateexplorer/relatedToCh GitHub Wiki

create coding exercises in React

Of course! Here is a set of React coding exercises, broken down by difficulty level. Each exercise focuses on specific core concepts.

• Setup: You can use an online code editor like CodeSandbox or StackBlitz for a zero-config start. Alternatively, set up a local project using Vite (npm create vite@latest) for a fast, modern development environment.
• Process: Try to solve each exercise on your own first. If you get stuck, look at the "Concepts to Use" for a hint. The "Bonus Challenge" is there to push you further.
• Focus on Why: Don't just copy-paste code. Understand why a particular hook (useState, useEffect) or pattern is used.

These exercises cover the absolute basics: components, props, state, and event handling.

Goal: Understand components and props.

• Concepts to Use: Functional Components, JSX, Props.

• Task:

  1. Create a component named Greeting.
  2. This component should accept a name prop.
  3. It should render a <h1> tag with the text "Hello, [name]!".
  4. In your main App component, use the Greeting component and pass it your name.

• Example Usage in App.js:

  function App() {
    return <Greeting name="Alice" />;
  }

• Bonus Challenge: Create another component called UserDetails that takes an object prop like { name: 'Bob', age: 30 } and displays the details in a paragraph.

Goal: Understand state and event handling.

• Concepts to Use: useState hook, Event Handling (onClick).

• Task:

  1. Create a component named Counter.
  2. It should display a number (the count) and a button.
  3. The number should start at 0.
  4. When the user clicks the button, the count should increase by 1.

• Bonus Challenge: Add two more buttons: one to decrease the count (but not below 0) and another to reset it to 0.

Goal: Understand conditional rendering.

• Concepts to Use: useState, Conditional Rendering (Ternary operator or &&).

• Task:

  1. Create a component named ToggleVisibility.
  2. It should have a button that says "Show/Hide Text".
  3. Below the button, there is a paragraph of text.
  4. When the component first renders, the text should be hidden.
  5. When the button is clicked, the text should appear. If clicked again, it should disappear.

• Bonus Challenge: Instead of a single paragraph, make it toggle an "Accordion" item with a title and content.

Goal: Understand rendering lists from an array.

• Concepts to Use: useState with an array, .map() method, key prop.

• Task:

  1. Create a component named TodoList.
  2. In your component's state, store an array of to-do items (e.g., ['Learn React', 'Build a project', 'Go for a walk']).
  3. Render this array as an unordered list (<ul>), where each to-do item is a list item (<li>).
  4. Remember to give each list item a unique key.

• Bonus Challenge: Add an input field and a button to allow users to add new items to the to-do list.

These exercises introduce forms, side effects (data fetching), and state management patterns.

Goal: Understand how to handle user input with controlled components.

• Concepts to Use: useState for form fields, Handling onChange events.

• Task:

  1. Create a LoginForm component.
  2. It should contain two input fields: one for email and one for password.
  3. The state of these inputs should be "controlled" by your React component's state.
  4. Add a "Submit" button.
  5. When the form is submitted, console.log an object containing the current email and password. Prevent the default form submission behavior.

• Bonus Challenge: Add simple validation. If the password is less than 8 characters long when the user tries to submit, display an error message below the input field.

Goal: Understand how to perform side effects, like fetching data.

• Concepts to Use: useEffect hook, useState for data and loading states, fetch API.

• Task:

  1. Use a free public API, like the JSONPlaceholder Users API.
  2. Create a UserList component.
  3. When the component mounts, use useEffect to fetch the list of users from the API.
  4. While the data is being fetched, display a "Loading..." message.
  5. Once the data is fetched, display the list of users' names in an unordered list.

• Bonus Challenge: Add an error state. If the API call fails (you can test this by using a broken URL), display a "Failed to fetch users." message.

Goal: Understand global state management with the Context API.

• Concepts to Use: createContext, useContext, Provider components.

• Task:

  1. Create a ThemeContext that will provide a theme value ('light' or 'dark') and a function to toggle it.
  2. Wrap your main App component in a ThemeProvider.
  3. Create a ThemeToggleButton component that uses useContext to access the toggle function and change the theme.
  4. Create a HomePage component that uses useContext to access the current theme value. It should change its background color and text color based on the theme.

• Bonus Challenge: Use localStorage to save the user's theme preference so that it persists even after they refresh the page.

These exercises focus on more complex state, performance, and application structure.

Goal: Understand how to work with derived state and optimize performance.

• Concepts to Use: useState, useMemo.

• Task:

  1. Start with the UserList component from Exercise 6.
  2. Add a search input field above the list of users.
  3. As the user types into the search field, the list of users should filter in real-time to only show users whose names include the search text (case-insensitive).
  4. The filtering logic should not cause the component to re-fetch the data.

• Bonus Challenge: Wrap the filtering logic in a useMemo hook. This ensures that the list is only re-filtered when the original user list or the search term changes, not on other re-renders. This is a key performance optimization.

Goal: Understand complex state logic with useReducer.

• Concepts to Use: useReducer hook.

• Task:

  1. Refactor the TodoList from Exercise 4 (with the "add" functionality).
  2. Instead of useState, manage the list's state using useReducer.
  3. Your reducer function should handle actions like ADD_TODO, DELETE_TODO, and TOGGLE_TODO_COMPLETED.
  4. Implement buttons for deleting a to-do and for marking a to-do as completed (e.g., by adding a line-through style).

• Bonus Challenge: Add an "edit" functionality. When an "Edit" button is clicked on a to-do, it should become an input field, allowing the user to change its text.

Goal: Understand how to create a multi-page application.

• Concepts to Use: A routing library like React Router.

  • You will need to install it: npm install react-router-dom

• Task:

  1. Create a small application with three "pages": a Home page, an About page, and a Users page.
  2. Set up routes for /, /about, and /users.
  3. Create a navigation bar with links that allow the user to switch between these pages without a full page reload.
  4. The /users page should render the UserList component you built in Exercise 6.

• Bonus Challenge: Create a dynamic route /users/:id. When a user clicks on a name in the UserList, it should navigate to their specific detail page, fetch only that user's data from https://jsonplaceholder.typicode.com/users/:id, and display all their details (name, email, phone, etc.).

create coding exercises in React with solutions

Of course! Here is a set of React coding exercises with solutions, structured by difficulty. Each solution includes the code and an explanation of the core concepts.

You can use an online code editor like CodeSandbox or StackBlitz to work on these without any local setup. Just paste the code into the App.js file.

Goal: Understand useState for managing state and onClick for handling events.

• Task: Create a component with a number display and two buttons. One button increments the count, and the other decrements it.

Solution: Counter.js

import React, { useState } from 'react';

function Counter() {
  // 1. Initialize state with useState
  //    'count' is the state variable (its current value is 0)
  //    'setCount' is the function to update it
  const [count, setCount] = useState(0);

  // 2. Create functions to handle clicks
  const handleIncrement = () => {
    // We use a function inside setCount to get the most recent state
    setCount(prevCount => prevCount + 1);
  };

  const handleDecrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return (
    <div>
      <h1>Counter</h1>
      {/* 3. Display the current state */}
      <p>Current Count: {count}</p>
      {/* 4. Attach event handlers to buttons */}
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

export default Counter;

Explanation:

1. useState(0): This hook declares a state variable named count. Its initial value is 0. It returns an array with two elements: the current state value (count) and a function to update it (setCount).
2. Event Handlers: The handleIncrement and handleDecrement functions call setCount to change the value of count. Using a function (prevCount => ...) is a safe way to update state that depends on its previous value.
3. Rendering: The current value of count is displayed inside the <p> tag using curly braces {}.
4. onClick: This attribute attaches our functions to the button's click event. When a button is clicked, the corresponding function runs, updates the state, and React re-renders the component to show the new count.

Goal: Understand conditional rendering to show or hide elements.

• Task: Create a component with a button and a paragraph of text. Clicking the button should toggle the visibility of the text.

Solution: ToggleVisibility.js

import React, { useState } from 'react';

function ToggleVisibility() {
  // 1. State to track visibility, initialized to true
  const [isVisible, setIsVisible] = useState(true);

  const handleToggle = () => {
    // 2. Update state to the opposite of its current value
    setIsVisible(prevIsVisible => !prevIsVisible);
  };

  return (
    <div>
      <h1>Toggle Visibility</h1>
      <button onClick={handleToggle}>
        {isVisible ? 'Hide' : 'Show'} Text
      </button>

      {/* 3. Conditional rendering using the && operator */}
      {isVisible && <p>This is the text you can toggle!</p>}
    </div>
  );
}

export default ToggleVisibility;

Explanation:

1. useState(true): We use a boolean state isVisible to control whether the text is shown. It starts as true.
2. setIsVisible(!prevIsVisible): The handleToggle function flips the boolean value. If isVisible is true, it becomes false, and vice-versa.
3. Conditional Rendering: The line {isVisible && <p>...</p>} is a common React pattern. In JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false. React doesn't render false, so the paragraph only appears on the screen when isVisible is true. We also use a ternary operator on the button's text to make it dynamic.

Goal: Understand how to manage form inputs using state (controlled components).

• Task: Create a login form with an email input, a password input, and a submit button. When submitted, log the form data to the console.

Solution: LoginForm.js

import React, { useState } from 'react';

function LoginForm() {
  // 1. Create state for each form input
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (event) => {
    // 2. Prevent the default form submission behavior (page reload)
    event.preventDefault();

    // 3. Log the current state values
    console.log('Form Submitted:', { email, password });
    alert(`Logged in with Email: ${email}`);

    // Optional: Clear the form after submission
    setEmail('');
    setPassword('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>Login Form</h1>
      <div>
        <label>Email: </label>
        <input
          type="email"
          // 4. Connect the input's value to state
          value={email}
          // 5. Update state whenever the input changes
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
      <div>
        <label>Password: </label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <button type="submit">Login</button>
    </form>
  );
}

export default LoginForm;

Explanation:

1. State for Inputs: Each input field has its own piece of state (email, password). This is the "single source of truth."
2. event.preventDefault(): In the handleSubmit function, this is crucial. It stops the browser from its default action of reloading the page when a form is submitted.
3. onSubmit: This event handler is placed on the <form> element, not the button. It triggers the handleSubmit function.
4. value={email}: This "controls" the input. The input's displayed value is always what's in the React state.
5. onChange: This function runs every time the user types in the input. e.target.value contains the current text in the input box, which we use to update our state with setEmail. This completes the loop: user types -> onChange fires -> state updates -> input value changes.

Goal: Understand the useEffect hook for performing side effects like API calls, and manage loading/error states.

• Task: Fetch a list of users from the JSONPlaceholder API when the component mounts. Display a "Loading..." message while fetching, and the list of user names when done.

Solution: UserList.js

import React, { useState, useEffect } from 'react';

function UserList() {
  // 1. State for users, loading status, and errors
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 2. useEffect to fetch data when the component mounts
  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setUsers(data); // 3. Set data in state
      } catch (error) {
        setError(error); // 4. Set error in state
      } finally {
        setLoading(false); // 5. Set loading to false in any case
      }
    };

    fetchUsers();
  }, []); // 6. Empty dependency array means this effect runs only once

  // 7. Conditional rendering based on state
  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {/* 8. Map over the users array to render a list */}
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

Explanation:

1. Multiple States: We track three things: the users data (an array), the loading status (a boolean), and any potential error.
2. useEffect: This hook runs code after the component has rendered. It's perfect for side effects like data fetching.
3. Async Function: We use an async/await function inside useEffect for cleaner asynchronous code.
4. Error Handling: The try...catch block is essential for handling network errors. If an error occurs, we store it in the error state.
5. finally Block: This code runs whether the try block succeeded or failed. It's the perfect place to set loading to false.
6. Dependency Array []: An empty array tells React to run this effect only once, after the initial render. This prevents an infinite loop of fetching.
7. Conditional Rendering: Before rendering the list, we check the loading and error states to display the appropriate message to the user.
8. .map() and key: We render the users array using .map(). The key={user.id} prop is crucial for React to efficiently update the list.

Goal: Understand derived state and performance optimization with the useMemo hook.

• Task: Build on the UserList component. Add a search input field. As the user types, the list of users should filter to show only those whose names include the search term.

Solution: UserSearch.js

import React, { useState, useEffect, useMemo } from 'react';

function UserSearch() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  // 1. Add state for the search term
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        const data = await response.json();
        setUsers(data);
      } catch (error) {
        console.error("Failed to fetch users", error);
      } finally {
        setLoading(false);
      }
    };
    fetchUsers();
  }, []);

  // 2. Use useMemo to calculate the filtered list
  // This calculation only re-runs when 'users' or 'searchTerm' changes
  const filteredUsers = useMemo(() => {
    if (!searchTerm) {
      return users; // Return all users if search is empty
    }
    return users.filter(user =>
      user.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [users, searchTerm]); // 3. Dependency array for useMemo

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h1>User Search</h1>
      {/* 4. Controlled input for the search term */}
      <input
        type="text"
        placeholder="Search by name..."
        value={searchTerm}
        onChange={e => setSearchTerm(e.target.value)}
      />
      <ul>
        {/* 5. Render the MEMOIZED filtered list */}
        {filteredUsers.length > 0 ? (
          filteredUsers.map(user => <li key={user.id}>{user.name}</li>)
        ) : (
          <p>No users found.</p>
        )}
      </ul>
    </div>
  );
}

export default UserSearch;

Explanation:

1. searchTerm State: We add a new piece of state to hold the value of the search input.
2. useMemo: This is the key to this solution. useMemo is a hook that memoizes a calculated value. This means it will only re-run the expensive filtering calculation if one of its dependencies changes.
3. useMemo Dependencies: The dependency array [users, searchTerm] tells useMemo to re-calculate filteredUsers only when the original users array changes (e.g., after the initial fetch) or when the searchTerm changes (as the user types). If the component re-renders for any other reason, it will use the previously cached result, saving performance.
4. Controlled Input: The search input is a standard controlled component, updating the searchTerm state onChange.
5. Render Filtered List: We map over filteredUsers instead of the original users array. This ensures only the matching users are displayed.

create coding exercises in Angular with solutions

Of course! Here is a set of coding exercises for Angular, complete with solutions and explanations. They are structured by difficulty to help learners progress from fundamental concepts to more advanced patterns.

• Setup: The easiest way to work on these is to use an online IDE like StackBlitz. It provides a full Angular environment in your browser. Alternatively, you can use the Angular CLI to create a local project (ng new my-angular-app).
• Process: For each exercise, try to build the solution yourself first. The goal is to understand the "why" behind each concept. If you get stuck, review the solution and the explanation.

These exercises focus on components, data binding, and basic directives.

Goal: Understand component properties and event binding.

• Task: Create a component that displays a count. It should have two buttons: one to increment the count and one to decrement it.

Solution: counter.component.ts and counter.component.html

counter.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
})
export class CounterComponent {
  // 1. Define a property to hold the state
  count = 0;

  // 2. Define methods to change the state
  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

counter.component.html

<h2>Counter</h2>

<!-- 3. Display the count property using interpolation -->
<p>Current Count: {{ count }}</p>

<!-- 4. Bind the click event to the component's methods -->
<button (click)="increment()">Increment</button>
<button (click)="decrement()">Decrement</button>

Explanation:

1. Component Property: In the .ts file, count = 0; declares a class property. This property holds the state for our component.
2. Methods: The increment() and decrement() methods contain the logic to modify the count property.
3. String Interpolation {{ }}: In the HTML, {{ count }} is one-way data binding. It displays the current value of the count property from the component class.
4. Event Binding ( ): (click)="increment()" is event binding. It listens for the click event on the button and calls the increment() method in the component class whenever it occurs. Angular's change detection then automatically updates the view.

Goal: Understand structural directives (*ngFor, *ngIf) and two-way data binding ([(ngModel)]).

• Task: Create a component to manage a to-do list. It should display a list of tasks, and have an input field and a button to add new tasks to the list.

Setup: To use [(ngModel)], you must import FormsModule in your module.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <-- Import FormsModule

import { AppComponent } from './app.component';
// ... other components

@NgModule({
  declarations: [AppComponent /*, ...*/],
  imports: [
    BrowserModule,
    FormsModule // <-- Add FormsModule to imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Solution: todo-list.component.ts and todo-list.component.html

todo-list.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html',
})
export class TodoListComponent {
  // 1. Property to hold the list of tasks
  tasks = ['Learn Angular', 'Build a project', 'Deploy the app'];

  // 2. Property to bind to the input field
  newTask = '';

  addTask() {
    // 3. Add the new task if it's not empty
    if (this.newTask.trim()) {
      this.tasks.push(this.newTask);
      this.newTask = ''; // Clear the input field
    }
  }

  removeTask(index: number) {
    this.tasks.splice(index, 1);
  }
}

todo-list.component.html

<h2>To-Do List</h2>

<div>
  <!-- 4. Two-way data binding for the input -->
  <input type="text" [(ngModel)]="newTask" placeholder="Add a new task">
  <button (click)="addTask()">Add Task</button>
</div>

<!-- 5. Use *ngIf to show a message if the list is empty -->
<p *ngIf="tasks.length === 0">Your to-do list is empty!</p>

<!-- 6. Use *ngFor to loop through and display the tasks -->
<ul>
  <li *ngFor="let task of tasks; let i = index">
    {{ task }}
    <button (click)="removeTask(i)">Remove</button>
  </li>
</ul>

Explanation:

1. State: The tasks array holds the list data, and newTask holds the value from the input field.
2. [(ngModel)]: This is two-way data binding. It combines property binding [value]="newTask" and event binding (input)="newTask = $event.target.value" into one. The input's value is always in sync with the newTask property.
3. addTask(): This method pushes the new task into the tasks array and then clears the input field.
4. *ngIf: This is a structural directive. It adds or removes the <p> element from the DOM based on the condition tasks.length === 0.
5. *ngFor: This directive iterates over the tasks array. For each task in the array, it creates a new <li> element. We also get the index (let i = index) to know which item to remove.

Goal: Understand how to pass data from a parent to a child (@Input) and emit events from a child to a parent (@Output).

• Task: Refactor the To-Do list. Create a TaskItemComponent that is responsible for displaying a single task and its "Remove" button. The TodoListComponent will be the parent, passing data down and listening for remove events.

Solution: Parent (todo-list) and Child (task-item) components

todo-list.component.ts (Parent)

import { Component } from '@angular/core';

@Component({
  selector: 'app-todo-list',
  templateUrl: './todo-list.component.html', // The HTML will be updated
})
export class TodoListComponent {
  tasks = ['Learn components', 'Learn directives', 'Master services'];
  newTask = '';

  addTask() {
    if (this.newTask.trim()) {
      this.tasks.push(this.newTask);
      this.newTask = '';
    }
  }

  // 1. This method will be triggered by the child's event
  handleRemove(taskToRemove: string) {
    this.tasks = this.tasks.filter(task => task !== taskToRemove);
  }
}

todo-list.component.html (Parent)

<h2>To-Do List (with Child Components)</h2>
<div>
  <input type="text" [(ngModel)]="newTask" placeholder="Add a new task">
  <button (click)="addTask()">Add</button>
</div>
<ul>
  <!-- 2. Loop and pass data to the child component -->
  <app-task-item
    *ngFor="let currentTask of tasks"
    [taskName]="currentTask"
    (remove)="handleRemove($event)">
  </app-task-item>
</ul>

task-item.component.ts (Child)

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-task-item',
  template: `
    <li>
      {{ taskName }}
      <!-- 4. Emit the event on click -->
      <button (click)="emitRemoveEvent()">Remove</button>
    </li>
  `
})
export class TaskItemComponent {
  // 3. @Input allows the parent to pass data IN
  @Input() taskName: string = '';

  // 3. @Output allows this component to send events OUT
  @Output() remove = new EventEmitter<string>();

  emitRemoveEvent() {
    // We emit the name of the task to be removed
    this.remove.emit(this.taskName);
  }
}

Explanation:

1. Parent Logic: The parent (TodoListComponent) now has a handleRemove method that expects the task's name. It no longer needs to know about the index.
2. Passing Data: In the parent's HTML, [taskName]="currentTask" uses property binding to pass the task string down to the taskName property of the TaskItemComponent.
3. @Input and @Output:
   • In the child, @Input() taskName decorates a property, marking it as a target for data from the parent.
   • @Output() remove = new EventEmitter<string>() creates a new event emitter. The child can use this to send data (in this case, a string) back up to the parent.
4. Emitting an Event: When the "Remove" button in the child is clicked, emitRemoveEvent() is called, which in turn calls this.remove.emit(this.taskName).
5. Listening for the Event: Back in the parent's HTML, (remove)="handleRemove($event)" listens for the remove event from the child. When it fires, it calls handleRemove(), and the emitted value (this.taskName) is automatically passed in as $event.

Goal: Understand how to use Services for business logic, HttpClient for API requests, and the async pipe for handling Observables.

• Task: Create a UserListComponent that fetches user data from JSONPlaceholder. Use a UserService to handle the HTTP request. Display a loading message until the data arrives.

Setup: Import HttpClientModule in your app.module.ts.

app.module.ts

import { HttpClientModule } from '@angular/common/http'; // <-- Import

@NgModule({
  imports: [
    // ... other modules
    HttpClientModule // <-- Add to imports
  ],
  // ...
})
export class AppModule { }

Solution: user.service.ts, user-list.component.ts, and user-list.component.html

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

// Define an interface for the User data structure
export interface User {
  id: number;
  name: string;
  email: string;
}

@Injectable({
  providedIn: 'root' // 1. Makes the service a singleton available app-wide
})
export class UserService {
  private apiUrl = 'https://jsonplaceholder.typicode.com/users';

  // 2. Inject HttpClient via the constructor
  constructor(private http: HttpClient) { }

  // 3. The method returns an Observable of User array
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }
}

user-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { UserService, User } from './user.service'; // Adjust path as needed

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
})
export class UserListComponent implements OnInit {
  // 4. Define a property to hold the Observable
  users$!: Observable<User[]>;

  // 5. Inject the UserService
  constructor(private userService: UserService) { }

  ngOnInit(): void {
    // 6. Assign the Observable from the service to the component property
    this.users$ = this.userService.getUsers();
  }
}

user-list.component.html

<h2>User List from API</h2>

<!-- 7. Use the async pipe to subscribe and get data -->
<ul *ngIf="users$ | async as users; else loading">
  <li *ngFor="let user of users">
    {{ user.name }} ({{ user.email }})
  </li>
</ul>

<!-- 8. Define a loading template -->
<ng-template #loading>
  <p>Loading users...</p>
</ng-template>

Explanation:

1. @Injectable({providedIn: 'root'}): This decorator marks the class as a service and tells Angular's dependency injection system how to provide it. providedIn: 'root' means a single instance of this service is created for the entire application.
2. Dependency Injection: The UserService requests an instance of HttpClient in its constructor. Angular automatically provides it.
3. Observable: HttpClient methods do not return data directly. They return an Observable, which is a stream of data that can be subscribed to.
4. users$!: In the component, we declare a property users$. The $ suffix is a common convention for properties that hold an Observable. The ! tells TypeScript that we will definitely initialize it later (in ngOnInit).
5. ngOnInit: This is a lifecycle hook that runs once after the component is initialized. It's the perfect place to make initial data requests.
6. async Pipe: This is the magic part. The async pipe in the template automatically subscribes to the users$ Observable.
   • While waiting for the data, it returns null.
   • Once the data arrives, it triggers change detection and provides the data.
   • It automatically unsubscribes when the component is destroyed, preventing memory leaks.
7. *ngIf ... as users: This syntax lets us subscribe with the async pipe and store the resulting array in a template variable named users, which we can then use in the *ngFor.
8. else loading: The *ngIf is also paired with an else clause. If users$ | async is null (because data hasn't arrived yet), it will render the <ng-template> named #loading.

create coding exercises in SQL with solutions

Of course! Here is a set of SQL coding exercises with solutions, designed for learning and practice. The exercises are structured by difficulty and use a common e-commerce database schema, which we will define first.

All exercises will be based on the following four tables. You can run this setup code in any SQL environment (like MySQL, PostgreSQL, SQL Server, or an online tool like DB Fiddle).

Schema:

• Customers: Stores customer information.
• Products: Stores product information.
• Orders: Stores order header information, linked to a customer.
• Order_Items: A linking table that stores the specific products and quantities for each order.

SQL Setup Code:

-- Create Tables
CREATE TABLE Customers (
    customer_id INT PRIMARY KEY,
    first_name VARCHAR(50),
    last_name VARCHAR(50),
    email VARCHAR(100),
    join_date DATE
);

CREATE TABLE Products (
    product_id INT PRIMARY KEY,
    name VARCHAR(100),
    category VARCHAR(50),
    price DECIMAL(10, 2)
);

CREATE TABLE Orders (
    order_id INT PRIMARY KEY,
    customer_id INT,
    order_date DATE,
    FOREIGN KEY (customer_id) REFERENCES Customers(customer_id)
);

CREATE TABLE Order_Items (
    order_item_id INT PRIMARY KEY,
    order_id INT,
    product_id INT,
    quantity INT,
    FOREIGN KEY (order_id) REFERENCES Orders(order_id),
    FOREIGN KEY (product_id) REFERENCES Products(product_id)
);

-- Insert Sample Data
INSERT INTO Customers (customer_id, first_name, last_name, email, join_date) VALUES
(1, 'John', 'Smith', '[email protected]', '2022-01-15'),
(2, 'Jane', 'Doe', '[email protected]', '2022-02-20'),
(3, 'Peter', 'Jones', '[email protected]', '2022-03-10'),
(4, 'Alice', 'Williams', '[email protected]', '2023-05-01');

INSERT INTO Products (product_id, name, category, price) VALUES
(1, 'Laptop', 'Electronics', 1200.00),
(2, 'Smartphone', 'Electronics', 800.00),
(3, 'Desk Chair', 'Furniture', 250.00),
(4, 'Coffee Maker', 'Appliances', 100.00),
(5, 'The Great Gatsby', 'Books', 15.00);

INSERT INTO Orders (order_id, customer_id, order_date) VALUES
(101, 1, '2023-04-10'),
(102, 1, '2023-05-22'),
(103, 2, '2023-06-05'),
(104, 3, '2023-06-08');

INSERT INTO Order_Items (order_item_id, order_id, product_id, quantity) VALUES
(1, 101, 1, 1),
(2, 101, 5, 2),
(3, 102, 3, 1),
(4, 103, 2, 1),
(5, 103, 5, 3),
(6, 104, 1, 1),
(7, 104, 2, 1);

• Task: Write a query to select all columns for all records from the Products table.

Solution:

SELECT *
FROM Products;

Explanation:

• SELECT * means "select all columns".
• FROM Products specifies the table you are querying.

• Task: Write a query to find the names and prices of all products in the 'Electronics' category.

Solution:

SELECT name, price
FROM Products
WHERE category = 'Electronics';

Explanation:

• SELECT name, price specifies that you only want these two columns.
• WHERE category = 'Electronics' filters the rows, returning only those where the category column has the value 'Electronics'.

• Task: Write a query to get the first_name and join_date of all customers, sorted with the newest members first.

Solution:

SELECT first_name, join_date
FROM Customers
ORDER BY join_date DESC;

Explanation:

• ORDER BY join_date tells the database to sort the results based on the join_date column.
• DESC stands for "descending", which sorts from the highest value (latest date) to the lowest (earliest date). The default is ASC (ascending).

• Task: Write a query to list all order_ids along with the first_name and last_name of the customer who placed the order.

Solution:

SELECT
    o.order_id,
    c.first_name,
    c.last_name
FROM Orders AS o
JOIN Customers AS c ON o.customer_id = c.customer_id;

Explanation:

• JOIN Customers AS c ON o.customer_id = c.customer_id combines rows from Orders (aliased as o) and Customers (aliased as c).
• The ON clause specifies the join condition: link rows where the customer_id is the same in both tables. This is an INNER JOIN by default, meaning it only includes customers who have placed orders.

• Task: Write a query to calculate the total revenue generated by each product. The result should show the product name and its total revenue, sorted from most to least revenue.

Solution:

SELECT
    p.name,
    SUM(oi.quantity * p.price) AS total_revenue
FROM Order_Items AS oi
JOIN Products AS p ON oi.product_id = p.product_id
GROUP BY p.name
ORDER BY total_revenue DESC;

Explanation:

• JOIN: We join Order_Items and Products to get access to both quantity and price for each item sold.
• SUM(oi.quantity * p.price): This is an aggregate function. For each product, it calculates the revenue (quantity * price) for each line item and then sums them up. AS total_revenue gives this new calculated column a name.
• GROUP BY p.name: This is crucial. It tells the SUM function to group all the rows by product name and perform the sum for each group separately.
• ORDER BY total_revenue DESC: Sorts the final result to show the most profitable products first.

• Task: Write a query to find all customers who have never placed an order.

Solution:

SELECT
    c.customer_id,
    c.first_name,
    c.last_name
FROM Customers AS c
LEFT JOIN Orders AS o ON c.customer_id = o.customer_id
WHERE o.order_id IS NULL;

Explanation:

• LEFT JOIN: This join returns all rows from the left table (Customers), and the matched rows from the right table (Orders).
• If a customer has no matching orders, the columns from the Orders table (like o.order_id) will be NULL for that customer's row.
• WHERE o.order_id IS NULL: This filters the result of the LEFT JOIN to show only those rows where there was no match—i.e., customers without orders.

• Task: Write a query to find the name and price of the most expensive product in each category.

Solution (using a Window Function):

WITH RankedProducts AS (
    SELECT
        name,
        category,
        price,
        RANK() OVER (PARTITION BY category ORDER BY price DESC) as price_rank
    FROM Products
)
SELECT
    name,
    category,
    price
FROM RankedProducts
WHERE price_rank = 1;

Explanation:

• WITH RankedProducts AS (...): This defines a Common Table Expression (CTE), which is like a temporary, named result set that you can query.
• RANK() OVER (...): This is a window function.
  • PARTITION BY category: It divides the rows into partitions (groups) based on their category. The RANK() function will restart for each new category.
  • ORDER BY price DESC: Within each partition, it orders the products by price from highest to lowest.
  • RANK() then assigns a rank to each product within its category based on this ordering. The most expensive product gets a rank of 1.
• SELECT ... FROM RankedProducts WHERE price_rank = 1: The final query simply selects the rows from our CTE where the rank is 1, giving us the most expensive product from each category.

• Task: Write a query to find the first and last names of all customers who have ordered a 'Laptop'.

Solution (using a Subquery):

SELECT
    first_name,
    last_name
FROM Customers
WHERE customer_id IN (
    SELECT o.customer_id
    FROM Orders AS o
    JOIN Order_Items AS oi ON o.order_id = oi.order_id
    JOIN Products AS p ON oi.product_id = p.product_id
    WHERE p.name = 'Laptop'
);

Explanation:

• The query inside the parentheses is a subquery. It runs first.
• Inner Query: It finds all unique customer_ids for orders that contain a product named 'Laptop'.
• Outer Query: It then selects the names from the Customers table, but only for those customers whose customer_id is in the list generated by the subquery (WHERE customer_id IN (...)).

• Task: For customer John Smith (customer_id = 1), calculate the total value of each of his orders and also show a running total of his spending over time.

Solution (using Window Functions and a CTE):

WITH CustomerOrderValue AS (
    SELECT
        o.customer_id,
        o.order_id,
        o.order_date,
        SUM(oi.quantity * p.price) AS order_total
    FROM Orders AS o
    JOIN Order_Items AS oi ON o.order_id = oi.order_id
    JOIN Products AS p ON oi.product_id = p.product_id
    WHERE o.customer_id = 1
    GROUP BY o.order_id, o.customer_id, o.order_date
)
SELECT
    order_id,
    order_date,
    order_total,
    SUM(order_total) OVER (ORDER BY order_date) AS running_total
FROM CustomerOrderValue
ORDER BY order_date;

Explanation:

• CTE CustomerOrderValue: The first step is to calculate the total value for each individual order placed by customer 1. This is done by joining the tables, filtering for customer_id = 1, and using GROUP BY and SUM.
• Outer Query: This query selects from the CTE.
• SUM(order_total) OVER (ORDER BY order_date): This is the key window function.
  • OVER (ORDER BY order_date) tells the SUM function to operate over a "window" of rows ordered by date.
  • For each row, it sums the order_total of all rows from the beginning of the set up to the current row, creating a cumulative or "running" total.

create coding exercises in C# with solutions

Of course! Here is a set of C# coding exercises with solutions, organized by difficulty. These exercises are designed to be run in a simple console application.

• Setup: Create a new C# console project. You can do this easily with the .NET CLI:

  dotnet new console -o CSharpExercises
  cd CSharpExercises

• Running: Place the code for each solution inside the Program.cs file and run it from your terminal with dotnet run.

These exercises cover basic syntax, control flow, and methods.

• Task: Create a method that takes two numbers and a mathematical operator (+, -, *, /) as input, and returns the result of the operation. Handle the case of division by zero.
• Concepts to Use: Methods, Parameters, switch statement, Return values.

Solution:

// Program.cs
using System;

public class Program
{
    public static void Main(string[] args)
    {
        Console.WriteLine("Calculator Results:");
        Console.WriteLine($"10 + 5 = {Calculate(10, 5, '+')}");
        Console.WriteLine($"10 - 5 = {Calculate(10, 5, '-')}");
        Console.WriteLine($"10 * 5 = {Calculate(10, 5, '*')}");
        Console.WriteLine($"10 / 5 = {Calculate(10, 5, '/')}");

        // Test division by zero
        try
        {
            Calculate(10, 0, '/');
        }
        catch (ArgumentException ex)
        {
            Console.WriteLine(ex.Message);
        }
    }

    public static double Calculate(double num1, double num2, char operation)
    {
        switch (operation)
        {
            case '+':
                return num1 + num2;
            case '-':
                return num1 - num2;
            case '*':
                return num1 * num2;
            case '/':
                if (num2 == 0)
                {
                    throw new ArgumentException("Error: Cannot divide by zero.");
                }
                return num1 / num2;
            default:
                throw new ArgumentException("Error: Invalid operator.");
        }
    }
}

Explanation:

1. The Calculate method accepts two double numbers and a char for the operator.
2. A switch statement is used to efficiently check the operation character.
3. Each case performs the corresponding mathematical operation and uses return to send the result back.
4. For division, we first check if num2 is zero. If it is, we throw an ArgumentException to signal an error. This is better than returning a magic number like 0 or -1.
5. The default case handles any invalid operators, also throwing an exception.

• Task: Write a program that prints the numbers from 1 to 100. For multiples of three, print "Fizz" instead of the number. For multiples of five, print "Buzz". For numbers which are multiples of both three and five, print "FizzBuzz".
• Concepts to Use: for loop, if-else if-else statements, Modulo operator (%).

Solution:

// Program.cs
using System;

public class Program
{
    public static void Main(string[] args)
    {
        for (int i = 1; i <= 100; i++)
        {
            // Check for multiples of both 3 and 5 first, as this is the most specific condition.
            if (i % 3 == 0 && i % 5 == 0) // or (i % 15 == 0)
            {
                Console.WriteLine("FizzBuzz");
            }
            else if (i % 3 == 0)
            {
                Console.WriteLine("Fizz");
            }
            else if (i % 5 == 0)
            {
                Console.WriteLine("Buzz");
            }
            else
            {
                Console.WriteLine(i);
            }
        }
    }
}

Explanation:

1. A for loop iterates from 1 to 100.
2. The modulo operator % gives the remainder of a division. i % 3 == 0 is true if i is perfectly divisible by 3.
3. The if-else if-else structure checks the conditions in order. It's important to check for the "FizzBuzz" case (i % 3 == 0 && i % 5 == 0) first, because if we checked for "Fizz" first, it would print "Fizz" for the number 15 and never reach the "FizzBuzz" condition.
4. If none of the conditions are met, the else block simply prints the number itself.

• Task: Create a BankAccount class. It should have properties for AccountNumber (string), OwnerName (string), and Balance (decimal). The balance should only be modifiable through Deposit and Withdraw methods. Ensure a withdrawal cannot result in a negative balance.
• Concepts to Use: Classes, Properties, Constructors, Methods, Encapsulation.

Solution:

// Program.cs
using System;

public class BankAccount
{
    // Properties
    public string AccountNumber { get; } // Read-only after creation
    public string OwnerName { get; set; }
    public decimal Balance { get; private set; } // Read-only from outside, modifiable inside

    // Constructor
    public BankAccount(string accountNumber, string ownerName, decimal initialBalance)
    {
        AccountNumber = accountNumber;
        OwnerName = ownerName;
        Balance = initialBalance;
    }

    // Methods
    public void Deposit(decimal amount)
    {
        if (amount <= 0)
        {
            throw new ArgumentException("Deposit amount must be positive.", nameof(amount));
        }
        Balance += amount;
    }

    public void Withdraw(decimal amount)
    {
        if (amount <= 0)
        {
            throw new ArgumentException("Withdrawal amount must be positive.", nameof(amount));
        }
        if (Balance - amount < 0)
        {
            throw new InvalidOperationException("Insufficient funds for this withdrawal.");
        }
        Balance -= amount;
    }
}

public class Program
{
    public static void Main(string[] args)
    {
        var account = new BankAccount("12345", "John Doe", 1000.00m);
        Console.WriteLine($"Account {account.AccountNumber} for {account.OwnerName} has a balance of ${account.Balance}.");

        account.Deposit(250.50m);
        Console.WriteLine($"After deposit, balance is ${account.Balance}.");

        account.Withdraw(500m);
        Console.WriteLine($"After withdrawal, balance is ${account.Balance}.");

        try
        {
            // This will fail
            account.Withdraw(1000m);
        }
        catch (InvalidOperationException e)
        {
            Console.WriteLine(e.Message);
        }
        
        // This also fails because the setter is private
        // account.Balance = 5000; // <-- This line would cause a compile error
    }
}

Explanation:

1. Encapsulation: The Balance property has a private set;. This means its value can only be changed by code inside the BankAccount class (i.e., by the Deposit and Withdraw methods). This prevents external code from setting an arbitrary balance.
2. Constructor: The constructor is a special method that runs when a new object is created (new BankAccount(...)). It initializes the object's state.
3. Read-only Property: AccountNumber has no set accessor at all (after C# 9, init; is also an option for constructors). This means its value is set once in the constructor and can never be changed again.
4. Business Logic: The methods enforce rules: deposits must be positive, and withdrawals cannot overdraw the account.

• Task: Create a Product class with Name (string), Category (string), and Price (decimal) properties. Create a list of Product objects. Use LINQ to perform the following queries:
  1. Find all products in the "Electronics" category.
  2. Find the first product with a price over $500.
  3. Order all products by price, from cheapest to most expensive.
• Concepts to Use: List<T>, LINQ methods (Where, FirstOrDefault, OrderBy).

Solution:

// Program.cs
using System;
using System.Collections.Generic;
using System.Linq;

public class Product
{
    public string Name { get; set; }
    public string Category { get; set; }
    public decimal Price { get; set; }
}

public class Program
{
    public static void Main(string[] args)
    {
        List<Product> products = new List<Product>
        {
            new Product { Name = "Laptop", Category = "Electronics", Price = 1200.50m },
            new Product { Name = "Smartphone", Category = "Electronics", Price = 750.00m },
            new Product { Name = "Desk Chair", Category = "Furniture", Price = 150.75m },
            new Product { Name = "Coffee Maker", Category = "Appliances", Price = 80.00m },
            new Product { Name = "Keyboard", Category = "Electronics", Price = 99.99m }
        };

        // 1. Find all products in the "Electronics" category
        Console.WriteLine("--- Electronics Products ---");
        var electronics = products.Where(p => p.Category == "Electronics");
        foreach (var product in electronics)
        {
            Console.WriteLine($"{product.Name} (${product.Price})");
        }

        // 2. Find the first product with a price over $500
        Console.WriteLine("\n--- First Product Over $500 ---");
        var expensiveProduct = products.FirstOrDefault(p => p.Price > 500m);
        if (expensiveProduct != null)
        {
            Console.WriteLine($"{expensiveProduct.Name} (${expensiveProduct.Price})");
        }

        // 3. Order all products by price
        Console.WriteLine("\n--- Products Ordered by Price ---");
        var orderedProducts = products.OrderBy(p => p.Price);
        foreach (var product in orderedProducts)
        {
            Console.WriteLine($"{product.Name} (${product.Price})");
        }
    }
}

Explanation:

1. LINQ (Language Integrated Query): LINQ provides powerful methods to query collections. using System.Linq; is required.
2. Where(p => p.Category == "Electronics"): The Where method filters a collection. It takes a lambda expression p => ... as an argument. For each product p, it evaluates the condition. If true, the product is included in the result.
3. FirstOrDefault(p => p.Price > 500m): This finds the first element that matches the condition. If no element matches, it returns the default value for the type (null for objects), which prevents an exception.
4. OrderBy(p => p.Price): This sorts the collection. The lambda expression specifies which property to sort by. By default, it sorts in ascending order. For descending, you would use OrderByDescending.

• Task: Write an asynchronous method that takes a URL as input, downloads the HTML content from that URL, and returns the character count of the content. Use HttpClient and the async/await pattern.
• Concepts to Use: async/await, Task<T>, HttpClient, Asynchronous programming.

Solution:

// Program.cs
using System;
using System.Net.Http;
using System.Threading.Tasks;

public class Program
{
    // Main method must be async to use await at the top level
    public static async Task Main(string[] args)
    {
        string url = "https://www.microsoft.com";
        Console.WriteLine($"Downloading content from {url}...");

        try
        {
            int charCount = await DownloadContentLengthAsync(url);
            Console.WriteLine($"Successfully downloaded. Character count: {charCount:N0}");
        }
        catch (HttpRequestException e)
        {
            Console.WriteLine($"Error downloading content: {e.Message}");
        }
    }

    public static async Task<int> DownloadContentLengthAsync(string url)
    {
        // Using statement ensures the HttpClient is disposed of correctly
        using (var client = new HttpClient())
        {
            // Asynchronously get the response string from the URL
            string content = await client.GetStringAsync(url);
            
            // Once the content is downloaded, return its length
            return content.Length;
        }
    }
}

Explanation:

1. async and await:
   • The async keyword on a method signature allows the use of the await keyword inside it.
   • The await keyword tells the program to pause the execution of this method until the awaited task (e.g., client.GetStringAsync(url)) is complete.
   • Crucially, it does not block the application's main thread. The thread is free to do other work (like updating a UI or handling other requests). When the download finishes, execution resumes where it left off.
2. Task<int>: The return type of an async method that returns a value is Task<T>. Task<int> represents a promise that this method will eventually produce an int. When you await it, you "unwrap" the task to get the int result.
3. HttpClient: This is the modern .NET class for making HTTP requests. GetStringAsync is an asynchronous method that returns a Task<string>.
4. Main Method: Since C# 7.1, the Main method itself can be async Task, which allows you to use await at the top level of your program for clean, simple code.

create coding exercises in .Net with solutions

Of course! These exercises focus on building a .NET application, specifically an ASP.NET Core Web API, which is one of the most common use cases for .NET today. We'll progress from a simple in-memory API to one that uses a database with Entity Framework Core.

• Setup: You will need the .NET SDK installed. We'll use the .NET CLI to create and manage the project.
• Tools:
  • A code editor like Visual Studio Code or Visual Studio.
  • A tool to test your API, like Postman, or the built-in Swagger UI that comes with the ASP.NET Core Web API template.

Initial Project Setup: Open your terminal and run the following commands:

# Create a new Web API project in a folder named "TodoApi"
dotnet new webapi -o TodoApi

# Navigate into the new project directory
cd TodoApi

This creates a boilerplate project with a sample "WeatherForecast" controller. We will ignore that and create our own.

Goal: Understand the basics of controllers, routing, and returning data.

• Task: Create a TodoItemsController that manages a hardcoded list of to-do items. It should have one endpoint to get all to-do items.

Solution:

1. Create a Model: Inside your project, create a new file named TodoItem.cs.

   // TodoApi/TodoItem.cs
   public class TodoItem
   {
       public long Id { get; set; }
       public string? Name { get; set; }
       public bool IsComplete { get; set; }
   }

2. Create the Controller: Create a new folder named Controllers. Inside it, add a new file named TodoItemsController.cs.

   // TodoApi/Controllers/TodoItemsController.cs
   using Microsoft.AspNetCore.Mvc;
   
   [ApiController] // Marks this class as an API controller
   [Route("api/[controller]")] // Sets the route to /api/TodoItems
   public class TodoItemsController : ControllerBase
   {
       // A static list to act as our in-memory "database"
       private static readonly List<TodoItem> _inMemoryTodoItems = new List<TodoItem>
       {
           new TodoItem { Id = 1, Name = "Learn ASP.NET Core", IsComplete = true },
           new TodoItem { Id = 2, Name = "Build an API", IsComplete = false }
       };
   
       // GET: api/TodoItems
       [HttpGet]
       public ActionResult<IEnumerable<TodoItem>> GetTodoItems()
       {
           // ASP.NET Core automatically serializes this list to JSON
           return _inMemoryTodoItems;
       }
   }

3. Run and Test:

   • Run the application from your terminal with dotnet run.
   • The output will show a URL like https://localhost:7123.
   • Open your browser or Postman and navigate to https://localhost:7123/api/todoitems.
   • You should see a JSON array of the two to-do items.

Explanation:

• [ApiController]: Enables helpful API-specific behaviors, like automatic HTTP 400 responses when the model state is invalid.
• [Route("api/[controller]")]: This is a route template. [controller] is a token that gets replaced by the controller's name minus the "Controller" suffix (so, TodoItems). The final route is /api/TodoItems.
• [HttpGet]: This attribute marks the GetTodoItems method as a handler for HTTP GET requests.
• ActionResult<T>: This return type allows you to return either a simple type (IEnumerable<TodoItem>) or an IActionResult (like NotFound(), BadRequest(), etc.). ASP.NET Core handles converting the C# object to a JSON response.

Goal: Replace the in-memory list with a real database using Entity Framework (EF) Core and enable getting a single item by its ID.

• Task:
  1. Add EF Core to the project.
  2. Create a DbContext to manage the database connection.
  3. Use Dependency Injection to provide the DbContext to the controller.
  4. Modify the GET endpoint to pull from the database.
  5. Add a new GET endpoint to retrieve a single to-do item by its Id.

Solution:

1. Install EF Core Packages: Run these commands in your terminal in the project directory. We'll use SQLite for simplicity as it requires no external server setup.

   dotnet add package Microsoft.EntityFrameworkCore.Sqlite
   dotnet add package Microsoft.EntityFrameworkCore.Design

2. Create the DbContext: Create a new file named TodoContext.cs.

   // TodoApi/TodoContext.cs
   using Microsoft.EntityFrameworkCore;
   
   public class TodoContext : DbContext
   {
       public TodoContext(DbContextOptions<TodoContext> options) : base(options)
       {
       }
   
       public DbSet<TodoItem> TodoItems { get; set; } = null!;
   }

3. Configure Services in Program.cs: Modify your Program.cs to register the DbContext with the dependency injection container.

   // TodoApi/Program.cs (add these lines)
   using Microsoft.EntityFrameworkCore; // Add this using
   using TodoApi; // Add this using to access TodoContext
   
   var builder = WebApplication.CreateBuilder(args);
   
   // Add services to the container.
   builder.Services.AddControllers();
   
   // *** START: Add EF Core DbContext configuration ***
   builder.Services.AddDbContext<TodoContext>(opt =>
       opt.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection")));
   // *** END: Add EF Core DbContext configuration ***
   
   // ... rest of the file

4. Add Connection String: In your appsettings.json file, add a connection string.

   // TodoApi/appsettings.json
   {
     "ConnectionStrings": {
       "DefaultConnection": "Data Source=Todo.db"
     },
     // ... rest of the file
   }

5. Create the Database using Migrations:

   • Run this command to create a migration file. This file contains code to create your database schema.

     dotnet ef migrations add InitialCreate

   • Run this command to apply the migration and create the Todo.db file.

     dotnet ef database update

6. Update the Controller: Modify TodoItemsController.cs to use the injected TodoContext.

   // TodoApi/Controllers/TodoItemsController.cs
   using Microsoft.AspNetCore.Mvc;
   using Microsoft.EntityFrameworkCore; // Add this
   
   [ApiController]
   [Route("api/[controller]")]
   public class TodoItemsController : ControllerBase
   {
       private readonly TodoContext _context; // Field to hold the context
   
       // Constructor to receive the context via dependency injection
       public TodoItemsController(TodoContext context)
       {
           _context = context;
       }
   
       // GET: api/TodoItems
       [HttpGet]
       public async Task<ActionResult<IEnumerable<TodoItem>>> GetTodoItems()
       {
           // Asynchronously get all items from the database
           return await _context.TodoItems.ToListAsync();
       }
   
       // GET: api/TodoItems/5
       [HttpGet("{id}")]
       public async Task<ActionResult<TodoItem>> GetTodoItem(long id)
       {
           var todoItem = await _context.TodoItems.FindAsync(id);
   
           if (todoItem == null)
           {
               // Return a 404 Not Found response if the item doesn't exist
               return NotFound();
           }
   
           return todoItem;
       }
   }

Explanation:

• Dependency Injection (DI): In the controller's constructor, we ask for a TodoContext. Because we registered it in Program.cs, the ASP.NET Core DI container knows how to create an instance and "inject" it for us. This decouples our controller from the database setup.
• async and await: Database operations are I/O-bound and should always be done asynchronously to avoid blocking the server thread. ToListAsync() and FindAsync() are asynchronous EF Core methods.
• [HttpGet("{id}")]: The {id} is a route parameter. When a request comes to /api/TodoItems/5, the 5 is automatically mapped to the id parameter of the GetTodoItem method.
• NotFound(): This is a helper method that returns a standard HTTP 404 response.

Goal: Complete the CRUD (Create, Read, Update, Delete) functionality of the API.

• Task: Add POST, PUT, and DELETE endpoints to the TodoItemsController.

Solution: Add the following methods to your TodoItemsController.cs.

// Add these methods inside the TodoItemsController class

// POST: api/TodoItems
[HttpPost]
public async Task<ActionResult<TodoItem>> PostTodoItem(TodoItem todoItem)
{
    _context.TodoItems.Add(todoItem);
    await _context.SaveChangesAsync();

    // Return a 201 Created response with a Location header pointing to the new resource
    return CreatedAtAction(nameof(GetTodoItem), new { id = todoItem.Id }, todoItem);
}

// PUT: api/TodoItems/5
[HttpPut("{id}")]
public async Task<IActionResult> PutTodoItem(long id, TodoItem todoItem)
{
    if (id != todoItem.Id)
    {
        return BadRequest(); // IDs in URL and body must match
    }

    _context.Entry(todoItem).State = EntityState.Modified;

    try
    {
        await _context.SaveChangesAsync();
    }
    catch (DbUpdateConcurrencyException)
    {
        if (!_context.TodoItems.Any(e => e.Id == id))
        {
            return NotFound();
        }
        else
        {
            throw;
        }
    }

    return NoContent(); // Return 204 No Content on successful update
}

// DELETE: api/TodoItems/5
[HttpDelete("{id}")]
public async Task<IActionResult> DeleteTodoItem(long id)
{
    var todoItem = await _context.TodoItems.FindAsync(id);
    if (todoItem == null)
    {
        return NotFound();
    }

    _context.TodoItems.Remove(todoItem);
    await _context.SaveChangesAsync();

    return NoContent();
}

Explanation:

• [HttpPost]: This method handles creating new resources. The todoItem is deserialized from the JSON request body.
• CreatedAtAction(...): This is a best-practice response for a POST request. It returns an HTTP 201 Created status. It also adds a Location header to the response, which contains the URL of the newly created item (e.g., /api/TodoItems/3).
• [HttpPut("{id}")]: This method handles updating an existing resource. It's idempotent, meaning calling it multiple times with the same data should have the same result.
• _context.Entry(todoItem).State = EntityState.Modified;: This tells EF Core to track the entity as "modified." When SaveChangesAsync is called, EF Core will generate an SQL UPDATE statement.
• [HttpDelete("{id}")]: This method handles deleting a resource. We first find the item, and if it exists, we remove it from the context and save the changes.
• NoContent(): A successful PUT or DELETE typically returns an HTTP 204 No Content response, indicating success without sending back a response body.

create coding exercises for experienced in React with solutions

Of course. Here are several coding exercises designed for experienced React developers. These problems focus on performance, architecture, advanced hooks, and state management patterns. Each comes with a detailed solution and explanation.

Goal: Understand and apply performance optimization techniques to prevent unnecessary re-renders in a complex component.

• Problem: You have a DataGrid component that renders a large list of GridRow components. The parent DataGrid component also has a timer that updates its own state every second, causing the entire grid to re-render. Each GridRow has a "Highlight" button that should highlight only that specific row. Your task is to optimize the component so that only the row that is actually highlighted re-renders, and the other rows do not re-render every time the parent's timer ticks.

• Key Concepts: React.memo, useCallback, useState.

Solution:

DataGrid.jsx (The Parent Component)

import React, { useState, useEffect, useCallback } from 'react';
import GridRow from './GridRow';

// Helper function to generate some mock data
const generateGridData = (count) =>
  Array.from({ length: count }, (_, i) => ({
    id: i,
    name: `Row ${i + 1}`,
    value: Math.floor(Math.random() * 100),
  }));

const initialData = generateGridData(50);

function DataGrid() {
  const [data, setData] = useState(initialData);
  const [highlightedRow, setHighlightedRow] = useState(null);
  const [time, setTime] = useState(new Date());

  // This timer will cause the DataGrid component to re-render every second
  useEffect(() => {
    const timerId = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(timerId);
  }, []);

  // Use useCallback to memoize the highlight function.
  // Without this, a new function would be created on every render,
  // breaking the memoization of the GridRow component.
  const handleHighlight = useCallback((rowId) => {
    setHighlightedRow(rowId);
  }, []); // Dependency array is empty because it doesn't depend on component state

  return (
    <div>
      <h1>Performant Data Grid</h1>
      <p>Parent Component Timer: {time.toLocaleTimeString()}</p>
      <div style={{ border: '1px solid black', maxHeight: '400px', overflowY: 'scroll' }}>
        {data.map((row) => (
          <GridRow
            key={row.id}
            row={row}
            isHighlighted={highlightedRow === row.id}
            onHighlight={handleHighlight}
          />
        ))}
      </div>
    </div>
  );
}

export default DataGrid;

GridRow.jsx (The Optimized Child Component)

import React from 'react';

// This is the key: We wrap the component in React.memo
const GridRow = React.memo(function GridRow({ row, isHighlighted, onHighlight }) {
  // This log will demonstrate whether the component re-renders
  console.log(`Rendering row: ${row.name}`);

  const style = {
    padding: '8px',
    borderBottom: '1px solid #eee',
    backgroundColor: isHighlighted ? 'lightblue' : 'white',
  };

  return (
    <div style={style}>
      {row.name} - Value: {row.value}
      <button onClick={() => onHighlight(row.id)} style={{ marginLeft: '10px' }}>
        Highlight
      </button>
    </div>
  );
});

export default GridRow;

Explanation:

1. The Problem: The setInterval in DataGrid updates the time state every second. This forces DataGrid to re-render, which in turn causes it to re-render all of its children (GridRow components). You can see this by putting a console.log in GridRow without any optimizations – it will log for all 50 rows every second.

2. React.memo: By wrapping GridRow in React.memo, we tell React to perform a shallow comparison of its props. If the props (row, isHighlighted, onHighlight) have not changed since the last render, React will skip re-rendering this component and reuse the last rendered result.

3. useCallback: This is the crucial second step. React.memo alone is not enough. In the DataGrid component, the handleHighlight function is defined inside the component body. This means a new instance of the handleHighlight function is created on every single render of DataGrid. When this new function is passed as the onHighlight prop to GridRow, the prop comparison by React.memo fails (because function A !== function B, even if they have the same code). useCallback(fn, deps) returns a memoized version of the function that only changes if one of the dependencies in the deps array has changed. By using useCallback with an empty dependency array [], we ensure that the same function instance is passed to GridRow on every render, allowing React.memo to work correctly.

Goal: Build a scalable state management solution for a feature (like a shopping cart) without relying on external libraries like Redux.

• Problem: You need to manage the state of a shopping cart. The state is an array of items, and there are multiple actions that can modify it: ADD_ITEM, REMOVE_ITEM, UPDATE_QUANTITY. Using multiple useState calls would be cumbersome and error-prone. Create a centralized state logic using useReducer and provide it to multiple components using useContext.

• Key Concepts: useReducer, useContext, Complex state objects, Action dispatching.

Solution:

cartContext.js (The Context and Reducer)

import React, { createContext, useReducer, useContext } from 'react';

const CartStateContext = createContext();
const CartDispatchContext = createContext();

const cartReducer = (state, action) => {
  switch (action.type) {
    case 'ADD_ITEM': {
      const existingItem = state.find((item) => item.id === action.payload.id);
      if (existingItem) {
        // If item exists, just update quantity
        return state.map((item) =>
          item.id === action.payload.id ? { ...item, quantity: item.quantity + 1 } : item
        );
      }
      // Otherwise, add new item
      return [...state, { ...action.payload, quantity: 1 }];
    }
    case 'REMOVE_ITEM': {
      return state.filter((item) => item.id !== action.payload.id);
    }
    case 'UPDATE_QUANTITY': {
      return state.map((item) =>
        item.id === action.payload.id
          ? { ...item, quantity: Math.max(0, action.payload.quantity) }
          : item
      ).filter(item => item.quantity > 0); // Also remove if quantity is 0
    }
    default: {
      throw new Error(`Unhandled action type: ${action.type}`);
    }
  }
};

export const CartProvider = ({ children }) => {
  const [state, dispatch] = useReducer(cartReducer, []);

  return (
    <CartStateContext.Provider value={state}>
      <CartDispatchContext.Provider value={dispatch}>
        {children}
      </CartDispatchContext.Provider>
    </CartStateContext.Provider>
  );
};

// Custom hooks to make consuming the context cleaner
export const useCartState = () => useContext(CartStateContext);
export const useCartDispatch = () => useContext(CartDispatchContext);

App.js and Components

import React from 'react';
import { CartProvider, useCartState, useCartDispatch } from './cartContext';

const products = [
  { id: 1, name: 'React Cookbook', price: 35.00 },
  { id: 2, name: 'Advanced Hooks', price: 45.50 },
  { id: 3, name: 'State Management Guide', price: 29.99 },
];

function ProductList() {
  const dispatch = useCartDispatch();

  const handleAdd = (product) => {
    dispatch({ type: 'ADD_ITEM', payload: product });
  };

  return (
    <div>
      <h2>Products</h2>
      {products.map((product) => (
        <div key={product.id} style={{ marginBottom: '10px' }}>
          {product.name} - ${product.price.toFixed(2)}
          <button onClick={() => handleAdd(product)} style={{ marginLeft: '10px' }}>
            Add to Cart
          </button>
        </div>
      ))}
    </div>
  );
}

function ShoppingCart() {
  const cart = useCartState();
  const dispatch = useCartDispatch();

  const handleUpdate = (id, quantity) => {
    dispatch({ type: 'UPDATE_QUANTITY', payload: { id, quantity } });
  };
  
  if (cart.length === 0) {
    return <p>Your cart is empty.</p>;
  }

  const totalPrice = cart.reduce((total, item) => total + item.price * item.quantity, 0);

  return (
    <div>
      <h2>Shopping Cart</h2>
      {cart.map((item) => (
        <div key={item.id}>
          <span>{item.name}</span>
          <input
            type="number"
            value={item.quantity}
            onChange={(e) => handleUpdate(item.id, parseInt(e.target.value, 10))}
            style={{ width: '50px', margin: '0 10px' }}
          />
          <span>${(item.price * item.quantity).toFixed(2)}</span>
        </div>
      ))}
      <h3>Total: ${totalPrice.toFixed(2)}</h3>
    </div>
  );
}

export default function App() {
  return (
    <CartProvider>
      <h1>useReducer + useContext Shopping Cart</h1>
      <ProductList />
      <hr />
      <ShoppingCart />
    </CartProvider>
  );
}

Explanation:

1. Centralized Logic: All the logic for modifying the cart state lives in one place: the cartReducer. This makes the state transitions predictable and easy to debug.
2. useReducer: It is preferred over useState when you have complex state logic involving multiple sub-values or when the next state depends on the previous one. It takes a reducer function and an initial state, and returns the current state and a dispatch function.
3. dispatch: Instead of calling multiple setState functions, components call dispatch({ type: 'ACTION_TYPE', payload: data }). This "action" object is sent to the reducer, which then computes the new state.
4. useContext: We split the state and dispatch into two separate contexts. This is a common performance optimization. If a component only needs dispatch (which never changes), it won't re-render when the state changes. The CartProvider wraps the application, making the state and dispatch function available to any child component.
5. Clean Components: The ProductList and ShoppingCart components are clean. They don't contain any state logic themselves; they simply consume the context and dispatch actions. This is a great separation of concerns.

Goal: Abstract away repetitive data-fetching logic into a generic, reusable, and type-safe custom hook.

• Problem: In many components, you need to fetch data from an API. The logic for handling loading, error, and data states is always the same. Create a custom hook useFetch that encapsulates this logic. It should be generic so it can be used with any API endpoint and data type.

• Key Concepts: Custom Hooks, useEffect with cleanup, Generics (TypeScript), AbortController for handling unmounted fetches.

Solution:

useFetch.ts (The Custom Hook - TypeScript is used for generics)

import { useState, useEffect } from 'react';

// Define the state structure for our hook
interface FetchState<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
}

export function useFetch<T>(url: string): FetchState<T> {
  const [state, setState] = useState<FetchState<T>>({
    data: null,
    loading: true,
    error: null,
  });

  useEffect(() => {
    // AbortController is used to cancel the fetch if the component unmounts
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      // Set initial loading state before fetch
      setState({ data: null, loading: true, error: null });

      try {
        const response = await fetch(url, { signal });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data: T = await response.json();
        
        // Check if the request was aborted before setting state
        if (!signal.aborted) {
          setState({ data, loading: false, error: null });
        }
      } catch (error) {
        // Don't update state if the error was due to an abort
        if (error instanceof Error && error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setState({ data: null, loading: false, error: error as Error });
        }
      }
    };

    fetchData();

    // Cleanup function: this is called when the component unmounts
    return () => {
      abortController.abort();
    };
  }, [url]); // Re-run the effect if the URL changes

  return state;
}

UserProfile.tsx (Component using the hook)

import React from 'react';
import { useFetch } from './useFetch';

// Define the type for our user data
interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile({ userId }: { userId: number }) {
  const { data: user, loading, error } = useFetch<User>(
    `https://jsonplaceholder.typicode.com/users/${userId}`
  );

  if (loading) {
    return <div>Loading user profile...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (!user) {
    return null;
  }

  return (
    <div>
      <h2>User Profile</h2>
      <p><strong>ID:</strong> {user.id}</p>
      <p><strong>Name:</strong> {user.name}</p>
      <p><strong>Email:</strong> {user.email}</p>
    </div>
  );
}

export default function App() {
    return <UserProfile userId={1} />
}

Explanation:

1. Encapsulation: The useFetch hook hides all the complexity of fetching data. The component that uses it only needs to know the URL and how to handle the three possible states: loading, error, and data.
2. Generics (<T>): By using TypeScript generics, we make the hook type-safe. When we call useFetch<User>(...), TypeScript knows that the data property in the returned state will be of type User or null. This provides excellent autocompletion and prevents type-related bugs.
3. useEffect Dependency: The useEffect has url in its dependency array. This means if the url prop ever changes, the hook will automatically re-fetch the data for the new URL.
4. Cleanup with AbortController: This is a critical pattern for any asynchronous operation in useEffect. If the component unmounts while the fetch is still in progress, we need to cancel it. Otherwise, React will throw an error when setState is called on an unmounted component. The AbortController provides a signal that can be passed to fetch, and the abort() method is called in the useEffect cleanup function.

create Angular coding exercises for experienced developer with solutions

Of course. Here are several coding exercises for experienced Angular developers. These problems go beyond the basics and focus on advanced concepts like architectural patterns, performance optimization, RxJS mastery, and dynamic components.

Goal: Build a robust, reactive, and scalable state management service (a "store") for a feature without relying on a library like NgRx.

• Problem: You need to manage the state of a "products" feature. This includes a list of products, a loading indicator, an error state, and a selected product. Components should be able to react to state changes without manual change detection, and the state logic must be centralized and testable.

• Key Concepts: RxJS BehaviorSubject, Observable, shareReplay, distinctUntilChanged, map, Service-based architecture ("store" pattern).

Solution:

products.service.ts (The Reactive Store)

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, throwError } from 'rxjs';
import { catchError, tap, map, distinctUntilChanged, shareReplay } from 'rxjs/operators';

// Define the state structure
export interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}

export interface ProductsState {
  products: Product[];
  selectedProductId: number | null;
  loading: boolean;
  error: string | null;
}

// Initialize the state
let _state: ProductsState = {
  products: [],
  selectedProductId: null,
  loading: false,
  error: null,
};

@Injectable({
  providedIn: 'root',
})
export class ProductsStoreService {
  // A BehaviorSubject holds the current state value
  private store = new BehaviorSubject<ProductsState>(_state);
  // Expose the state as an Observable
  private state$ = this.store.asObservable();

  // --- Selectors: Public Observables for components to subscribe to ---
  products$ = this.state$.pipe(
    map(state => state.products),
    distinctUntilChanged() // Only emit when the products array reference changes
  );
  selectedProduct$ = this.state$.pipe(
    map(state => state.products.find(p => p.id === state.selectedProductId)),
    distinctUntilChanged()
  );
  loading$ = this.state$.pipe(map(state => state.loading), distinctUntilChanged());
  error$ = this.state$.pipe(map(state => state.error), distinctUntilChanged());

  constructor(private http: HttpClient) {
    // This makes the observable hot and caches the last emitted value
    // for late subscribers.
    this.state$.pipe(shareReplay(1)).subscribe();
  }

  // --- Actions: Methods to update the state ---

  public loadProducts() {
    this.updateState({ ..._state, loading: true, error: null });

    this.http.get<Product[]>('/api/products').pipe( // Use a mock API URL
      tap(products => {
        this.updateState({ ..._state, products, loading: false });
      }),
      catchError(err => {
        this.updateState({ ..._state, error: 'Failed to load products', loading: false });
        return throwError(() => err);
      })
    ).subscribe();
  }

  public selectProduct(productId: number) {
    this.updateState({ ..._state, selectedProductId: productId });
  }
  
  // --- Private state mutation ---
  private updateState(newState: ProductsState) {
    _state = newState;
    this.store.next(_state);
  }
}

product-list.component.ts (Consuming Component)

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { ProductsStoreService } from './products.service';
import { Observable } from 'rxjs';
import { Product } from './products.service';

@Component({
  selector: 'app-product-list',
  template: `
    <h2>Products</h2>
    <div *ngIf="loading$ | async">Loading...</div>
    <div *ngIf="error$ | async as error" style="color: red;">{{ error }}</div>
    
    <ul>
      <li *ngFor="let product of (products$ | async)" (click)="selectProduct(product.id)">
        {{ product.name }}
      </li>
    </ul>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush, // Crucial for performance
})
export class ProductListComponent implements OnInit {
  products$: Observable<Product[]>;
  loading$: Observable<boolean>;
  error$: Observable<string | null>;

  constructor(private store: ProductsStoreService) {
    this.products$ = this.store.products$;
    this.loading$ = this.store.loading$;
    this.error$ = this.store.error$;
  }

  ngOnInit() {
    this.store.loadProducts();
  }

  selectProduct(id: number) {
    this.store.selectProduct(id);
  }
}

Explanation:

1. BehaviorSubject as the Store: A BehaviorSubject is perfect for a state store because it holds the "current" value and emits it to any new subscribers.
2. Selectors (products$, loading$): We expose specific slices of the state as separate observables. This allows components to subscribe only to the data they need.
3. distinctUntilChanged(): This operator is a key performance optimization. It ensures that the observable only emits a new value if it's different from the last one, preventing unnecessary re-renders in components.
4. Immutability: The updateState method creates a new state object ({ ..._state, ... }) every time. This is critical for distinctUntilChanged to work correctly with object references and for Angular's change detection to function predictably.
5. Actions (loadProducts): Public methods on the service act as "actions" that orchestrate state changes. All state mutations are centralized within the service.
6. ChangeDetectionStrategy.OnPush: By using the async pipe, our component becomes purely reactive. Setting its change detection to OnPush tells Angular it only needs to re-render when its @Input() properties change or an event it's subscribed to (via the async pipe) emits a new value. This provides a significant performance boost.

Goal: Create a system that can dynamically render different components into a container based on configuration or user input, without using *ngIf or *ngSwitch.

• Problem: You are building a dashboard where users can add different types of widgets (e.g., a ChartWidgetComponent, a TableWidgetComponent). The list of available widgets is defined in a configuration object. You need to create a WidgetHostDirective and a DashboardComponent that can render the correct widget component into the view at runtime.

• Key Concepts: ViewContainerRef, ComponentFactoryResolver (pre-Angular 13) / createComponent (Angular 13+), Directives, @Input.

Solution:

widget-host.directive.ts

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appWidgetHost]',
})
export class WidgetHostDirective {
  // The directive injects ViewContainerRef to get access to the view container
  // of the element that will host the dynamically added component.
  constructor(public viewContainerRef: ViewContainerRef) {}
}