inside the intersect

Nextjs Web app for the intersect

This is continuation of the intersect project from

The Nextjs App for the intersect

I’ll quickly use a template to create the nextjs app with basic setup
with Typescript, Tailwind support because css is boring.

git clone nextjs-tailwind-typescript-starteryarn

This will give all the required tools already setup. So that we can get the app up and running in no time

  • You can use your preferred method for making a HTTP get request but I’m using axios in this one.
# lib/get_search.ts
import axios, { AxiosRequestConfig } from "axios";
export const getImages = async (searchString: string) => {
const config: AxiosRequestConfig = {
params: { q: searchString },
headers: { Authorization: process.env.NEXT_PUBLIC_API_KEY },
// Authorization header we set in the server
const data = await axios.get(
  • We’ll also create a flash-screen component
# /components/flash_screen.tsx
import { useEffect, useState } from "react";
const FlashScreen = (props) => {
const [currImage, setImage] = useState(0);
const toggleImages = async (index: number, pass: number) => {
if (index < props.images.length) {
await new Promise((resolve) => setTimeout(resolve, 100));
return toggleImages(++index, pass);
if (props.images.length < 70 && pass < 2) {
return toggleImages(0, ++pass);
useEffect(() => {
toggleImages(0, 1);
}, []);
return (
<div className="h-screen w-full flex-grow flex flex-col justify-items-center items-center bg-black">
{ string, index: number) => (
className={"w-full object-cover h-full".concat(
index == currImage ? " " : " hidden"
export default FlashScreen;
  • And finally the index.tsx
# pages/index.tsx
import { useState } from "react";
import { getImages } from "../lib/get_images";
import FlashScreen from "../components/flash_screen";
import NextHead from "next/head";
import { useRouter } from "next/router";
const Home = () => {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [images, setImages] = useState([]);
const [showImages, setShowImages] = useState(false);
let query: string = "";
const onSubmitButton = async () => {
const data = await getImages(query);
/// Call on mount
const handleChangeEvent = (e: any) => (query =;
return (
<div className="bg-black text-white">
{showImages ? (
onEnd={() => {
) : (
<div className="flex flex-col">
<div className="h-screen w-full flex flex-col justify-items-stretch ">
<Spacer />
{loading ? (
<div className="flex flex-col justify-items-center items-center space-y-10">
<h1 className="bg-red-600 rounded-lg text-3xl h-10 p-1 text-center">
) : (
<div className="flex flex-col justify-items-center items-center space-y-10">
<h1 className="bg-red-600 rounded-lg text-3xl h-10 p-1 text-center">
The Intersect
placeholder="search .."
className="text-black bg-gray-200 rounded-lg text-sm p-2"
onChange={(e) => handleChangeEvent(e)}
className="bg-red-600 text-white p-3 rounded-lg hover:shadow-lg text-bold"
<Spacer />
<div className="p-10 text-center text-xs text-gray-400">
export default Home;
const Spacer = () => <div className="flex-grow"></div>;
  • Now we can just run our app using
yarn dev




onw to 10x developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Here’s how you can easily manage multiple git accounts if you’re using ssh keys.

gulp < grunt < webpack

HTML, CSS, Bootstrap & JavaScript Learning.

Do you promise to call back?

Picking Numbers

VR positional tracking experiments with AR.js + A-Frame (I). Single marker scene.

Inheritance, Abstract classes and Class Mixin in Javascript

Trigger parent method from a child in JS class

Automating task to run on startup in VSCode

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
Navin Kodag

Navin Kodag

onw to 10x developer

More from Medium

Complete email/password authentication with firebase-9 and nextjs.

Keystone.js custom fields: map component

Migrating to Next.js

Next.js Spotify Authentication