React Next.js SSR and AlanAI | Podcast Search Netlify App Tutorial

React Next.js Podcast Search — Demo

Description

You can learn this

Software used for this application

Initialize an app with create-next-app.

Sign up for an account at Alan Studio.

Create a new project and get alan ai api key.

Set up voice commands.

//pages/index.jsimport Head from 'next/head'
import styles from '../styles/Home.module.css'
import { useEffect } from 'react'
const alanKey = 'your-key-here'
export default function Home() {

useEffect(() => {
const alanBtn = require('@alan-ai/alan-sdk-web');
alanBtn({
key: alanKey,
onCommand: () => {}
})
}, [])

return (
<div className={styles.container}>
<Head>
<title>Title</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Title
</h1>
<p className={styles.description}>
description
</p>
<div className={styles.grid}>
content...
</div>
</main>
<footer className={styles.footer}>
Created by Ian Poston 2021
</footer>
</div>
)
}

Create account at podcastindex.org

Create a command that sends an API request.

//alan studio projectintent('What is this?', reply('This is a react AI project.'));const API_KEY = 'PodcastIndex apiKey';
const SECRET = 'PodcastIndex secret';
//Podcasts by source
intent('Give me podcasts from $(source* (.+))', (p) => {
let PODCAST_API_URL = 'https://api.podcastindex.org/api/1.0/search/byterm?q='

if(p.source.value) {
PODCAST_API_URL = `${PODCAST_API_URL}${p.source.value.toLowerCase().split(" ").join('-')}`
p.play({url: PODCAST_API_URL, key: API_KEY, secret: SECRET})
}
});

List podcast data in ui.

Deploy to Netlify.

References

New Features

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