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.

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.

  • 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!

  • 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

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.

  • 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

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 you can be given access to the endpoints. Let MSF know that…


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