A GitHub account is required to follow along with this tutorial. NPM and node.js version 14.4 must be installed globally. This was developed on a mac book pro.

Description

This tutorial will show you how to deploy create-next-app to Netlify. I will also describe how to add an Environment key to the Netlify backend and how to use it in the app.

Initialize an app with create-next-app.

Open the terminal then type cd desktop and then type the command npx create-next-app. Then you will be prompted to give a name to your project. …


React Next.js Podcast Search — Demo

This is a single page server side rendered app which uses Alan AI to enable voice commands to search podcastsindex.org for relative podcasts.

Description

This AI ssr app was created with react framework Next.js bootstrapped with create-next-app. This AI app is hosted for free on Netlify (cloud computing platform). The podcast data is sourced through podcastsindex.org.

You can learn this

  • Create a server side rendered project with create-next-app.
  • Create an Alan Studio account and make a new project.
  • Initialize the Alan button to except voice commands.
  • Create an account at podcastindex.org generate an api key and secret.
  • In alan ai account create a command that…

Angular Universal Movie Search — Demo

This is the second part to the Angular 10 Movie Search (ssr ngUniversal), TMDB API tutorial. This tutorial will focus on adding some interactive features to the server side rendered app!

Display Movie Details

  • Show movie rating on hover.
  • Create a trailer link to open a dialog window preview.
  • Generate a dialog (modal) component with angular cli.

Let’s show some info about the movie when we hover over the movie image. The search payload provides a movie rating score 0–10. The rating (vote_average) can be converted to an array to show the rating as star icons equal to the length of the array.


Angular Universal Movie Search — Demo

Description

This application is made with Angular (version 10.0.4). This is a server-side rendering app that uses node.js and express and it searches for movie titles. This single page app is hosted for free on Heroku (cloud application platform). You will need to create a free account with themoviedb.org to participate with this tutorial. The instructions of how to procure a TMDB api key are below.

Software used in the creation of this app

  • Visual Studio Code 1.38.1
  • iterm2 3.3.12
  • Node.js 14.4.0
  • Angular CLI: 10.0.3
  • NPM 6.14.8
  • Git 2.15.2

Automatically installed locally by Angular cli

  • rxjs 6.5.5
  • typescript 3.9.7
  • webpack 4.43.0

Initialize a new angular project


Sort data for ui with a custom angular pipe

This is part 2 of Angular 9 and MySportsFeeds API Part 1. We left off with a very long list of NBA players with a large player image. I would like to make the list shorter, more readable and put it in a proper order that makes sense.

Things TODO

  • Sort the order of the list
  • Show top 20
  • Paginate next 20
  • Style the list

To help me sort the players by their point totals I am going to use angular cli to generate a pipe. I can add some code in the pipe that will sort my data from…


Getting Started with Angular 9 and MySportsFeeds

This is for sports stats lovers trying to build something with the latest angular framework. This article will show you how to get started using Angular 9 with the MySportsFeeds API.

I will fetch a list of NBA players, filter the response and sort the NBA players with the highest point total.

You will learn

  • Make an api request with the HttpClient Module
  • Filter the api response
  • Display the data

First you will need to be given access MySportsFeeds endpoints. As a developer working on a non-commercial app for a reduced monthly fee you can be given access to their…


Encrypt / Decrypt apiKey with Crypto-js

This is primarily for an existing angular app but this may be applicable for other use cases regarding encrypting data via node.js / express server.

If you have a scenario in where you might need to send a private apiKey to the client side of an Angular app this is an example of how it can be done using Crypto-js. In this example I am fetching a private config variable from a heroku app and sending the apiKey to the client-side. Since I don’t want the the apiKey exposed in the dev tools Network I must first encrypt the apiKey


Deploy create react app to Heroku. Demo

NPM (Node Package Manager), Node.js, Git, GitHub, Heroku and knowledge of how to write commands in a terminal will be required for this project. There are many ways to install NPM, Git and Node.js on your machine. I recommend researching the best way to install this software. Visiting the NPM, Git and the Node.js website is a good place to start.

I used a mac to create this app and I use iterm2 for my terminal. This is not required, every machine will come with its own terminal.

Software used for this application

Ian Poston

Front-end Developer. “Lighten up Francis”

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store