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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.