Technical Tutorials

Welcome to Technical Tutorials, hosted by Jacqui Kane([email protected])

Use these tutorials to skill-up before an interview, or as a basis to build your own awesome applications! Here is a summary of the categories. Click Pathways Tutorials, and see tutorials listed by concentration. Click the category, and find the tutorial by using the navigation link on the back of the tutorial card.

Here is a short list of what we have so far, tutorials repository project is being built!: Purdue Pete’s Meetings App: Purdue Pete’s Meetings App, Using Node.js, EJS Hanging On To Meeting Data Requires Persistence! : Hanging On To The Meetings Data, Purdue Pete’s Meetings App With SQLite Oh CRUD! : Oh CRUD! Purdue Pete’s Meetings Management, Create-Read-Update-Delete +React With Caution …​ : Using React To Build A Cards Based Meetings App Are You On The Right Route? : The Right React Route - Using React Router and Virtual Pages In A Meetings App React Responsively : Responsive Design Techniques, React Hooks, Props

Purdue Pete's Meetings Reminder App (Node.js, EJS), #1 of 3

Node.js is a cross-platform, open-source JavaScript runtime environment that can run on multiple operating systems, like Windows and macOS. EJS is a templating engine. What's a template engine? Software that supports injecting data into HTML, and supporting the dynamic generation of HTML content.


In this tutorial, you will see how the EJS templating engine is brought into your Node.js application to create dynamic page content, and modularize the code base. You will be creating a simple application that shows a list of reminders. That list is rendered using EJS, to selectively display items in a list, and pass values dynamically to the display.

Purdue Pete’s Meetings App

Purdue Pete's Meetings Reminder App++ (Node.js, EJS, SQLite), Persisting Meeting Data, #2 of 3

Purdue Pete needs to persist the meeting data, with the help of a database!


In the last Node/Express/EJS tutorial, you used dummy data from an array, to represent Purdue Pete's meetings. This data is not persisted, if these were real meetings, you would expect them to come from a central source, like a database. In this tutorial, you will

  • add support for a relational database, which is the one with tables! We will use SQLite and SQLite3, to build the code base we need for the database connection and query. Remember, a query is how we get data back from a database.
  • apply more Bootstrap styling

Hanging On To Meeting Data Requires Persistence! : Hanging On To The Meetings Data, Purdue Pete’s Meetings App With SQLite

Oh CRUD! Purdue Pete's Meetings Reminder App++ (Node.js, EJS, SQLite), Persisting And Manipulating Meeting Data, #3 of 3

Purdue Pete can create a new meeting, but what if he decides to cancel the odd meeting, maybe update a time, review some details? There is a special term for this - CRUD, Create, Read, Update, Delete ... meetings from the Meetings Database.


In your CRUD project, you are building tutorial 3 on top of tutorial 2, which was built on tutorial 1. Just in case you are starting a new project each time, make sure that you are using the correct imports and middleware to support the HTTP requests and the route handler request and response objects.

A company typically has a requirement to list products and to manage inventory, and that could be services as well as tangible items like coffee or clothing. Business applications revolve around representing and manipulating this data. Can you think of any business that does not concern itself with managing data? Data represents the company’s offerings, the reason that the business is in operation. Businesses are dynamic - new products or services are added, existing products or services might be removed or modified. You have an application that reads data from a database, but this data has been seeded by the application – it does not represent a product or service that has been added, because the ability to extend product inventory has not been implemented. You do not have the ability to delete or remove an item that is no longer a part of the business offering. You cannot update an item to reflect new considerations. In your job as a software developer, you may be tasked with the creation of a CRUD application. A CRUD application is a key building block for software engineers, and concerns data management. CRUD is an acronym for

  • Create – the process of adding a product or service
  • Read – getting the details about a product or service
  • Update – modifying the details of a product or service
  • Delete – removing a product or service from the company’s offerings
So far, you have the Read covered. Now let’s tackle the other 3!

Oh CRUD! : Oh CRUD! Purdue Pete’s Meetings Management

Purdue Pete's React-ive Meetings App (React, JSX) , #1 of 3

Welcome to React, one of the most popular libraries supporting JavaScript to create lean, modularized and effective web pages!

The average time to learn React ranges from 1 month to 6 months, learn meaning become an experienced React developer. So, consider this tutorial an introduction to thinking in components, and familiarization with the concepts and techniques used in a component based architecture.


Here is what you will be doing in this tutorial:

  1. you will use the npx utility, with create-react-app, to scaffold a boiler-plate React application
  2. you will use JSX to represent a variable on your web page
  3. you will create your own component and add this to the application
  4. you will use the props object to pass data between react components
  5. you will use the JavaScript Array map method to create a list of objects
  6. you will use JSX to create a list of components, based on one component declaration
  7. you will style a React component
  8. you will use a hook in React to coordinate changing the state of a variable, with an action in your application

React With Caution …​ : React With Caution …​

Purdue Pete's React-ive Meetings App - What Route Will You Take?(React, JSX) , #2 of 3

This tutorial continues React Tutorial #1.


In React, every application is a ‘single page’ one. That is why React is so efficient, there is not much content in the application itself in terms of multiple .html files to be served to the client. However, single page web sites can only go so far, and we do have to provide a way of differentiating content based the traditional notion of using pages, albeit virtual ones in the case of React.

What is Page Routing? This is being able to navigate to different pages of an application, demonstrated by the use of a navigation bar containing menu options, like the options Home, About and Contact. Page routing would support navigation to a Home page, an About page and a Contact page. React App does not support page routing, so in order to implement routing a very popular solution (amongst others!) is to use the code base from React Router – this is what we do here. React Router supports the addition of multiple routes through the application, like a traditional set of pages to navigate to the home page, an about page and a contact page.

In this tutorial, you will

  1. Create a set of 3 routes using React, that enable ‘navigation’ to other ‘panels’. The panels are virtual pages, because they are not stored as markup in traditional .html files
  2. Wire the routes to React code that handles each route and render the expected content

Are You On The Right Route? : The Right React Route?

Purdue Pete's React-ive Meetings App - React Responsively...(React, JSX) , #3 of 3

This tutorial continues React Tutorial #2.


Responsiveness is a part of any complete web application, we have to remember mobile first, and the importance of prioritizing layouts on smaller devices like cell phones. This is especially important in commercial applications in which effective rendering of products leads to a good user experience when accessing the site or web app on a mobile device. Hopefully a good user experience will lead to a sale of a product or service.

Traditionally, we integrate responsiveness by using key features of HTML/CSS, like Flexbox and media queries. In this tutorial, you will see how to use JSX to apply styles depending on the status of the application, and so enable responsiveness in terms of a hamburger menu. This is a small and specific example, however you can use the techniques presented to add your own extended strategy for responsive layouts.

React Responsively : React Responsively!