Thanks!

@saltnburnem

#MWTC | #DeveloperCommunity

🛸

Midwest Tech Conference

🛸

#MWTC

@saltnburnem

🛸

#MWTC | #DeveloperCommunity

#DeveloperCommunity

@saltnburnem

🛸

#MWTC | #DeveloperCommunity

Shownotes

@saltnburnem

🛸

#MWTC | #DeveloperCommunity

Chris DeMars

@saltnburnem

Senior Developer Advocate

REDACTED

🛸

#MWTC | #DeveloperCommunity

Chris DeMars

@saltnburnem

Senior Developer Advocate

🛸

#MWTC | #DeveloperCommunity

@saltnburnem

🛸

More about me!

International Speaker
From Detroit - 313!
Love Spooky Stuff
Love Tattoos
Competitive Paintball Player
Competitive Bass Angler

#MWTC | #DeveloperCommunity

Close Encounters

@saltnburnem

of the

Data Kind

Exploring UFO Sightings with MongoDB and NextJS

@saltnburnem

First

#MWTC | #DeveloperCommunity

@saltnburnem

UFO/UAP History

Sightings & Abductions

#MWTC | #DeveloperCommunity

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

July 1947

#MWTC | #DeveloperCommunity

@saltnburnem

Betty & Barney Hill

#MWTC | #DeveloperCommunity

@saltnburnem

Betty & Barney Hill

First Documented Abduction Case

#MWTC | #DeveloperCommunity

@saltnburnem

March 20th, 1966

Dexter, MI

#MWTC | #DeveloperCommunity

@saltnburnem

Feb - April 1973

Piedmont, MO

#MWTC | #DeveloperCommunity

@saltnburnem

Tech Time!

#MWTC | #DeveloperCommunity

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

The React Framework for the Web

Built-in Optimizations

Dynamic HTML Streaming

React Server Components

Route Handlers

Server Actions

npx create-next-app@latest

#MWTC | #DeveloperCommunity

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

The world's most popular document database

Document Model

Flexible Schema

Distributed and Resilient

Horizontally Scale

#MWTC | #DeveloperCommunity

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

All-in-one platform to build, deploy, manage, and extend modern web apps

Preview URLs for sharing work in progress

Security Tools

Monitoring for performance, visitor traffic, and behavior.

Custom Serverless Forms

Netlify MCP Server

#MWTC | #DeveloperCommunity

So Much More!

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

👽

#MWTC | #DeveloperCommunity

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

Install the MongoDB integration into your Next app!

#MWTC | #DeveloperCommunity

@saltnburnem

Install the MongoDB integration into your Next app!

npx create-next-app --example with-mongodb close-encounters

#MWTC | #DeveloperCommunity

@saltnburnem

npx create-next-app --example with-mongodb close-encounters

cd close-encounters

npm install

npm run dev

#MWTC | #DeveloperCommunity

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

Compass is a free interactive tool for querying, optimizing, and analyzing your MongoDB data. Get key insights, drag and drop to build pipelines, and more.

#MWTC | #DeveloperCommunity

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

Components

Pages

#MWTC | #DeveloperCommunity

@saltnburnem

Components

EncounterCard

Header

EncounterCard.tsx

Header.tsx

#MWTC | #DeveloperCommunity

@saltnburnem

Pages - index.tsx

import Head from "next/head";
import clientPromise from "../lib/mongodb";
import type { InferGetServerSidePropsType, GetServerSideProps } from "next";
import Container from '@mui/material/Container';
import Box from '@mui/material/Box';
import Header from '../components/Header/Header';
import EncounterCard from '../components/EncounterCard/EncounterCard';
import TextField from '@mui/material/TextField';
import { useState } from "react";
import Typography from "@mui/material/Typography";

#MWTC | #DeveloperCommunity

@saltnburnem

Pages - index.tsx

type Encounter = {
  _id: string;
  name: string;
  location: string;
  close_encounter_level: string;
  extraterrestrial_type: string;
  image: string;
  url: string;
};

#MWTC | #DeveloperCommunity

@saltnburnem

Pages - index.tsx

type IndexProps = {
  isConnected: boolean;
  encounters: Encounter[];
};

#MWTC | #DeveloperCommunity

@saltnburnem

Pages - index.tsx

export const getServerSideProps: GetServerSideProps<
  IndexProps
> = async () => {
  try {
    await clientPromise;
    const client = await clientPromise;
    const db = client.db("ufos");
    const encounters = await db
      .collection("sightings-encounters")
      .find({})
      .limit(30)
      .toArray();

    return {
      props: { isConnected: true, encounters: JSON.parse(JSON.stringify(encounters)) }
    };
  } catch (e) {
    console.error(e);
    return {
      props: { isConnected: false, encounters: [] },
    };
  }
};

#MWTC | #DeveloperCommunity

@saltnburnem

Pages - index.tsx

export default function Home({
  encounters
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  const [search, setSearch] = useState("");
  console.log(search);

  const filterEncounters = (encounter: Encounter) => {
    return encounter.name.toLowerCase().includes(search.toLowerCase()) || encounter.location.toLowerCase().includes(search.toLowerCase());
  }

  const filteredEncounters = encounters.filter(filterEncounters);

  return (
    <>
      <Head>
        <title>UFO Encounters and Sightings</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <Container maxWidth="lg">
        <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column', paddingTop: '5rem' }}
          component="form"
          sx={{
            '& > :not(style)': { m: 1, width: '50ch', fontWeight: 'bold' },
          }}
          noValidate
          autoComplete="off"
        >
          <TextField onChange={(e) => setSearch(e.target.value)} id="outlined-basic" label="Search for UFO Sightings" variant="outlined" />

          <Typography variant="body2" color="text.secondary">
            *This is a list of some sample data of UFO/UAPUSO abductions and sightings in the United States. Search for an encounter by name or location.
          </Typography>

        </Box >
        <main>
          <Box display="grid" gridTemplateColumns="repeat(3, 1fr)" gap={4}>
            <EncounterCard encounters={filteredEncounters} />
          </Box>

        </main>
      </Container >
      <footer>
        <a
          href="https://www.digitalocean.com/"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <img src="/do-blue-h-logo.png" alt="DigitalOcean Logo" className="logo" />
        </a>
      </footer>
    </>
  );
}

#MWTC | #DeveloperCommunity

@saltnburnem

Components - Header.tsx

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

#MWTC | #DeveloperCommunity

@saltnburnem

Components - Header.tsx

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';

const Header = () => {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static" sx={{ backgroundColor: '#00ff60' }}>
        <Toolbar variant="dense">
          <Typography variant="h6" component="div" sx={{ flexGrow: 1, color: 'black' }}>
            UFO Encounters & Abductions
          </Typography>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

export default Header;

#MWTC | #DeveloperCommunity

@saltnburnem

Components - Header.tsx

const Header = () => {
  return (
    <Box sx={{ flexGrow: 1 }}>
      <AppBar position="static" sx={{ backgroundColor: '#00ff60' }}>
        <Toolbar variant="dense">
          <Typography variant="h6" component="div" sx={{ flexGrow: 1, color: 'black' }}>
            UFO Encounters & Abductions
          </Typography>
        </Toolbar>
      </AppBar>
    </Box>
  );
}

export default Header;

#MWTC | #DeveloperCommunity

@saltnburnem

Components - EncounterCard.tsx

import * as React from 'react';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';

#MWTC | #DeveloperCommunity

@saltnburnem

Components - EncounterCard.tsx

import * as React from 'react';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';

type Encounter = {
  _id: string;
  name: string;
  location: string;
  close_encounter_level: string;
  extraterrestrial_type: string;
  image: string;
  url: string;
};

interface EncounterProps {
  encounters: Encounter[];
}

#MWTC | #DeveloperCommunity

@saltnburnem

Components - EncounterCard.tsx

type Encounter = {
  _id: string;
  name: string;
  location: string;
  close_encounter_level: string;
  extraterrestrial_type: string;
  image: string;
  url: string;
};

interface EncounterProps {
  encounters: Encounter[];
}

#MWTC | #DeveloperCommunity

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

#MWTC | #DeveloperCommunity

@saltnburnem

What did we learn?

NextJS

UFO History

Mongo DB/Compass

Netlify

Storing Data and Deploying in the Cloud

#MWTC | #DeveloperCommunity

Shownotes

@saltnburnem

🛸

#MWTC | #DeveloperCommunity

@saltnburnem

Thanks!

https://github.com/chrisdemars/close-encounters-of-the-data-kind

#MWTC | #DeveloperCommunity