1 of 7

Learn through Creation

Learning GDF by creating an application

Throughout this documentation, I will be making references to a fictional bicycle rental application that I will be developing.

The problem statement for the business is the low utilization of bicycles in America. A study from PeopleForBIkes found that in 2019 that only 11% rode a bicycle at least once a week where 39% of the adult population owns a bicycle. To solve this problem, a platform will allow bike owners to list their bicycles on a rental marketplace and customers who want to ride a bicycle can rent those bicycles for a given time interval. We will talk about ideation in detail later in the documentation. It is important to note that this fictional application does not stand up to the scrutiny of defining problem statement for an actual business. In this documentation we do not perform the research expected of an actual application. It is only being used as it is an application that many people can relate to.

As you go through the docs, I recommend you follow along and build an application as well. It can be the bicycle rental application or if you are interested in your own application, feel free to build that instead.

In the sub sections, you will find step by step instructions for installing the following tools (all of which are free and open source):

In this documentation, I will be building application using javascript and Node.js. If you are also building a web application, it may be easier to do the same as you follow along with this course. You can also use the concept of transformation to convert it into another language later if you choose.

chatgpt-3.5

how many americans ride their bicyles

Understanding Modern Web Apps

How do modern web applications work?

This section is intended to provide those new to development a high level walkthrough of how web applications work.

Programming languages like JavaScript are used to create web applications, which are software programs that are accessed and run over the internet through a web browser. When a user accesses a web application, the code written in JavaScript is executed by the web browser, which translates the code into machine-readable instructions that the computer can understand and execute.

Web applications are typically composed of three main parts: the client-side code, the server-side code, and the database. The client-side code is written in JavaScript and runs on the user's web browser, while the server-side code is written in a server-side programming language like Node.js and runs on a web server. The database is used to store and retrieve data used by the web application.

When a user interacts with a web application, the client-side code sends requests to the server-side code, which processes the requests and sends responses back to the client-side code. This process is known as client-server communication and is a fundamental part of how web applications work.

In terms of compilation, web applications like those created using JavaScript are typically not compiled in the traditional sense. Instead, the client-side code is interpreted by the web browser at runtime, meaning that the code is translated into machine-readable instructions on the fly, as it is executed. This is in contrast to compiled programming languages like C++ or Java, where the code is compiled into machine code before it is executed.

Overall, programming languages like JavaScript are essential for creating web applications, which are widely used by people all over the world for a variety of purposes. The process of creating and running web applications involves a complex interaction between client-side code, server-side code, and a database, all of which work together to provide users with a rich and interactive web experience.

chatgpt-3.5:

describe programming languages in the context of javascript and web apps

Installing VS Code

How to install Visual Studio Code (VS Code) on Windows and Mac?

Installing Visual Studio Code on Windows

Open your web browser and go to the Visual Studio Code website at https://code.visualstudio.com/
Click on the "Download for Windows" button to download the installation file.
Once the download is complete, double-click on the installation file to start the setup process.
Follow the on-screen instructions to complete the installation process. This will include accepting the license agreement and choosing the installation location.
Once the installation is complete, click on the "Finish" button to close the setup wizard.
Visual Studio Code will now be installed on your computer and you can start using it.

Installing Visual Studio Code on Mac

Open your web browser and go to the Visual Studio Code website at https://code.visualstudio.com/
Click on the "Download for Mac" button to download the installation file.
Once the download is complete, double-click on the installation file to start the setup process.
Follow the on-screen instructions to complete the installation process. This will include accepting the license agreement and choosing the installation location.
Once the installation is complete, drag Visual Studio Code to the Applications folder.
You can now start Visual Studio Code by double-clicking on its icon in the Applications folder.
Visual Studio Code will now be installed on your Mac and you can start using it.

chatgpt-3.5

create a step by step guide to installing vs code on windows and mac

Installing Node.js / NPM

How to install node.js and NPM on Windows Mac?

Installing Node.js and npm on Windows

Open your web browser and go to the Node.js website at https://nodejs.org/
Click on the "Download" button to download the latest version of Node.js for Windows.
Once the download is complete, double-click on the installation file to start the setup process.
Follow the on-screen instructions to complete the installation process. This will include accepting the license agreement and choosing the installation location.
Once the installation is complete, click on the "Finish" button to close the setup wizard.
To verify that Node.js has been installed successfully, open the Command Prompt and type "node -v". This should display the version of Node.js that you have installed.
To verify that npm has been installed successfully, open the Command Prompt and type "npm -v". This should display the version of npm that you have installed.

Installing Node.js and npm on Mac

Open your terminal and run the following command to install Homebrew:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Once Homebrew is installed, run the following command to install Node.js:

brew install node

To verify that Node.js has been installed successfully, run the following command in your terminal:

node -v

To verify that npm has been installed successfully, run the following command in your terminal:

npm -v

Both Node.js and npm should now be installed and ready to use on your Mac.

chatgpt-3.5

create a step by step instruction on installing node.js and npm on windows and mac

Learn Computer Science

High level walkthrough of computer science

If you are new to programming, development, or computer science this section might be intimidating. Even if you do not fully understand all of these concepts and terms, please continue going through the framework to get hands on experience that should make this section clearer and make them topics you can research further at a later time.

Computer science is a vast field that encompasses various disciplines, from the theoretical foundations of algorithms and data structures to the practical aspects of software development and computer systems. Understanding the key concepts in computer science is essential for anyone interested in programming, software development, or pursuing a career in the field. In this article, we will delve into space-time complexity and other core computer science concepts.

Space-Time Complexity

Space-time complexity refers to the combined measurement of the resources, i.e., time and memory, that an algorithm uses to solve a problem. Analyzing an algorithm's space-time complexity helps determine its efficiency and scalability. Two key aspects of space-time complexity are:

Time Complexity

Time complexity is the amount of time an algorithm takes to execute as a function of the input size. Commonly used notations to describe time complexity are Big O (O), Omega (Ω), and Theta (Θ).

Space Complexity

Space complexity is the amount of memory an algorithm uses as a function of the input size. Like time complexity, space complexity is also described using Big O, Omega, and Theta notations.

Algorithms and Data Structures

Algorithms are step-by-step procedures for solving problems, while data structures are ways of organizing and storing data. Understanding and choosing the right algorithms and data structures for a particular problem is crucial to achieving optimal performance in software applications.

Programming Paradigms

There are several programming paradigms, each with its own set of principles and techniques. Some common paradigms include:

Imperative Programming

Focuses on describing the steps to solve a problem using statements that change a program's state.

Object-Oriented Programming (OOP)

Organizes code using objects and classes, emphasizing the use of encapsulation, inheritance, and polymorphism.

Functional Programming

Treats computation as the evaluation of mathematical functions, avoiding mutable state and side effects.

Operating Systems

An operating system (OS) is the software that manages computer hardware and software resources. It provides an interface between the user and the hardware, enabling the execution of various applications. Key OS concepts include processes, threads, memory management, and file systems.

Computer Networks

Computer networks enable communication and data exchange between computers and other devices. Understanding networking concepts, such as the OSI model, IP addressing, routing, and transport protocols, is essential for developing network applications and managing network infrastructure.

Databases

Databases store and manage data in a structured and organized manner. Familiarizing oneself with database management systems (DBMS), data models (e.g., relational, NoSQL), and query languages (e.g., SQL) is vital for developing data-driven applications.

Software Engineering

Software engineering is the discipline of designing, developing, and maintaining software systems. It encompasses methodologies (e.g., Agile, Waterfall), software architecture, testing, and version control, among other topics.

Computer science is a multifaceted field with numerous concepts and principles that guide the development and management of computer systems and software applications. Understanding space-time complexity, algorithms, data structures, programming paradigms, operating systems, computer networks, databases, and software engineering is vital for excelling in the world of computer science.

Learn Javascript

High level walkthrough of javascript key concepts

JavaScript is a versatile programming language used for both client-side and server-side applications. React is a popular JavaScript library for building user interfaces, and Next.js is a powerful framework built on top of React that simplifies the development of scalable and performant web applications.

In this tutorial, we'll introduce some important JavaScript concepts and demonstrate how to use them with React and Next.js by building a simple bicycle rental application. We'll cover the following topics:

Running JavaScript code using online tools
Variables, Constants, and Data Types
Functions
Conditional Statements
Loops
Arrays
Objects
Asynchronous Programming
React Components
Next.js Pages

Prerequisites

To follow along, you'll need to have Node.js and npm (Node package manager) installed on your computer. If you don't have them, refer to the.

0. Running JavaScript code using online tools

Before we dive into the code, you may want to try out some JavaScript code snippets without setting up a complete project. Online tools like JSFiddle () or CodeSandbox () allow you to write, run, and share JavaScript code directly in your browser.

To get started, visit one of these websites, create a new fiddle or sandbox, and start writing your JavaScript code in the designated area.

Getting Started

First, let's create a new Next.js application using the terminal:

1. Variables, Constants, and Data Types

JavaScript has three ways to declare variables: var, let, and const. We'll be using let and const in this tutorial.

JavaScript supports several data types, such as strings, numbers, booleans, and objects.

2. Functions

Functions are blocks of code that can be defined and called by name. Functions can take parameters and return values.

3. Conditional Statements

Conditional statements execute code based on certain conditions. The most common conditional statement is the if statement.

4. Loops

Loops are used to execute a block of code repeatedly. The most common loop in JavaScript is the for loop.

5. Arrays

Arrays are used to store multiple values in a single variable.

6. Objects

Objects are a collection of properties and methods.

7. Asynchronous Programming

JavaScript supports asynchronous programming using callbacks, Promises, and the async/await syntax.

8. React Components

React components are the building blocks of the user interface. Components can have state and props, and they return JSX to render the UI.

Create a new file BicycleList.js in the components folder:

9. Next.js Pages

Next.js automatically creates a route for each page in the pages folder. To display the list of bicycles, create a new file index.js in the pages folder:

Setting up your Next.js Chakra Project

Step by step instruction to set up your project

Setting up a Next.js project with Chakra UI involves several steps, including installing the necessary dependencies, configuring your project, and adding basic components.

If you followed the instructions from the Learn Javascript section, you can skip to the Change Project Directory Section.

Follow these step-by-step instructions to get started:

Install Node.js and npm

Ensure that you have Node.js (version 12 or higher) and npm (version 6 or higher) installed on your system. You can check the installed versions by running the following commands in your terminal or command prompt:

node -v
npm -v

Create a new Next.js project

Run the following command to create a new Next.js application using the default starter template:

npx create-next-app your-app-name

Replace your-app-name with your desired application name.

Change to the project directory

Navigate to the newly created project directory by running:

cd your-app-name

You can check which project directory you are in by looking at your terminal in VS Code or other IDE.

Install Chakra UI dependencies

In the project directory, run the following command to install Chakra UI and its peer dependencies:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Install Chakra UI icons (optional)

If you want to use Chakra UI's icon library, run the following command to install:

npm install @chakra-ui/icons

Set up a custom _app.js file

In the "pages" directory of your project, create or edit the _app.js file to include the ChakraProvider. Replace the existing content with the following code:

import * as React from 'react';
import { ChakraProvider } from '@chakra-ui/react';

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

Start using Chakra UI components

Now, you can start using Chakra UI components in your Next.js project. As an example, open the "pages/index.js" file and replace its content with the following code:

import * as React from 'react';
import { Box, Heading, Button } from '@chakra-ui/react';

export default function Home() {
  return (
    <Box p={4}>
      <Heading as="h1" mb={4}>
        Welcome to Next.js with Chakra UI
      </Heading>
      <Button colorScheme="blue">Get Started</Button>
    </Box>
  );
}

Run the development server

In the terminal or command prompt, run the following command to start the development server:

npm run dev

Open your browser and navigate to http://localhost:3000 to see your Next.js project with Chakra UI up and running.

Learn Javascript

High level walkthrough of javascript key concepts

Running JavaScript code using online tools
Variables, Constants, and Data Types
Functions
Conditional Statements
Loops
Arrays
Objects
Asynchronous Programming
React Components
Next.js Pages

Prerequisites

To follow along, you'll need to have Node.js and npm (Node package manager) installed on your computer. If you don't have them, refer to the.

0. Running JavaScript code using online tools

To get started, visit one of these websites, create a new fiddle or sandbox, and start writing your JavaScript code in the designated area.

Getting Started

First, let's create a new Next.js application using the terminal:

npx create-next-app bicycle-rental-app
cd bicycle-rental-app
npm run dev

Replace "bicycle-rental-app" with your desired project name. The development server will start on .

1. Variables, Constants, and Data Types

JavaScript has three ways to declare variables: var, let, and const. We'll be using let and const in this tutorial.

const rentalRate = 10; // Rental rate per hour in dollars
let numberOfBikes = 20; // Total number of bikes available

JavaScript supports several data types, such as strings, numbers, booleans, and objects.

2. Functions

Functions are blocks of code that can be defined and called by name. Functions can take parameters and return values.

function calculateRentalCost(hours) {
  return rentalRate * hours;
}

const rentalCost = calculateRentalCost(3);
console.log(rentalCost); // 30

3. Conditional Statements

Conditional statements execute code based on certain conditions. The most common conditional statement is the if statement.

let customerAge = 16;

if (customerAge < 18) {
  console.log("A parent or guardian must sign the rental agreement.");
} else {
  console.log("Proceed with the rental.");
}

4. Loops

Loops are used to execute a block of code repeatedly. The most common loop in JavaScript is the for loop.

for (let i = 1; i <= numberOfBikes; i++) {
  console.log(`Bike #${i} is ready for rental.`);
}

5. Arrays

Arrays are used to store multiple values in a single variable.

const availableBikes = [
  { id: 1, type: "Mountain" },
  { id: 2, type: "Road" },
  // ...
];
console.log(availableBikes[0].type); // Mountain

6. Objects

Objects are a collection of properties and methods.

const bicycleRental = {
  rentalRate: 10,
  numberOfBikes: 20,
  availableBikes: [
    { id: 1, type: "Mountain" },
    { id: 2, type: "Road" },
    // ...
  ],
  rentBike: function (bikeId) {
    this.numberOfBikes--;
    console.log(`Bike #${bikeId} rented. Remaining bikes: ${this.numberOfBikes}`);
  },
  returnBike: function (bikeId) {
    this.numberOfBikes++;
    console.log(`Bike #${bikeId} returned. Remaining bikes: ${this.numberOfBikes}`);
  },
};

bicycleRental.rentBike(1); // Bike #1 rented. Remaining bikes: 19
bicycleRental.returnBike(1); // Bike #1 returned. Remaining bikes: 20

7. Asynchronous Programming

JavaScript supports asynchronous programming using callbacks, Promises, and the async/await syntax.

async function fetchBicycleData() {
  const response = await fetch("https://api.example.com/bicycles");
  const data = await response.json();
  return data;
}

fetchBicycleData().then((bicycles) => {
  console.log(bicycles);
});

8. React Components

React components are the building blocks of the user interface. Components can have state and props, and they return JSX to render the UI.

Create a new file BicycleList.js in the components folder:

import React from "react";

const BicycleList = ({ bicycles }) => {
  return (
    <div>
      <h2>Available Bicycles</h2>
      <ul>
        {bicycles.map((bicycle) => (
          <li key={bicycle.id}>
            {bicycle.type} - Bike #{bicycle.id}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default BicycleList;

9. Next.js Pages

Next.js automatically creates a route for each page in the pages folder. To display the list of bicycles, create a new file index.js in the pages folder:

javascriptCopy codeimport React, { useState, useEffect } from "react";
import BicycleList from "../components/BicycleList";

const bicyclesData = [
  { id: 1, type: "Mountain" },
  { id: 2, type: "Road" },
  // ...
];

export default function Home() {
  const [bicycles, setBicycles] = useState([]);

  useEffect(() => {
    // You can replace this with a call to fetchBicycleData()
    setBicycles(bicyclesData);
  }, []);

  return (
    <div>
      <h1>Bicycle Rental Application</h1>
      <BicycleList bicycles={bicycles} />
    </div>
  );
}

Now, you can run the application by executing npm run dev in the terminal, and visit to see the bicycle rental application in action.