AI with GitHub Copilot for JavaScript and React Developers

GitHub Copilot acts as an AI pair programmer powered by OpenAI Codex, works with any language, providing auto completions, code generation from comments, and a coding chat in IDEs.

Explore the limitations of Copilot, including potential code quality issues, mismatch of context, and licensing concerns, and learn to review, test, and enforce project quality and security standards.

Set up GitHub Copilot in Visual Studio Code by installing the GitHub Copilot and GitHub Copilot chat extensions, then signing in with GitHub; explore free trials and subscription plans.

Generate a javascript factorial function with github copilot in visual studio code using inline chat, contextual comments, and start-typing prompts to compare code versions.

Learn to use GitHub Copilot to obtain code explanations with slash explain, selecting code like factorial.js, and viewing inline chat for targeted JavaScript and HTML examples.

Debug a factorial function using the browser console to spot a stack overflow from negative inputs, then apply a Copilot-guided fix in factorial.js and test input is a non-negative integer.

Learn to review and improve JavaScript code with Copilot by examining factorial.js, adopting an iterative factorial for better performance, and refining input validation to ensure a non-negative integer.

Create a task manager in JavaScript by defining a Task class (description, done flag) and a TaskManager class (add, list, mark done), ready for HTML integration.

Create an html page that uses task manager.js to add and always display tasks, render them dynamically, and mark as done with a strike-through.

Learn to implement delete task functionality in a task manager by validating index, removing the task with splice, and updating the user interface with a delete button for each task.

Export task manager module, then use Copilot's slash test to generate unit tests with Jest for add task, list tasks, and delete task, and run them with npm or npx.

Create an inventory manager class in JavaScript with add, remove, update, and list methods to manage products by name, price, and quantity, returning the list for HTML display.

Review and refactor the inventory manager code with copilot, enforce name as string and price as number, improve error handling, and return a copy of the products array.

Learn how to access Copilot help and documentation from VS Code using slash commands, explore explain, test, fix, new, and terminal help, and bookmark the Copilot docs.

Create an HTML page using inventory manager.js to render products as a table with add, update, and remove forms. Add multiple products and note the heading issue.

Fix the bug where table headings disappear when rendering products by updating the render products method to populate the tbody with rows for name, price, and quantity.

Create and link a styles.css to the inventory manager HTML, apply CSS to the body, form, labels, inputs, and buttons, and refine styling with Copilot prompts in Visual Studio Code.

Create a location app with spring boot and thymeleaf, adding, displaying, editing, and deleting locations (id, code, name, type, urban or rural) using spring data jpa repository and controller.

Learn how GitHub Copilot acts as an AI pair programmer to guide planning and design decisions, proposing a stack (Node.js with Express, MongoDB, React) and RESTful APIs with code samples.

Download and install the MongoDB community server for your operating system, then start the server to store patient and clinical data. Connect your app to port 27017.

Create a node project by adding a clinicals api folder, install express and mongodb in the terminal, and scaffold a restful api with package.json and package-lock.json in visual studio code.

Create mongoose models for patients and clinical data by defining patient and clinical schemas with first name, last name, age, and component fields, plus a date default and patient references.

Create dao classes that perform create, read, update, delete, and list operations for patient and clinical models, wiring imports and saving data to the database.

Create controllers to expose a restful API for patient and clinical data using Express and the patient Dao and clinical Dao, implementing CRUD operations (post, get, put, delete) and routing.

Configure the app's entry point with server.js, import express, set up json parsing, and wire patient and clinical routes under /patients and /clinicals, testing on port 8000.

Create a db folder and database.js, export a connect method that uses mongoose.connect to localhost/patient clinicals. Remove legacy options to avoid warnings and wire the connect function into server.js.

Launch the app with node server.js, verify the clinicals api endpoints for patients, and fix import paths and deprecated dao methods by using find by id and delete.

Test RESTful APIs by creating, updating, and deleting patient records with Postman and JSON payloads, then attach clinical data to patients using the clinicals API.

Configure cors in a node and express app to enable cross-origin requests from a React app. Use npm install cors and cors middleware, with optional origin restrictions.

Refactor server.js by using http.createServer(app) and server.listen, and export app and a close method to stop the server in tests.

Refactor database.js to add a disconnect method and expose connect and disconnect for the MongoDB connection, preventing memory leaks and leaking connections during tests, then update server.js to call db.connect.

Write unit tests for the patient controller with jest and supertest, mocking the patient dao to cover post, get, put, delete, and get all routes in isolation.

Refactor the unit test by mocking the patient dao and cleaning imports, using supertest to verify the controller's responses. Align dao methods (list) and routes to ensure correct 200 status.

Refactor tests by closing the server and disconnecting the database after all tests, importing app and close, and using async/await to ensure proper cleanup.

Learn to run tests for a JavaScript project using jest and super test by installing dependencies, configuring npm scripts, and troubleshooting test failures in patient controller tests.

Create and set up the React application using npx create-react-app clinicals-app, then install react-router-dom, axios, and react-toastify, and start the app to open in the browser.

Build the home component to fetch patient data via axios from backend api using useEffect, and render first name, last name, and age in an html table, aided by copilot.

Implement an add patient component with a form capturing first name, last name, and age, and submit via an Axios post request to create a patient in the backend.

Implement React Toastify in a React app by installing the library, adding imports and a toast container, and showing a bottom-center, auto close notification on patient creation.

Render patient details and enable adding clinical data in the add clinicals component, saving to the backend via an Axios API call, using React Router to pass the patient ID.

Gather the component name and value via an HTML form and save them with an Axios API call, including the patient ID, to store the clinical data on the backend.

Add backlinks to the add clinical data page and the add patient page to navigate back to the home page. Ensure the link is imported and saved.

Use Copilot to style the app's css, applying table borders, header and cell padding, colors, left alignment, and hover effects; customize inputs, selects, forms, and buttons for a polished ui.

Learn to containerize an express app with GitHub Copilot by installing Docker Desktop, creating a docker file and docker compose YAML, and launching app and MongoDB with docker compose up.

Dockerize your node express app by creating a dockerfile that pulls the node image, sets a work directory, installs dependencies, copies project files, exposes port, and starts with npm start.

Create a docker compose file to launch a node express app with MongoDB, using two services, port mappings, and a data volume for persistent storage.

Launch the app with docker compose up, connect the database to the Mongo container, and verify the node server on port 8000 by adding a patient via postman.

Convert a hard coded database url to a docker compose environment variable and read it in database.js with process.env.MongoDB_uri, then stop, rebuild, and up the containers to verify.

Celebrate completing the course by sharing your achievement on LinkedIn and tagging me. Provide feedback, leave a rating and review, and explore the bonus lecture with discounted coupons.