Build a To-Do List App with Node, Express, React and MongoDB

Install node.js and npm across Windows, Linux, or Mac OS, then verify installation by running node to check the version, and prepare to install express and mongodb driver.

Install react using npx create-react-app for a one-time setup, name the project app, then start the development server with npm start and verify the app loads.

Install MongoDB locally for testing, choose the community server, download and complete installation, configure locally with MongoDB Compass, and connect to localhost to verify the local database.

Initialize a Node project with npm, then install express and mongoose to prepare a to-do app backend and connect to MongoDB, updating package.json dependencies.

Explore how JSX blends XML-like syntax into React code and how Babel compiles it into browser-compatible JavaScript, enabling React.createElement behind the scenes.

Create a basic React app by setting up index.js, importing React and ReactDOM, rendering a simple hello component into the root element, and organizing with a dedicated app component.

Explore how React components are functions that return XML elements, using arrow or traditional forms, and wrap multiple elements in a single enclosing tag.

Learn how to convert a functional component to a class component by extending React.Component and implementing the render method to return JSX in React.

Build and compare a functional header and a class component, render them in an app, and handle events with onClick and onKeyDown, while noting props and keys later.

Learn why we split complex React apps into components, import them in the main app file, and organize files into a components folder for easier maintenance, reusability, and readability.

Learn how to pass props from a parent app component to child components, using text or label props to customize headers and buttons in both functional and class components.

Explore the React component lifecycle, focusing on mounting, updating, and unmounting, with an in-depth look at componentDidMount, componentDidUpdate, and componentWillUnmount, and contrast class components with hooks.

Learn how the state system stores data inside class components, using this.state and setState to manage a counter initialized in the constructor, and implement a handleButtonClick function to update state.

Explore how this behaves in React event handlers and compare three fixes: bind this, arrow functions, and state variable usage to ensure proper re-rendering.

Build a minimal seconds counter app using a class component, state, and a one-second interval, displaying 'you spent' alongside the elapsed seconds and handling mount and unmount lifecycle.

Build a minimal React form with an input and submit button, prevent default on submit, and show entered data in an alert, while exploring this binding and the React approach.

Explore controlled components, where a form input's value is driven by the parent component's state, making the parent the single source of truth and enabling updates via the onchange handler.

Explore the hooks system that enables state and lifecycle concepts inside functional components, using React's built-in useState and useEffect methods.

Learn to use the useState hook in React functional components by building a counter: import React, initialize state to zero, update it on button click, and render the current count.

Explore how the useEffect hook brings lifecycle methods into functional components, detailing three occasions: on every render, on first render, and on first render plus conditional, via the array.

Refactor the seconds counter app into a functional component using useState and useEffect to increment every second, 1000 ms, and clean up on unmount.

Explore when useEffect's return statement runs—on initial render, on update renders, and before the next render—using a counter example and console logs to observe the timing.

Explore how hooks merge functional and class components in React 16.8 and beyond, making functional components the preferred option for modern development.

Install axios, import it in your React app, and use it to make requests; axios auto parses JSON and includes CSRF protection, unlike fetch.

Use the Axios library to build the article searcher app that searches the Wikipedia API with a controlled input and display results in a semantic ui styled list.

Learn to fetch Wikipedia search results in a React app by debouncing input with useEffect, building the API URL and parameters, and using async/await to handle responses.

Display the data object's results in a React app using a state variable, pass data to a list component, and map items to show title and snippet from Wikipedia API.

Shows how to use React's dangerouslySetInnerHTML to render raw HTML, warns about script execution and unsanitized content, and guides safely configuring anchors to open in a new tab.

Explore how the key prop uniquely identifies list items in React to prevent unnecessary re-renders, and learn how to implement it with a constant page id.

Deploy your to-do list app with Versal by logging in, installing Versal CLI, and verifying email to obtain a live URL, then redeploy after updating the timer to 1000 ms.

Learn an alternative deployment method to produce a production ready to-do list app as static files, configure the static path, and host via a static host after npm run build.

Design front-end for the to-do app with a form, input for the item title, a submit button, submit via enter, and list of items with complete, remove, and inline edit.

Include the Semantic UI CSS library to style your to-do app, by copying the link tag and adding it to the public index.html file.

Create a to-do form component in React using Semantic UI, center the title with a container, and build a grid with a text input and submit button to add items.

Create a circular plus button with a built-in icon, color it green with a white icon, and center the form using a UI grid type center aligned.

Turn the input into a controlled component by initializing state with an empty string, updating the value with useState, and syncing onchange via event.target.value to state.

Create a reusable section component that wraps the title and form components and accepts children props for composition, then apply styling to margins for a more elegant layout.

Create a React list component for the to-do app using a UI grid layout, with complete and remove actions, circular icon buttons in green and red, and centered text.

Create a dedicated to-do item component and enable in-place editing by double-clicking, using a state variable called isEditing to toggle between a display row and an input field.

Style the input for an elegant look, wrapping it in a layout column. Enable an onKeyDown handler to listen for enter and escape keys and toggle the editing state accordingly.

Auto focus the input when rendered and convert the to-do item into a controlled component by passing a title prop and using state to manage its value.

Implement a temporary input state to edit a to-do title, bind it to the input, and commit changes on enter or cancel them on escape.

Enable marking items as completed with useState; turn green when true, fetch items from database, and pass them as props to the list component with an onClick toggle.

Simulate a backend by creating a temporary to-do list, manage state with useState, pass the list as a prop, and render items with map, including a completed flag.

Fix two frontend issues in the to-do app: show input only on double-click of the item title by moving the edit handler, and toggle the completed state with button color.

Add to-do items by updating the React state with concat and the spread operator, prevent form submission refresh, and pass the add-to-do function to the form component for automatic re-rendering.

Learn to empty the input after submitting a to-do item and validate the form by trimming spaces, preventing empty submissions, and ensuring only meaningful tasks are added.

Learn to implement removing to-do items by passing a remove function from the app component through the list to each item, using item IDs and an on-click handler.

Use the filter function to create a to-do list by including items that return true, excluding those that return false, and keeping items whose id is not equal to id.

Set up the backend by creating an index file, importing express, and building a router with routes to list to-do items. Start the server on a port and test localhost.

Connect to a MongoDB database using mongoose and define a todo model with a title string and a completed boolean. Export the model for fetching items from the database.

Import the todo model and fetch items with find, using a callback to handle errors; verify results by inserting a test document in MongoDB Compass and noting the underscore ID.

Resolve deprecation warnings by configuring MongoDB connection options, including unified topology true, use new URL parser, and set use find and modify to false, clarifying their impact on the driver.

Create a post route at /new under the base path and a get route for / to list items, using express.json to parse JSON, tested with Postman.

Learn how to insert and delete records in the database by sending requests, handling errors and results in callbacks, and testing the delete path at /remove.

Refactor the API to follow restful conventions by using plural paths, GET to list items, POST to create, and delete by id in the path, validating changes via Postman.

Create a put method in the API to find a document by id and update it with request body data, test with Postman, and ensure the server responds to requests.

Get responses return a list, post returns the created record, update returns the updated record with returnOriginal false, and delete returns nothing, all as json.

Bind the API server with the React app using Axios to fetch to-do items on mount via useEffect, outlining lightweight testing approach and production needs for error handling and validation.

Learn to make front-end requests with async functions inside React's useEffect, using fetch with await, handling responses, and debugging API calls in a Node/Express and MongoDB stack.

Explore how cross-origin resource sharing enables requests across origins by configuring the cors middleware in an Express API and fetching to-do data from a Node, Express, React and MongoDB app.

Create to-do items from the front end by posting to the api server to save records in the database. Use async/await and destructure the response data for the created item.

Implement the front-end delete function with async and await, calling the delete endpoint at /tattoos using the to-do item's underscore ID, and verify removal on both client and server.

Enable front-end editing of to-do items by sending a put request with the item and its id to update the database. Refactor components for readability and RESTful consistency.