Fullstack app? What? TweetyTag!

Have you ever gotten an idea of a project that you MUST DO IT NOWWWWW?! It could be the ADHD in me or the excitement and need for a tool like this that I wanted to push myself to figure it all out NOW. Not giving myself time to figure it out and work on it little by little, nah, that wouldn’t be fun! In the last 4 days I’ve spent over 20 hours livestreaming and obsessing over it. My emotions have been fun… 🤩🤬🤯😱😭🥰

As I take time to step away to give myself the grace to give this project some space, I’d love to tell you about it!

If we haven’t had the opportunity to meet, let me introduce myself. My name is Jenn Junod. I’m the host of a podcast called Sh!t You Don't Want to Talk About, host of a livestream called Teach Jenn Tech, and facilitator of a weekly Twitter Space for Mental Health and Neurodiversity in Tech. OH that’s just a little of what I do, I’m also a DevRel and co-organizer of the Denver API Meetup. (I included links if you want to check out anything!) That tells you a bit of what I do, here’s a bit of who I am, I’ve gone through some crazy shit in my past, solitary confinement, lots of abuse, self-harm, and the list can go on, yet who I am now is a human that that throws herself under the bus (or as I like to say, bus chucks myself) to use the privilege I was born with to level the playing field. Give others a platform when they’ve been silenced or gone unheard. Technology helps us connect so, therefore, I dig technology, and luckily, I’m a quick learner. As someone that thrives on human connection, I know all humans are beautiful humans, so, Hello beautiful human!

I facilitate a weekly Twitter Space for Mental Health and Neurodiversity in Tech. At the beginning of this journey, in July 2022, I offered to tag the dope humans that needed reminders to show up. What I didn’t realize, is how much of a hassle it is! ohmygoodness! It’s annoying. It’s been simmering in the back of my mind while I’ve been working on the livestream Teach Jenn Tech. I mainly focus on JavaScript and Python yet 4 months into the show we’ve had people on about GoLang, Kubernetes, Docker, CSS, APIs and a bunch of random frameworks that all start to blur together. Taking 4 months of knowledge and cramming it into 1 project was well a mess. I had no idea that to make something autopost/autotag the dope humans that asked to be tagged in the TwitterSpace would be Fullstack?! It really started piecing it all together. It was a TwitterSpace with James Q Quick that I was trying to describe the project and it came out as TweetyTag, and then the name of the project was born!

Is this blog to tell you about the success of the app and learning I was a savant, no. I kinda wish it was, yet failure is an incredible teacher. For all the techies reading this, here’s a highlight:

• React Webapp needs a backend something to connect to MySQL with Aiven
  • Why Aiven you may ask… Cause I wanna learn more about Databases yo! Do you know about databases?
• I only wanted to use MySQL due to years of working at GoDaddy hosting and never really knowing what it does
• There are tools like Prisma that can create a connection from frontend to the backend to use the database
• React and Prisma probs aren’t friends, still not sure (Broken project repo )
  • Don’t expect a quick response if asking a question on StackOverflow… it’s been 3 days, nothing 🤣
• Restarting a project isn’t always bad
• Started using Prisma from scratch to connect to MySql with Aiven (It worked!)
• I can’t figure out how to get the Next-forms-js frontend to work with schema.prisma but I’ll get there
• Lastly, I’ll figure out the Twitter API or other things in the process.
• TweetyTag repo that explains the vision in the README.

Now let's take a look a what I was able to get done... Prisma to MySQL with Aiven connection repo with the walk-through of how to set it up.

Setup Your Database for TweetyTag

Before TweetyTag can auto post the users that have registered to be tagged in TwitterSpace reminders, the database must be setup. We will be using Prisma ORM as the tool to connect a Node backend to MySQL with Aiven.

1. Create database with Aiven
2. Prisma Client for database access
3. Read/Write Query
4. Write to database
5. Read from database

1. Create Service in your Aiven Account:

See Getting started with Aiven for MySQL.

Once the database is running you will see the following:

The connection information will become avaiable:

2. Using the Relational databases article from Prisma, Create project setup

Continue by connecting your database. Prisma has the default database provider set to postgresql so make sure to change the provider to mysql.

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

Change to:

datasource db {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

Include the following for our models.

model Post {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  title     String   @db.VarChar(255)
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
}

model Profile {
  id     Int     @id @default(autoincrement())
  bio    String?
  user   User    @relation(fields: [userId], references: [id])
  userId Int     @unique
}

model User {
  id      Int      @id @default(autoincrement())
  email   String   @unique
  name    String?
  posts   Post[]
  profile Profile?
}

Now that the Prisma Client is setup, we'll create a file to read and write to the database.

3. Create a new file named index.js:

This will allow you to read and write from the same file.

const { PrismaClient } = require('@prisma/client')

const prisma = new PrismaClient()

async function main() {
  await prisma.user.create({
    data: {
      name: 'Alice',
      email: 'alice@prisma.io',
      posts: {
        create: { title: 'Hello World' },
      },
      profile: {
        create: { bio: 'I like turtles' },
      },
    },
  })

  const allUsers = await prisma.user.findMany({
    include: {
      posts: true,
      profile: true,
    },
  })
  console.dir(allUsers, { depth: null })
}

main()
  .then(async () => {
    await prisma.$disconnect()
  })
  .catch(async (e) => {
    console.error(e)
    await prisma.$disconnect()
    process.exit(1)
  })

To ensure the database can write a query, run the following command in your terminal:

node index.js

4. Create a new file named write.js:

To query the DB seperately, add the following to write.js:

const { PrismaClient } = require('@prisma/client')

const prisma = new PrismaClient()

async function main() {
  await prisma.user.create({
    data: {
      name: 'Alice2',
      email: 'alice2@prisma.io',
      posts: {
        create: { title: 'Hello World' },
      },
      profile: {
        create: { bio: 'I like turtles' },
      },
    },
  })
}

main()
  .then(async () => {
    await prisma.$disconnect()
  })
  .catch(async (e) => {
    console.error(e)
    await prisma.$disconnect()
    process.exit(1)
  })

To ensure the database can write a query, run the following command in your terminal:

node write.js

5. Create a new file named read.js:

const { PrismaClient } = require('@prisma/client')

const prisma = new PrismaClient()

async function main() {
    const allUsers = await prisma.user.findMany({
      include: {
        posts: true,
        profile: true,
      },
    })
    console.dir(allUsers, { depth: null })
  }

main()
  .then(async () => {
    await prisma.$disconnect()
  })
  .catch(async (e) => {
    console.error(e)
    await prisma.$disconnect()
    process.exit(1)
  })

To ensure the database can read the query, run node read.js in your terminal.

node read.js

Success of the node read.js command will look like this:

[
  {
    id: 1,
    email: 'alice@prisma.io',
    name: 'Alice',
    posts: [
      {
        id: 1,
        createdAt: 2022-10-24T23:06:12.491Z,
        updatedAt: 2022-10-24T23:06:12.491Z,
        title: 'Hello World',
        content: null,
        published: false,
        authorId: 1
      }
    ],
    profile: { id: 1, bio: 'I like turtles', userId: 1 }
  }
]

Shoutout to all the incredible humans that helped see me through this journey to show on my GitHub that I do have a working repo. Thank you to all the new friends made during all these extra livestreams! Especially to the shows mods!! they deal with the creepers and for remembering to reply to stuff when I don’t, thank you Ben and Ryan!

Stay rad friends. In the next article of this blog series, we will review how to setup your Prisma Client to allow front end input into your database. In the final post, we will share how to connect to the Twitter API.

Follow the TweetyTag journey by following Jenn on:

• GitHub
• Twitter
• LinkedIn
• DevTo