Web Applications - V School | Better Humans, Better Outcomes

Sign in Subscribe

Web Applications

A collection of 59 posts

React Context

In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application.

Token Auth with JWTs Part 1 - Server Setup

Web Applications

Token Auth with JWTs Part 1 - Server Setup

Note: If you haven't yet read through the Authentication Basics post, you should go read through it now before moving on. Intro What we'll be working with is a simple todo list organizer and adding user authentication on it so that a user will only see his/her todo items

Intercepted

Write an Express server to handle a GET request that returns an object (of any kind) as a response. Write a middleware function in a separate JavaScript file that accepts the req, res, and next parameters, adds a property to the req, and allows the server to continue on with

Thing Finder

Choose a thing/noun of any kind, then write an express server with a GET route that sends back an array of that thing. Your GET endpoint should be able to check for any query parameters that may have been passed into the url of the request and filter the

Modularized Node Calculator

Modularized Node Calculator

Create a calculator program that takes 2 numbers and a string as inputs and can perform the following operations on those numbers: * Addition * Subtraction * Multiplication * Division * Exponentiation (raise the first number to the power of the second number) The 3rd string parameter represents which of the operations you want to

Convert Temperatures Filter

Convert Temperatures Filter

Part One Given an array of integers on the $scope of a controller, write an Angular filter that repeats through the temperatures and displays them on the view in either Celsius or Fahrenheit in the following format: 10°F or 10°C. To do this, you'll need to include a

Filter Tech Wish List

Filter Tech Wish List

Go back to your Tech Wish List app and use the built-in AngularJS currency filter to change all of your prices to Euros (€). Extra Credit: Consume the fixer.io API to use the current actual exchange rate to change the dollar prices into Euros.

Upgrade to Services

Upgrade to Services

Recently you completed a number of exercises including the $http service. Since things like HTTP requests can be used across multiple controllers, all of our HTTP calls should be made in a service of our own making, separate from the controller. To practice this and to help better understand how

Go Speed Clicker!

Go Speed Clicker!

Make a site that tracks how many times the user has clicked anywhere on the page (or a specific button if you prefer) and displays that click count to the user. Then, using localStorage or sessionStorage, make it so the number of clicks will remain on the screen even after

First full-stack application

Web Applications

First full-stack application

This is the last self-directed, larger-scale, full-stack application that you'll build in this course. Up to this point you've learned and practiced everything you need to know in order to build beautiful, data-driven web applications that can provide a real benefit to users. This will be a chance for you

Pokemon Pals

Exercise requirements You will have two routes 1. /pokemon 2. /pokemon/details The first route will make an http request to get a pokedex (http://pokeapi.co/api/v1/pokedex/{some-id}/). You will list each pokemon by name. Next to each pokemon will be a "details" button. When this button

Testing AngularJS Part 3 - Controllers with Dependencies

Web Applications

Testing AngularJS Part 3 - Controllers with Dependencies

This post builds off of the previous post which covers setting up your Angular project with Karma, Jasmine, and ngMock, as well as testing a basic controller with no external dependencies. If you haven't gone through that one yet, you'll probably want to start there first. For repetition's sake, and

Testing AngularJS Part 2 - Efficient Unit Testing

Web Applications

Testing AngularJS Part 2 - Efficient Unit Testing

This post takes a step down from covering syntax and processes for testing in AngularJS, and instead will wax a little philosophical. A clear understanding of the material presented in this post will lead you to avoid testing things that don't need to be tested and will save you time

Web Applications

'High' on 'Potenuse' & Services

Below we have an example controller that has several methods for geometric calculations on a right triangle. app.controller('TriangleController', ['$scope', function ($scope) { // here we have a triangle object $scope.triangle = { base: undefined, height: undefined }; $scope.findArea = function () { $scope.area = 0.5 * $scope.triangle.base * $scope.triangle.height }; $scope.

Testing AngularJS Part 1 - Karma, Jasmine, and ngMock

Web Applications

Testing AngularJS Part 1 - Karma, Jasmine, and ngMock

This is part of a series of posts on testing. If you haven't yet and you're new to testing in JavaScript, please read and follow along with the previous posts before moving on: 1. Testing Basics 2. Testing JavaScript with Jasmine 3. Karma It also assumes you're a relatively experienced

Programming Principles

Karma

As mentioned in the Testing Basics and Testing JavaScript with Jasmine posts, we'll be using the test runner Karma to run our JavaScript tests. When it comes time to test Angular code, we're going to need additional tools to help us deal with the AngularJS framework so we can test

Programming Principles

Testing Basics

The aim of this post is to help you gain the basic understanding of the principles and reasons behind testing, as well as to learn some basic testing terminology. What does "testing" mean in software development? Have you ever written a new feature into your code, and then had to

Testing JavaScript with Jasmine

Web Applications

Testing JavaScript with Jasmine

Before we can begin testing our Angular applications, we need to gain an understanding of how testing JavaScript works in general. Testing options There are 3 very popular frameworks you can use for testing javascript: Jasmine, Mocha, and QUnit. They all essentially do the same thing, and even look almost

Token Auth with JWTs Part 3 - Security and UX - React + Redux

Web Applications

Token Auth with JWTs Part 3 - Security and UX - React + Redux

This is part 3 in a series of tutorials about authentication. If you haven't already, get some additional context by going through the other parts: 1. Authentication Basics 2. Token Auth with JWTs Part 1 - Server Setup 3. Token Auth with JWTs Part 2 - React + Redux SET UP

Group Project with Authentication

Group Project with Authentication

Over the next few days, you'll be working in small, 2-3 person groups to create an application that encompasses most, if not all, of what we've learned so far in the class. At this point in the class you've learned pretty much everything you need to know to make a

Token Auth with JWTs Part 2 - React + Redux

Web Applications

Token Auth with JWTs Part 2 - React + Redux

This is part 2 of a multi-part series on setting up user authentication in a MERN-stack application using JSON Web Tokens. If you haven't been following along, please visit the other posts for a full understanding of the current project: 1. Authentication Basics 2. Token Auth with JWTs Part 1

Authentication Basics

Web Applications

Authentication Basics

Authentication is the process of allowing a user of your application to create an account, sign in, have specific user permissions, get data that only concerns them as a user, etc. Authentication includes a security concern (we don't want people to be able to see or manipulate each other's data)

Express req.params and req.query

Express req.params and req.query

When you're first learning about the Request/Response cycle, there's a fairly confusing topic that you'll run into frequently: URL parameters and query parameters (also called query strings). The reason these can be confusing is because people frequently interchange the two terms. So we're going to clarify what they are

Express Router

You have now experienced the beauty and simplicity of Node and Express - and you have created a few simple back-end servers and enabled your client to talk to it. How cool! So far we've been putting all of our routes on the app object that was created with the

Command-line game/utility

Command-line game/utility

You're tasked with making a command-line game or utility of your own choosing that you will run using Node.js. Think in the past of the command-line programs we've written, such as the Look-it-up Dictionary, Penguins vs. Communists, Princess is in Another Castle, Battleship, etc. Well now you get to