React+TypeScript: Build a Draggable Task Management Project

Boot up a React and TypeScript project with Create React App and the TypeScript template; explore src and public folders, index.tsx and app.tsx, plus npm start.

Configure environment and formatting together to boost team collaboration by standardizing paths, automating formatting with prettier and lint-staged via git hooks, and enforcing consistent commit messages with commit lint.

Compare mock data solutions and choose the right fit for front-end work. Demonstrate setting up a JSON server to simulate a rest api and perform CRUD on a users resource.

Build a React project list by fetching and rendering a searchable form-driven list, using useState and useEffect, and explore state lifting, debounce, and encodeURIComponent for URL parameters.

Lift state to the parent to share the list and param with the list and search panel, then render a project table and configure api url through env variables.

initialize users with useEffect, manage project list filters via name and person id in the url, and clean empty values to generate query strings in a React TypeScript app.

Learn how to reuse React component logic with custom hooks like useMount and useDebounce, preventing redundant data fetches and embracing the dry principle through practical examples.

Learn how TypeScript exposes static error detection, converting JavaScript to TypeScript, and defining interfaces for components and props to prevent runtime errors in a React + TypeScript project.

Refactor the project list page by defining user and project interfaces, exporting types, and correcting TypeScript errors during the migration from JavaScript to TypeScript.

Explore TypeScript’s strong typing as an extension of JavaScript, covering basic types, arrays, tuples, enums, unknown and never, and the role of type inference.

Boost flexibility and type safety with TypeScript generics across functions, classes, and interfaces, using practical examples like generic reverse, a stack, and the useDebounce function.

Build a React login page with a JSON server middleware to simulate authentication, detailing the login component, form handling, and a tokenized response on valid credentials.

Connect the project to a real server with the Figma dev tool, using a service worker and local storage for backend services, enabling precise http request control and failure rates.

Build a JWT-based login and registration flow in a React TypeScript project by creating an auth provider, storing the token in local storage, and sending it with requests.

Store user information globally with a React context to manage login data and tokens across components via an auth provider and the useAuth hook.

Build and use an authentication context and provider with the useAuth hook to manage login, registration, and logout, and render a project list for authenticated users and login/register screens otherwise.

Abstract and encapsulate http requests in a custom http function to automatically attach the user token for every API call, maintain login state, and handle 401 responses.

Use the use http hook to auto-include the auth token in requests, replace fetch calls with the http function, and bootstrap the user on mount to avoid flicker.

Explore advanced TypeScript concepts, including union and intersection types, and master utility types such as Partial, Readonly, Pick, and Omit, with practical parameter handling via the Parameters type.

Learn to integrate ant design and emotion for css-in-js styling to build visually appealing React pages by replacing html elements with ant design components, and optimize rendering with use callback.

Explore grid layout with grid template areas to structure project list page, including header, main, nav, aside, and footer. Compare grid and flexbox approaches for header alignment and responsive design.

Learn to install and use emotion to build styled components in a React and TypeScript project, converting ant design elements into emotion styled components, and apply global, responsive CSS-in-JS styles.

Learn to optimize a web layout with the Emotion CSS-in-JS library by building a reusable row component that applies dynamic right margins via a gap prop.

Enhance the project list by optimizing the search panel with inline form items and a placeholder search projects, add padding, and display a two-column table for team and creation date.

Improve the search and logout UI by introducing Round Search and Round Select components, replacing input and select, adding a magnifying glass icon, and using Ant Design dropdown for logout.

Implement loading and error states for an asynchronous project search in a React+TypeScript app, using useState and the table's loading prop to improve user experience.

Create a custom useAsync hook to manage loading, error, and data states with setData, setError, and run, and refactor to reusable useProjects and useUsers hooks in the utils folder.