DEV Community: Jesse Hall - codeSTACKr

It’s Happening! Vercel 🤝 MongoDB

Jesse Hall - codeSTACKr — Wed, 10 Sep 2025 12:00:00 +0000

Setting up a MongoDB Atlas database for your Vercel projects just became incredibly easy. MongoDB and Vercel have partnered to bring native database integration directly into the Vercel ecosystem, eliminating the usual setup friction and configuration headaches.

In this tutorial, we'll walk through the complete process of creating a new Next.js application with MongoDB Atlas, deploying it to Vercel, and connecting everything together. The best part? The entire database setup takes just three clicks.

💡 Check out the MongoDB Atlas native integration in the Vercel Marketplace!

What you'll build

By the end of this tutorial, you'll have a fully functional Next.js application connected to a MongoDB Atlas database, deployed on Vercel, and ready for development.

Prerequisites

Before we start, make sure you have:

Node.js installed on your machine.
A Vercel account (free tier works perfectly).
A MongoDB Atlas account (also free—no credit card required).
Basic familiarity with Next.js and React.

Creating your Next.js application with MongoDB

We'll use the official MongoDB example template to get started quickly. This template comes pre-configured with MongoDB connection logic.

Open your terminal and run:

npx create-next-app --example with-mongodb nextjs-mongodb -y

This command does several things:

Creates a new Next.js application using the with-mongodb example
Names the project nextjs-mongodb (you can choose any name you prefer)
The -y flag automatically accepts all default options

Navigate to your new project directory:

cd nextjs-mongodb

Setting up version control

Before we deploy, let's initialize a Git repository. This step is important because Vercel automatically redeploys your application when you push changes to your repository.

git init
git add .
git commit -m "Initial commit"

If you want to push this to GitHub (recommended), create a new repository on GitHub and connect it:

git remote add origin https://github.com/yourusername/your-repo-name.git
git branch -M main
git push -u origin main

Connecting to Vercel

Now, we'll link this project to Vercel using the Vercel CLI. If you don't have it installed, run npm i -g vercel first.

vercel link

Follow the prompts to:

Log in to your Vercel account (if not already logged in).
Link to an existing project or create a new one.
Select your project directory.

Adding MongoDB Atlas through Vercel

Here's where the magic happens. You can add MongoDB to your project in two ways:

Option 1: Through your project dashboard

Go to your Vercel project dashboard.
Navigate to the "Storage" tab.
Click "Create Database."
Select "MongoDB Atlas."

Option 2: Through the Vercel Marketplace

Go to the Vercel Marketplace.
Search for "MongoDB."
Select "MongoDB Atlas."

Both paths lead to the same integration process:

Select "Install": This starts the integration process.
Choose your configuration:
- Cluster: Select the cluster tier (M0 Sandbox is free and perfect for development).
- Region: Choose the region closest to your users.
- Plan: The free tier gives you 512 MB of storage and is free forever.
- Click "Continue."
Enter Database Name: Give your database a descriptive name, or keep the auto-generated one, then click "Continue."
Select "Done": This finalizes the database creation.
Select "Connect Project": This connects the database to your Vercel project.

This process creates a complete MongoDB Atlas cluster, configures all necessary user permissions and network access, and automatically adds the connection environment variable to your Vercel project.

Syncing environment variables locally

Your Vercel project now has the MongoDB connection string, but your local development environment doesn't. The Vercel CLI makes this easy:

vercel env pull

This command downloads all environment variables from your Vercel project and creates a .env.local file in your project root. You should see a MONGODB_URI variable added to this file.

Testing your application

Let's start the development server and see everything in action:

npm run dev

Navigate to http://localhost:3000 in your browser. You should see the MongoDB example application running, complete with database connectivity.

Quick deploy option

If you want to skip the manual setup and get started even faster, you can use this one-click deploy button:

This approach follows a similar process:

Select "Create" to create a new repository in your Git provider.
Select "Add" to add the MongoDB integration.
Configure your database (Cluster, Region, Plan), then click "Continue."
Enter Database Name and then click "Continue."
Select "Done" to complete the database setup.
Choose environments and then select "Connect" to link everything together.
Wait for deployment and then click the preview link to see your live application.

Understanding the integration

This native integration handles several complex tasks automatically:

Database provisioning: Creates a production-ready MongoDB Atlas cluster with proper security configurations.

Network security: Configures IP allowlisting to accept connections from Vercel's infrastructure.

User authentication: Creates database users with appropriate permissions for your application.

Environment management: Automatically provisions and manages connection strings across all your Vercel environments (development, preview, production).

Billing integration: Consolidates billing so you can manage both Vercel and MongoDB Atlas costs in one place.

Next steps

With your MongoDB Atlas database connected to Vercel, you're ready to build powerful applications. The example template provides a solid foundation, but here are some directions you might explore:

Data modeling: MongoDB's flexible document model lets you iterate quickly on your data structure without complex migrations.

Search capabilities: MongoDB Atlas includes built-in full-text search, vector search for AI applications, and hybrid search combining multiple approaches.

Performance optimization: Explore indexing strategies and query optimization as your application grows.

Additional integrations: The Vercel Marketplace includes many other services that complement MongoDB, from authentication providers to analytics tools.

Conclusion

The MongoDB Atlas and Vercel integration removes the traditional friction of setting up and configuring databases for web applications. Whether you're building your next side project or a production application, this streamlined workflow lets you focus on writing code instead of managing infrastructure.

The same steps we covered work with any framework supported by Vercel—you simply need to use the MONGODB_URI environment variable to connect your application to the database. The integration automatically handles the complexity of security, networking, and environment management across development, preview, and production environments.

Try building something with this setup and see how the combination of MongoDB's flexible data model and Vercel's deployment platform can accelerate your development workflow.

Say Hello! YouTube | Twitter | LinkedIn | Instagram | TikTok

The OpenAI Agents SDK for TypeScript is Missing Something—And That’s Ok

Jesse Hall - codeSTACKr — Thu, 05 Jun 2025 17:55:28 +0000

The OpenAI Agents SDK for TypeScript is now available, bringing agent capabilities previously available in Python to the JavaScript ecosystem. This gives web developers a new option for building sophisticated agentic applications.

What is the OpenAI Agents SDK?

The OpenAI Agents SDK for TypeScript is a lightweight toolkit that helps developers build AI applications with complex tool-using capabilities. It's designed with two core principles:

Providing enough features to be valuable, while keeping the primitives minimal for quick learning
Working effectively out of the box, while allowing for customization

The TypeScript version includes the same functionality as the Python SDK, with JavaScript-friendly design patterns.

Key features of the Agents SDK

import { Agent, run } from '@openai/agents';

const agent = new Agent({
  name: 'Assistant',
  instructions: 'You are a helpful assistant.',
});

const result = await run(
  agent,
  'Explain how to implement MongoDB change streams to track real-time database updates.',
);

console.log(result.finalOutput);

The SDK offers these core capabilities:

TypeScript-first design: Use TypeScript's type system to improve developer experience.
Agent loop: Handle the back-and-forth between the LLM and tools, managing the conversation flow automatically.
Function tools: Convert any TypeScript function into a tool the agent can use, with automatic schema generation.
Handoffs: Coordinate between multiple specialized agents to solve complex problems.
Guardrails: Add validation rules that run in parallel to your agent, improving safety and reliability.
Tracing: Monitor agent behavior with built-in visualization and debugging tools.
Realtime agents: Support voice-based agents with features like interruption detection and context management.

The missing piece: memory

The Agents SDK provides powerful tooling for building intelligent agents. But there's no built-in memory or history persistence. It intentionally leaves conversation persistence as an implementation detail for developers to handle based on their specific requirements. And I think that was a good decision!

Adding memory capabilities enhances these agents by allowing them to remember past conversations and learn from previous interactions—a valuable feature for creating more helpful AI assistants.

MongoDB works well with the OpenAI Agents SDK. By implementing a MongoDB-based memory system, your agents can:

Maintain conversation context: Remember what was discussed earlier in a conversation.
Recognize returning users: Personalize interactions based on previous encounters.
Learn from past interactions: Improve responses over time by referencing historical exchanges.
Track and analyze agent performance: Store conversation data for later review and optimization.

The MongoDB memory implementation

Here's how our demo project implements MongoDB as a memory provider for an OpenAI agent:

import { Agent, run, user, assistant } from '@openai/agents';
import { addToConversationHistory, getConversationHistory } from './db.js';

// Run agent with MongoDB-based memory
export const runAgentWithMemory = async (input, context) => {
  const { db, conversationId, userId } = context;

  // Store user message in MongoDB
  await addToConversationHistory(db, conversationId, 'user', input);

  // Create agent
  const agent = new Agent({
    name: 'Assistant with Memory',
    model: 'gpt-4o-mini',
    instructions: `You are a helpful assistant for user ${userId}.`
  });

  // Get conversation history from MongoDB
  const history = await getConversationHistory(db, conversationId);

  // Format history for the agent
  const messages = history.map(entry => 
    entry.role === 'user' ? user(entry.content) : assistant(entry.content)
  );

  // Run the agent with conversation history
  const result = await run(agent, messages, { context });

  // Store assistant's response in MongoDB
  if (result.finalOutput) {
    await addToConversationHistory(db, conversationId, 'assistant', result.finalOutput);
  }

  return {
    conversationId,
    finalOutput: result.finalOutput || ''
  };
};

The implementation is straightforward:

Each conversation is stored in MongoDB with a unique ID.
User and assistant messages are added to the conversation history.
When the agent runs, it receives the conversation history as context.
This allows the agent to maintain context across multiple interactions.

Benefits for TypeScript developers

The Agents SDK for TypeScript offers several advantages:

Native TypeScript support: No need to work with Python or deal with language barriers
Seamless integration: Works with existing JavaScript/TypeScript applications
Web-friendly: Can be used both in Node.js backends and browser environments
Strong typing: Uses TypeScript's type system for better developer experience
Reduced complexity: No language bridges or complex deployment setups needed

Real-world applications

With the OpenAI Agents SDK for TypeScript and MongoDB as a memory provider, developers can create applications like:

Customer support agents that remember previous tickets from the same customer.
Personal assistants that learn user preferences over time.
Education tools that track student progress and adapt to their learning style.
Content creation helpers that maintain consistent style and tone across sessions.
Research assistants that build on previous findings.
Stock market analysis agents that track trading patterns and provide personalized investment recommendations based on historical performance.

Getting started

To build with the OpenAI Agents SDK for TypeScript and MongoDB:

Use our OpenAI Agents SDK with MongoDB template.
Start building intelligent, context-aware agents.

Conclusion

The OpenAI Agents SDK for TypeScript gives TypeScript developers new tools for working with AI. Adding MongoDB as a memory provider lets developers create agents that perform tasks and improve over time.

Combining the SDK's agent capabilities with MongoDB's document model creates a solid base for building AI applications. Let's see what you can build with it!

Say Hello! YouTube | Twitter | LinkedIn | Instagram | TikTok

Building a Chat Application That Doesn't Forget!

Jesse Hall - codeSTACKr — Fri, 16 May 2025 15:36:17 +0000

I just told you… STOP FORGETTING!!

Don’t you hate it when that AI app keeps forgetting the things you’ve told it?!? In this tutorial, we'll solve this problem by building a Next.js chat application with MongoDB as the memory provider for the Vercel AI SDK.

What you'll learn

By the end of this tutorial, you'll have:

A fully functional Next.js app using the App Router.
AI chat capabilities with the Vercel AI SDK.
Persistent chat history using MongoDB.
A clean UI with chat history navigation.
Dark/light mode theme support with shadcn/ui components.

The best part? This entire setup can run on MongoDB Atlas's free tier, making it perfect for prototypes, side projects, or learning experiences.

What is the Vercel AI SDK?

The Vercel AI SDK is a library that simplifies building AI-powered user interfaces. It provides a set of tools and abstractions that make it easy to integrate AI models into your applications with minimal boilerplate code. The SDK handles streaming responses, managing state, and provides hooks for React applications that work seamlessly with various AI providers like OpenAI, Anthropic, and others.

What makes the Vercel AI SDK particularly valuable is its developer experience (DX). It offers type-safe APIs, streaming capabilities out of the box, and a unified interface across different AI providers. This means you can switch between models or providers without rewriting your application logic. The SDK also includes built-in support for features like rate limiting, error handling, and now—with memory providers like the one we're building—conversation history persistence.

Prerequisites

Before we jump in, make sure you have:

Node.js 18.18 or later installed.
A MongoDB Atlas account (the free tier works perfectly).
Basic knowledge of Next.js and React.
Some familiarity with TypeScript.
An OpenAI API key.

Want to cheat? Peek the complete code example. 😅

Project setup

Let's build this application step by step. We'll start with setting up our project and gradually add features until we have a fully functional chat application with persistent memory.

Create a new Next.js project

First, let's create a fresh Next.js project using the create-next-app CLI:

npx create-next-app@latest chat-with-memory

When prompted, select the following options:

TypeScript: Yes
ESLint: Yes
Tailwind CSS: Yes
App Router: Yes
Use src directory: Yes
Import alias: Yes (default @/*)

Install dependencies

Navigate to your project directory and install the required dependencies:

cd chat-with-memory
npm install ai @ai-sdk/react @ai-sdk/openai mongodb

Set up shadcn/ui

We'll use shadcn/ui for our components. First, initialize shadcn/ui in your project:

npx shadcn@latest init

Now, let's add the specific UI components we'll need:

npx shadcn@latest add button input card avatar scroll-area separator dropdown-menu

Configure environment variables

Create a .env.local file in your project root. This will store our MongoDB and OpenAI configuration:

MONGODB_URI=your_mongodb_uri_here
MONGODB_DB=chat_history_db
OPENAI_API_KEY=your_openai_api_key_here

Make sure to replace the placeholder values with your actual MongoDB URI and OpenAI API key. If you don't have these yet:

Get your MongoDB URI from MongoDB Atlas by creating a free cluster.
Get your OpenAI API key from the OpenAI dashboard.

Now that we have our project set up with all the necessary dependencies and configuration, we can start building the core functionality of our chat application.

Setting up MongoDB connection

Create MongoDB connection utility

First, let's create a utility to handle our MongoDB connections. This is a crucial part of our application as it ensures we maintain efficient database connections, especially in a serverless environment.

Create a new directory called lib in your project's src directory, then create a file called mongodb.ts inside it:

import { MongoClient } from 'mongodb';

if (!process.env.MONGODB_URI) {
  throw new Error('Please define the MONGODB_URI environment variable');
}

if (!process.env.MONGODB_DB) {
  throw new Error('Please define the MONGODB_DB environment variable');
}

const uri = process.env.MONGODB_URI;

let client: MongoClient;
let clientPromise: Promise<MongoClient>;

// In development, we use a global variable to maintain the connection
// This prevents creating new connections during hot reloads
if (process.env.NODE_ENV === 'development') {
  const globalWithMongo = global as typeof global & {
    _mongoClientPromise?: Promise<MongoClient>;
  };

  if (!globalWithMongo._mongoClientPromise) {
    client = new MongoClient(uri);
    globalWithMongo._mongoClientPromise = client.connect();
  }
  clientPromise = globalWithMongo._mongoClientPromise;
} else {
  // In production, create a new connection for each instance
  client = new MongoClient(uri);
  clientPromise = client.connect();
}

export default clientPromise;

This connection utility employs a critical pattern for serverless environments. In development mode, we attach the MongoDB client promise to the global object, ensuring that hot reloads (which happen frequently during development) don't create multiple connections. In production, we create a new connection for each server instance, but thanks to Next.js's module caching, this still maintains a single connection per instance rather than per request.

Now that we have our MongoDB connection utility set up, we can start building the data layer for our chat functionality.

Building the chat data layer

Create chat server actions

Let's create server actions to interact with MongoDB for storing and retrieving chat messages. These actions will provide a clean API for our client components to perform database operations.

Create an actions folder inside your app directory, then create a file called chat-actions.ts. Let's build this file step by step:

First, let's add our imports and define our types:

'use server'

import { Message } from 'ai';
import { ObjectId } from 'mongodb';
import clientPromise from '@/lib/mongodb';

export interface ChatMemory {
  _id: ObjectId;
  messages: Message[];
  createdAt: Date;
  updatedAt: Date;
}

Now, let's add the function to create new chats:

/**
 * Creates a new chat in MongoDB
 */
export async function createChat() {
  const client = await clientPromise;
  const db = client.db(process.env.MONGODB_DB);
  const collection = db.collection<ChatMemory>('chats');

  const now = new Date();
  const result = await collection.insertOne({
    _id: new ObjectId(),
    messages: [],
    createdAt: now,
    updatedAt: now
  });

  return result.insertedId.toString();
}

Next, add the function to retrieve a specific chat:

/**
 * Gets a chat by ID from MongoDB
 */
export async function getChat(chatId: string) {
  try {
    const client = await clientPromise;
    const db = client.db(process.env.MONGODB_DB);
    const collection = db.collection<ChatMemory>('chats');

    const objectId = new ObjectId(chatId);
    const chat = await collection.findOne({ _id: objectId });

    if (!chat) {
      return null;
    }

    return {
      id: chat._id.toString(),
      messages: chat.messages,
      createdAt: chat.createdAt,
      updatedAt: chat.updatedAt
    };
  } catch (error) {
    console.error("Error fetching chat:", error);
    return null;
  }
}

Add the function to save messages to a chat:

/**
 * Saves messages to a chat in MongoDB
 */
export async function saveMessages(chatId: string, messages: Message[]) {
  try {
    const client = await clientPromise;
    const db = client.db(process.env.MONGODB_DB);
    const collection = db.collection<ChatMemory>('chats');

    const objectId = new ObjectId(chatId);
    await collection.updateOne(
      { _id: objectId },
      { 
        $set: { 
          messages: messages,
          updatedAt: new Date()
        } 
      },
      { upsert: true }
    );

    return true;
  } catch (error) {
    console.error("Error saving chat:", error);
    return false;
  }
}

Now, let's add the function to retrieve all chats:

/**
 * Gets all chats from MongoDB
 */
export async function getAllChats(limit: number = 10) {
  try {
    const client = await clientPromise;
    const db = client.db(process.env.MONGODB_DB);
    const collection = db.collection<ChatMemory>('chats');

    const chats = await collection
      .find({
        // Only return chats that have at least one message
        "messages.0": { $exists: true }
      })
      .sort({ updatedAt: -1 })
      .limit(limit)
      .toArray();

    return chats.map((chat: ChatMemory) => ({
      id: chat._id.toString(),
      messages: chat.messages,
      createdAt: chat.createdAt,
      updatedAt: chat.updatedAt
    }));
  } catch (error) {
    console.error("Error fetching all chats:", error);
    return [];
  }
}

Finally, add the function to delete chats:

/**
 * Deletes a chat from MongoDB
 */
export async function deleteChat(chatId: string) {
  try {
    const client = await clientPromise;
    const db = client.db(process.env.MONGODB_DB);
    const collection = db.collection<ChatMemory>('chats');

    const objectId = new ObjectId(chatId);
    const result = await collection.deleteOne({ _id: objectId });
    return result.deletedCount === 1;
  } catch (error) {
    console.error("Error deleting chat:", error);
    return false;
  }
}

These server actions provide five key operations:

createChat: Creates a new empty chat document with timestamps
getChat: Retrieves a specific chat by ID
saveMessages: Updates a chat with new messages
getAllChats: Fetches a list of chats with at least one message
deleteChat: Removes a chat from the database

Each function follows best practices for error handling and type safety. The 'use server' directive at the top indicates these are server actions in Next.js, meaning they run on the server but can be imported and called directly from client components.

Creating the chat API route

Set up the chat API endpoint

Now, we'll create the API route that handles communication between our chat UI and the AI model while persisting conversations to MongoDB.

Create a new file at app/api/chat/route.ts:

import { openai } from '@ai-sdk/openai';
import { streamText } from 'ai';
import { getChat, createChat, saveMessages } from '@/app/actions/chat-actions';

export async function POST(req: Request) {
  const { messages, chatId } = await req.json();

  // Get existing chat or create a new one
  let currentChatId = chatId;
  if (!currentChatId) {
    currentChatId = await createChat();
  }

  // Get existing messages if any
  const existingChat = await getChat(currentChatId);
  const existingMessages = existingChat?.messages || [];

  // Use latest messages from the client but verify with server-side history
  const messagesForModel = messages.length > 0 ? messages : existingMessages;

  // Generate response from the AI model
  const result = streamText({
    model: openai('gpt-4o-mini'),
    messages: messagesForModel,
    temperature: 0.7,
    maxTokens: 1000,
    // When the stream is complete, save all messages including the new response
    onFinish: async (response) => {
      const updatedMessages = [
        ...messagesForModel,
        { role: 'assistant', content: response.text, id: Date.now().toString() }
      ];

      // Save to MongoDB
      await saveMessages(currentChatId, updatedMessages);
    }
  });

  // Return streaming response with chatId in headers
  return result.toDataStreamResponse({
    headers: {
      'Content-Type': 'text/event-stream',
      'X-Chat-Id': currentChatId,
    },
  });
}

This API route serves as the bridge between our UI and the AI model, handling several important tasks:

Chat session management:
- Determines if we're continuing an existing chat or starting a new one
- Creates a MongoDB document for new chats
- Returns the chat ID to the client
Message history verification:
- Verifies the client's message history against the server-side history
- Ensures data consistency even if the client state is outdated
AI response streaming:
- Uses the Vercel AI SDK's streamText function for streaming responses
- Creates a better user experience with incremental responses
- Saves both original messages and AI responses to MongoDB
Custom headers:
- Returns the chat ID in a custom header
- Allows the client to update its state for future requests

The route uses a pattern that balances client and server state. While the client maintains the current conversation state for immediate UI updates, the server remains the source of truth for persistent storage.

Building the UI components

Create the main Chat component

Now, let's build the UI for our chat application, starting with the main chat component. In the components folder in your project src directory, add a file called Chat.tsx.

First, let's add our imports and component interface:

'use client'

import { useChat } from "@ai-sdk/react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";
import { User, Bot } from "lucide-react";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { getChat } from "@/app/actions/chat-actions";
import { Message } from "ai";

export default function Chat({ 
  chatId,
  onChatCreated,
  onMessageSent
}: { 
  chatId?: string;
  onChatCreated?: () => void;
  onMessageSent?: () => void;
}) {

Next, let's add our state management and chat history loading:

  const router = useRouter();
  const [initialMessages, setInitialMessages] = useState<Message[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [chatKey, setChatKey] = useState(Date.now());

  // Fetch chat history when chatId changes
  useEffect(() => {
    async function loadChatHistory() {
      if (chatId) {
        setIsLoading(true);
        const chat = await getChat(chatId);
        if (chat && chat.messages) {
          setInitialMessages(chat.messages);
        }
        setIsLoading(false);
        // Generate a new key to force the useChat hook to reset
        setChatKey(Date.now());
      } else {
        setInitialMessages([]);
        setChatKey(Date.now());
      }
    }

    loadChatHistory();
  }, [chatId]);

Now, let's set up the chat hook and handle chat creation:

  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    status,
    error
  } = useChat({
    api: "/api/chat",
    id: chatId,
    initialMessages,
    key: chatKey.toString(), // Use a key to force reset when chatId changes
    body: {
      chatId: chatId,
    },
    onResponse: (response) => {
      // If a new chat was created, update the URL
      const newChatId = response.headers.get('X-Chat-Id');
      if (newChatId && !chatId) {
        // Force a refresh to update the sidebar
        router.refresh();
        // Trigger sidebar refresh via callback
        onChatCreated?.();
      }
    },
    onFinish: () => {
      // When a message exchange is complete, refresh the sidebar
      onMessageSent?.();
    }
  });

  // Get title from the first user message (up to 20 characters)
  const title = messages.find(m => m.role === "user")?.content?.substring(0, 20) || "New conversation";

Finally, let's add the component's JSX:

  return (
    <Card className="w-full max-w-2xl mx-auto shadow-md">
      <CardHeader>
        <CardTitle className="text-xl">{chatId ? `${title}...` : "New chat"}</CardTitle>
      </CardHeader>
      <Separator />
      <CardContent className="p-0">
        <ScrollArea className="h-[400px] p-4">
          {isLoading ? (
            <div className="text-center py-8 text-muted-foreground">
              Loading chat history...
            </div>
          ) : messages.length === 0 ? (
            <div className="text-center py-8 text-muted-foreground">
              No messages yet. Start a conversation!
            </div>
          ) : (
            messages.map((m, index) => (
              <div
                key={index}
                className={cn(
                  "flex items-start gap-3 mb-4",
                  m.role === "user" ? "justify-end" : "justify-start"
                )}
              >
                {m.role !== "user" && (
                  <Avatar className="h-8 w-8 bg-secondary">
                    <AvatarFallback className="flex items-center justify-center">
                      <Bot className="h-4 w-4 text-secondary-foreground" />
                    </AvatarFallback>
                  </Avatar>
                )}
                <div
                  className={cn(
                    "rounded-lg px-3 py-2 max-w-[80%]",
                    m.role === "user"
                      ? "bg-primary text-primary-foreground"
                      : "bg-muted text-foreground"
                  )}
                >
                  {m.content}
                </div>
                {m.role === "user" && (
                  <Avatar className="h-8 w-8 bg-secondary">
                    <AvatarFallback className="flex items-center justify-center">
                      <User className="h-4 w-4 text-secondary-foreground" />
                    </AvatarFallback>
                  </Avatar>
                )}
              </div>
            ))
          )}
          {(status === "streaming" || status === "submitted") && (
            <div className="flex items-center gap-2 text-muted-foreground ml-11 mt-2">
              <div className="flex space-x-1">
                <div className="animate-bounce h-2 w-2 rounded-full bg-current"></div>
                <div className="animate-bounce h-2 w-2 rounded-full bg-current delay-100"></div>
                <div className="animate-bounce h-2 w-2 rounded-full bg-current delay-200"></div>
              </div>
              <span>AI is thinking...</span>
            </div>
          )}
        </ScrollArea>
      </CardContent>
      <Separator />
      <CardFooter className="p-4">
        {error && <div className="text-destructive mb-2 text-sm">{error.message}</div>}
        <form onSubmit={handleSubmit} className="flex w-full gap-2">
          <Input
            value={input}
            onChange={handleInputChange}
            placeholder="Type your message..."
            disabled={status === "streaming" || status === "submitted" || isLoading}
            className="flex-1"
          />
          <Button
            type="submit"
            disabled={(status === "streaming" || status === "submitted") || !input.trim() || isLoading}
          >
            Send
          </Button>
        </form>
      </CardFooter>
    </Card>
  );
}

The Chat component integrates several key features:

Dynamic history loading:
- Loads chat history when the chatId changes
- Shows loading states during data fetching
useChat hook integration:
- Handles message state and input management
- Connects to our API route
- Manages streaming responses
Chat state management:
- Uses a unique key to reset the chat when needed
- Handles new chat creation and updates
UI features:
- Distinct styling for user and AI messages
- Loading indicators for AI responses
- Error handling and display
- Responsive message layout

The component uses shadcn/ui components to create a polished interface with minimal effort. The ScrollArea component ensures the chat remains scrollable as it fills with messages.

Create the chat sidebar component

Now, let's create the component that displays our chat history. Add a file called ChatSidebar.tsx in the components directory.

First, let's add our imports and types:

'use client'

import { useEffect, useState } from "react";
import { getAllChats, deleteChat } from "@/app/actions/chat-actions";
import { Message } from "ai";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Button } from "@/components/ui/button";
import { Trash2 } from "lucide-react";
import { cn } from "@/lib/utils";

interface Chat {
  id: string;
  messages: Message[];
  createdAt: Date;
  updatedAt: Date;
}

export default function ChatSidebar({ 
  activeChatId, 
  onChatSelect,
  refreshTrigger = 0,
  onChatDeleted
}: { 
  activeChatId?: string;
  onChatSelect: (chatId: string) => void;
  refreshTrigger?: number;
  onChatDeleted?: () => void;
}) {

Next, let's add our state management and chat loading logic:

  const [chats, setChats] = useState<Chat[]>([]);
  const [loading, setLoading] = useState(true);

  // Load chats when component mounts or refreshTrigger changes
  useEffect(() => {
    async function loadChats() {
      setLoading(true);
      const chatsList = await getAllChats(20);
      setChats(chatsList);
      setLoading(false);
    }

    loadChats();
  }, [refreshTrigger]);

  // Get title from first user message (up to 20 characters)
  const getChatTitle = (chat: Chat) => {
    const firstUserMessage = chat.messages.find(m => m.role === "user");
    if (firstUserMessage?.content) {
      const title = firstUserMessage.content.substring(0, 20);
      return title.length < firstUserMessage.content.length 
        ? `${title}...` 
        : title;
    }
    return "New conversation";
  };

Now, let's add the chat deletion handler:

  const handleDeleteChat = async (e: React.MouseEvent, chatId: string) => {
    e.stopPropagation();
    await deleteChat(chatId);
    setChats(chats.filter(chat => chat.id !== chatId));

    // If the active chat was deleted, clear the selection
    if (activeChatId === chatId) {
      onChatSelect("");
    }

    // Notify parent component about the deletion
    onChatDeleted?.();
  };

Finally, let's add the component's JSX:

  return (
    <div className="w-64 border-r h-screen bg-muted/5">
      <div className="p-4 border-b">
        <h2 className="font-semibold">Your conversations</h2>
      </div>
      <ScrollArea className="h-[calc(100vh-65px)]">
        <div className="p-2">
          {loading ? (
            <div className="text-center py-8 text-muted-foreground">Loading...</div>
          ) : chats.length === 0 ? (
            <div className="text-center py-8 text-muted-foreground">No conversations yet</div>
          ) : (
            chats.map((chat) => (
              <div 
                key={chat.id}
                onClick={() => onChatSelect(chat.id)}
                className={cn(
                  "flex items-center justify-between p-3 mb-1 rounded-md hover:bg-muted cursor-pointer group",
                  activeChatId === chat.id && "bg-muted"
                )}
              >
                <div className="truncate flex-1">{getChatTitle(chat)}</div>
                <Button
                  variant="ghost"
                  size="icon"
                  className="opacity-0 group-hover:opacity-100 h-7 w-7"
                  onClick={(e) => handleDeleteChat(e, chat.id)}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
            ))
          )}
        </div>
      </ScrollArea>
    </div>
  );
}

The ChatSidebar component provides several key features:

Dynamic chat loading:
- Fetches chats from MongoDB using getAllChats
- Shows loading and empty states
- Refreshes when triggered by parent component
Chat selection:
- Highlights the active chat
- Notifies parent component when a chat is selected
Chat deletion:
- Allows users to delete conversations
- Updates local state and notifies parent
- Handles active chat deletion gracefully
UI features:
- Scrollable list of conversations
- Delete button appears on hover
- Truncated chat titles from first message
- Visual feedback for active chat

The sidebar uses the cn utility function from shadcn/ui to conditionally apply Tailwind classes, making the selected chat visually distinct. The delete button only appears when hovering over a chat item, keeping the interface clean while still providing functionality.

Adding theme support

Create theme components

Let's add theme support to our application. First, create a theme-provider.tsx file in the components directory:

"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}

Next, create a theme toggle component in theme-toggle.tsx:

"use client"

import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function ThemeToggle() {
  const { setTheme } = useTheme()

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="icon">
          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
          <span className="sr-only">Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem onClick={() => setTheme("light")}>
          Light
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("dark")}>
          Dark
        </DropdownMenuItem>
        <DropdownMenuItem onClick={() => setTheme("system")}>
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Update the root layout

Now, let's update the root layout to include theme support. Update app/layout.tsx:

import type { Metadata } from "next";
import { Inter as FontSans } from "next/font/google";
import "./globals.css";
import { cn } from "@/lib/utils";
import { ThemeProvider } from "@/components/theme-provider";

const fontSans = FontSans({
  subsets: ["latin"],
  variable: "--font-sans",
});

export const metadata: Metadata = {
  title: "AI Chat with MongoDB Memory",
  description: "An AI chat application with persistent memory using MongoDB",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={cn(
        "min-h-screen bg-background font-sans antialiased",
        fontSans.variable
      )}>
        <ThemeProvider
          attribute="class"
          defaultTheme="system"
          enableSystem
          disableTransitionOnChange
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Create the home page

Finally, let's create the main page that brings everything together. Update app/page.tsx:

"use client";

import { useState, useCallback } from 'react';
import Chat from '@/components/Chat';
import ChatSidebar from '@/components/ChatSidebar';
import { ThemeToggle } from '@/components/theme-toggle';
import { Button } from '@/components/ui/button';
import { PlusCircle } from 'lucide-react';

export default function Home() {
  const [activeChatId, setActiveChatId] = useState<string | undefined>(undefined);
  const [refreshCounter, setRefreshCounter] = useState(0);

  const handleChatSelect = (chatId: string) => {
    if (chatId === "") {
      setActiveChatId(undefined);
    } else {
      setActiveChatId(chatId);
    }
  };

  const handleNewChat = () => {
    setActiveChatId(undefined);
  };

  // Function to trigger a sidebar refresh
  const refreshSidebar = useCallback(() => {
    setRefreshCounter(prev => prev + 1);
  }, []);

  return (
    <div className="flex justify-center bg-background min-h-screen">
      <main className="min-h-screen flex max-w-6xl w-full shadow-sm">
        <ChatSidebar 
          activeChatId={activeChatId} 
          onChatSelect={handleChatSelect} 
          refreshTrigger={refreshCounter}
          onChatDeleted={refreshSidebar}
        />

        <div className="flex-1 p-8 flex flex-col">
          <div className="w-full max-w-2xl mx-auto">
            <div className="flex justify-between items-center mb-8">
              <div>
                <h1 className="text-3xl font-bold tracking-tight mb-2">AI Chat with MongoDB Memory</h1>
                <p className="text-muted-foreground">
                  Your conversations are saved with MongoDB for persistent chat history
                </p>
              </div>
              <div className="flex items-center gap-4">
                <Button 
                  variant="outline" 
                  size="sm" 
                  className="gap-2"
                  onClick={handleNewChat}
                >
                  <PlusCircle className="h-4 w-4" />
                  New chat
                </Button>
                <ThemeToggle />
              </div>
            </div>
            <Chat 
              chatId={activeChatId} 
              onChatCreated={refreshSidebar}
              onMessageSent={refreshSidebar}
            />
          </div>
        </div>
      </main>
    </div>
  );
}

The home page component serves as the application's layout coordinator:

State management:
- Maintains the active chat ID
- Handles chat selection and creation
- Manages sidebar refresh state
Component integration:
- Connects ChatSidebar and Chat components
- Handles communication between components
- Manages theme toggling
Layout structure:
- Sidebar on the left
- Main chat area on the right
- Header with title and actions

The refresh pattern used here is particularly effective—when the chat component needs to refresh the sidebar (after creating a new chat or adding a message), it calls the refreshSidebar function, which increments the counter. This change triggers a reload of the chat list in the sidebar.

Note: The refresh pattern used in this example is intentionally simple for clarity. In a production application, you might want to use more sophisticated data fetching libraries like SWR, React Query, or Next.js's built-in data fetching mechanisms for more efficient cache invalidation, optimistic updates, and automatic revalidation.

Testing the application

Now that we have all our components in place, let's test the application:

Start your Next.js development server:

npm run dev

Navigate to http://localhost:3000 in your browser, and you should see your chat interface with the history sidebar. Here's what you can try:

Start a new conversation by typing in the input field.
Refresh the page—notice how your chat history persists.
Create another new chat and add some messages.
Use the sidebar to switch between different conversations.
Delete a chat you no longer need.
Toggle between light and dark themes.

When testing your application, pay attention to how the data persists between page reloads and browser sessions. This persistent memory is the core feature we've built, and it's what makes this chat application truly useful compared to ones that forget everything when you refresh.

Next steps

Now that you have a working chat application with persistent memory, you could extend it with features like:

User authentication.
AI-generated chat titles.
Media file support.
Export functionality.
Conversation branching.
Custom AI instructions.
Retrival-augmented generation (RAG) support.

Each of these extensions can build upon the foundation we've created, leveraging MongoDB's flexibility to store additional data as needed.

Final thoughts

Building chat apps with memory might seem daunting at first, but MongoDB makes it surprisingly straightforward. The document model is a natural fit for storing conversation threads, and the MongoDB Atlas free tier gives you plenty of room to experiment without worrying about costs.

The combination of Next.js, Vercel AI SDK, and MongoDB creates a powerful foundation for building sophisticated AI chat applications that remember their conversations. The server actions approach in Next.js App Router provides a clean, type-safe way to interact with the database, while the Vercel AI SDK handles the complexities of streaming AI responses.

What makes this architecture particularly valuable is its scalability. As your application grows, MongoDB Atlas can scale with you, from the free tier all the way to enterprise-grade deployments across multiple regions. The document model adapts easily to evolving requirements, allowing you to add new features without major restructuring.

I hope this tutorial helps you build something amazing!

Say Hello! YouTube | Twitter | LinkedIn | Instagram | TikTok

How Prisma Transforms MongoDB Development (And Why You Need It)

Jesse Hall - codeSTACKr — Thu, 01 May 2025 00:14:41 +0000

MongoDB has been a popular database choice for JavaScript developers for years, thanks to its flexible document model and natural fit with JavaScript objects. While MongoDB's native driver and tools like Mongoose offer ways to work with the database, Prisma ORM provides a complementary approach that enhances the development experience.

The MongoDB + Prisma combination

MongoDB stores data in collections of JSON-like documents with flexible schemas. This flexibility enables rapid iteration and adaptability to changing requirements. Prisma ORM complements this flexibility by providing:

Type-safe database access: Generated TypeScript types based on your schema.
Clear schema management: A declarative schema that documents your data structure.
Intuitive relationships: Elegant handling of relational connections both through embedding and referencing between collections.
Optimized queries: Efficient MongoDB operations generated automatically.

How Prisma works with MongoDB

Unlike many ORMs designed primarily for relational databases, Prisma ORM also works with MongoDB's document-oriented structure while adding useful guardrails.

If you'd rather watch, here's a video version:

The schema definition

With Prisma ORM, you define MongoDB collections and their structure using the Prisma Schema Language:

// prisma/schema.prisma
datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  email     String   @unique
  name      String?
  posts     Post[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Post {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  title     String
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  String   @db.ObjectId
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

MongoDB-specific considerations

MongoDB lets you store data without fixed, rigid schemas, which is why many developers choose it. Prisma ORM complements this by providing a schema definition that gives your code type safety and structure, without restricting how MongoDB stores the actual documents. This approach combines MongoDB's document flexibility with code-level safeguards that validate your data and provide accurate TypeScript types.

Working with ObjectIds

MongoDB documents use an _id field that typically contains an ObjectId. Prisma ORM maps this identifier:

id String @id @default(auto()) @map("_id") @db.ObjectId

This mapping lets you work with the field as id in your code while Prisma ORM manages the transformation to MongoDB's _id field.

Schema flexibility and evolution

MongoDB's flexible schema works well for evolving applications. When using Prisma ORM with MongoDB, you can use several methods for schema evolution:

Adding optional fields: New fields can be marked as optional (String?) to work with MongoDB's flexibility.
Providing default values: Default values for new fields when needed.
Using db push: Prisma ORM's db push command creates collections and indexes based on your schema, but doesn't modify existing document structures.

npx prisma db push

Modeling relationships

MongoDB follows a simple principle: Data that is accessed together should be stored together. This approach leads to significant performance benefits by reducing the need for joins between collections. When using Prisma ORM with MongoDB, you have two main options for modeling relationships:

Embedded documents

Embedding should be the default approach in MongoDB. Prisma ORM supports this pattern using the type attribute, which directly stores related data within the parent document:

model User {
  id      String    @id @default(auto()) @map("_id") @db.ObjectId
  name    String
  address Address?  // Embedded document
}

type Address {      // Using type for embedded structure
  street  String
  city    String
  state   String
  zipCode String
}

This pattern stores the Address data directly within the User document, which provides faster reads and writes for data that belongs together. When you query a user, you automatically get their address without additional database operations.

References between collections

While embedding is preferred, references between collections are useful for specific scenarios such as many-to-many relationships or when data is accessed independently:

model User {
  id      String @id @default(auto()) @map("_id") @db.ObjectId
  posts   Post[]
}

model Post {
  id       String @id @default(auto()) @map("_id") @db.ObjectId
  author   User   @relation(fields: [authorId], references: [id])
  authorId String @db.ObjectId
}

The choice between embedding and referencing depends on:

Access patterns (how frequently you read the data together).
Update frequency (how often the embedded data changes).
Query patterns (how you query the data).
Data size (how much data you're storing).

For most application scenarios, following MongoDB's principle of co-locating frequently accessed data through embedding leads to optimal performance.

Querying with type safety

Prisma ORM generates a type-safe client based on your schema, providing autocompletion and an improved developer experience:

// Finding posts with their authors 
const postsWithAuthors = await prisma.post.findMany({
  include: {
    author: true
  }
});

// TypeScript knows the shape of this data
console.log(postsWithAuthors[0].author.name);

Prisma Client works with MongoDB's powerful query capabilities, translating your Prisma ORM queries into optimized MongoDB operations while providing you with a type-safe, intuitive API.

Performance with Prisma Accelerate

For production applications, Prisma Accelerate offers performance advantages:

Connection pooling: Improves MongoDB connections in serverless environments
Edge caching: Reduces database load for frequent queries
Global distribution: Decreases latency for users in different regions through edge caching

Prisma Accelerate provides two caching strategies:

Time-to-Live (TTL): Cache data for a specified period
Stale-While-Revalidate (SWR): Serve cached data immediately while refreshing in the background

// Example of using TTL caching with Prisma Accelerate
const users = await prisma.user.findMany({
  cacheStrategy: {
    swr: 120,             // Serve stale data for up to 120 seconds while revalidating
    ttl: 60,              // Fresh for 60 seconds
    tags: ["users_list"]  // For cache invalidation
  }
});

Practical considerations

When using Prisma ORM with MongoDB, these implementation details are important:

Prisma db push for MongoDB: MongoDB projects use db push for schema changes as opposed to prisma migrate.
Replica set configuration: MongoDB replica sets are required due to the fact that Prisma ORM uses transactions to ensure data consistency. Transactions are not supported in MongoDB's single node deployments.
MongoDB-specific types: Support for MongoDB's type system continues to develop.
Null handling: MongoDB distinguishes between null and missing fields, which affects data modeling.

Getting started

Setting up Prisma ORM with MongoDB takes just a few steps:

Install Prisma ORM in your project.
Configure the MongoDB connection.
Define your data model.
Generate a Prisma Client.
Use the client in your application.

For an in-depth guide on how to set up Prisma ORM with MongoDB, check out my complete walkthrough of building a full-stack app with Next.js + Prisma ORM + MongoDB.

When to use this combination

The Prisma ORM + MongoDB combination works well when:

You need both schema flexibility and type safety.
Your team prefers clear data modeling and documentation.
You want to reduce boilerplate code.
You're building with TypeScript.
Performance and scalability matter for your application.

Give it a try!

Prisma ORM adds type safety, clear schema definitions, and practical relationship handling to MongoDB development while maintaining MongoDB's flexibility and performance characteristics. For teams building applications with MongoDB, Prisma ORM provides a productive development experience that works with MongoDB's features.

Want some more Prisma ORM + MongoDB tips and tricks?

Drop a comment below if you have any questions or feedback!

Say Hello! YouTube | Twitter | LinkedIn | Instagram | TikTok

Top 8 Tips for Using Prisma with MongoDB

Jesse Hall - codeSTACKr — Wed, 09 Apr 2025 15:55:13 +0000

Today, I'm sharing the top eight tips for using Prisma ORM with MongoDB. If you're building applications with MongoDB and want to use Prisma as your ORM, there are some important considerations you need to know. MongoDB's document-based approach works differently from relational databases, and Prisma ORM has specific ways of handling these differences.

I've spent years working with both MongoDB and Prisma ORM, and I've compiled the most critical tips that will save you hours of debugging and help you build more efficient applications. These aren't just basic setup instructions—these are the practical insights that make the difference between a struggling application and one that performs smoothly in production.

If you'd rather watch, here's a video version:

Tip #1: Configure MongoDB with a replica set

MongoDB with Prisma ORM requires a replica set configuration. This isn't optional—it's mandatory. Prisma uses transactions internally to avoid partial writes on nested queries, and MongoDB only allows transactions on replica sets.

If you try to use Prisma ORM with a standalone MongoDB instance, you'll get the error, "Transactions are not supported by this deployment." This happens even for simple operations because Prisma wraps operations in transactions behind the scenes.

The easiest solution is to use MongoDB Atlas, which provides replica sets by default, even on the free tier. For local development, you can convert a standalone MongoDB instance to a replica set by following MongoDB's documentation.

Tip #2: Working with ObjectId fields

In MongoDB, the primary key is typically an ObjectId stored in the _id field. When working with Prisma ORM, you need to properly map this in your schema.

Any field that maps to an ObjectId in MongoDB:

Must be defined as either String or Bytes type in your Prisma schema.
Must include the @db.ObjectId attribute.
Should use @default(auto()) for auto-generating IDs.

Here's how to define a model with an ObjectId primary key:

model User {
  id    String @id @default(auto()) @map("_id") @db.ObjectId
  email String
  name  String?
}

When you need to generate an ObjectId for testing or to manually set an ID, use the bson package:

import { ObjectId } from 'bson'
const id = new ObjectId()

Tip #3: Understand the difference between null and missing fields

MongoDB distinguishes between fields explicitly set to null and fields that don't exist at all. There's this thing called polymorphism in MongoDB. It's the ability to have multiple types of data in the same collection. This distinction is important when filtering data.

When you create a record without explicitly setting an optional field, MongoDB doesn't store that field at all. But, Prisma ORM will return null for that field in your query results, making it appear the same as a field explicitly set to null.

When filtering for null values, you'll only match records where the field is explicitly set to null, not records where the field is missing. To include missing fields in your filter, use the isSet operator:

// Find records where name is either null or missing
const users = await prisma.user.findMany({
  where: {
    OR: [
      { name: null },
      { name: { isSet: false } }
    ]
  }
})

Tip #4: Handle relations properly

MongoDB handles relationships through document references and embedded documents, which differs from the foreign key approach in relational databases. When introspecting a MongoDB database, Prisma ORM may need help understanding these relationship patterns.

After introspection, you'll need to manually add relation fields to your models. For example, if you have a Post model with a userId field, you'll need to add the relation to the User model:

model Post {
  id     String @id @default(auto()) @map("_id") @db.ObjectId
  title  String
  userId String @db.ObjectId
  user   User   @relation(fields: [userId], references: [id])
}

model User {
  id    String @id @default(auto()) @map("_id") @db.ObjectId
  email String
  posts Post[]
}

Remember that relation fields in MongoDB should always use the @db.ObjectId attribute when they reference another document's ID.

Tip #5: Model embedded documents with type

MongoDB's document model allows you to embed structured data directly within a document. This is one of MongoDB's core advantages—the ability to store related data in a single document, reducing the need for joins. Prisma ORM supports this pattern through the type keyword.

Unlike models, types in Prisma don't create separate collections in MongoDB. Instead, they represent embedded document structures that exist inside a model.

Here's how to define and use embedded types:

type Address {
  street  String
  city    String
  state   String
  zipCode String
}

model Customer {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  name      String
  email     String   @unique
  address   Address? // Embedded document
  addresses Address[] // Array of embedded documents
}

When working with these embedded types in your code:

// Creating a record with embedded document
const customer = await prisma.customer.create({
  data: {
    name: 'Jane Smith',
    email: 'jane@example.com',
    address: {
      street: '123 Main St',
      city: 'Anytown',
      state: 'CA',
      zipCode: '12345'
    }
  }
})

// Querying with embedded fields
const californiaCustomers = await prisma.customer.findMany({
  where: {
    address: {
      state: 'CA'
    }
  }
})

Embedded documents work well for data that:

Is always accessed together with the parent document.
Has a clear ownership relationship (belongs to exactly one parent).
Doesn't need to be queried independently.

Tip #6: Simplified schema management with MongoDB

MongoDB's flexible schema design eliminates the need for complex migrations. You can modify your data model without downtime or migration scripts—a key advantage over traditional databases.

With Prisma ORM and MongoDB, use prisma db push to sync your schema changes. This command will:

Create collections if they don't exist.
Set up indexes for @unique fields.
Update your Prisma Client automatically.

Tip #7: Key MongoDB and Prisma design considerations

Here are some important key points to consider when using Prisma ORM with MongoDB:

MongoDB uses a single _id field for primary keys, rather than composite IDs with @@id.
For ID generation, use auto() with ObjectId instead of autoincrement().
Cyclic references with referential actions work best with NoAction to maintain data consistency.
Some MongoDB-specific types, like Decimal128, have partial support in the current version of Prisma ORM.

These points highlight the fundamental differences between how document databases and relational databases work. When you know these technical distinctions, you can create applications that work better with MongoDB's specific structure.

Tip #8: Optimize for large collections

MongoDB performance can degrade with large collections if you're not careful when using Prisma ORM. Consider these tips to help you optimize your queries:

Be strategic with indexes—add @index to fields you frequently query on.
Use projection to limit returned fields—use select to specify only the fields you need.
Paginate results—use skip and take to limit the number of documents processed.
Consider using MongoDB's aggregation pipeline for complex operations via Prisma's $runCommandRaw.

For example, to optimize a query on a large collection:

const users = await prisma.user.findMany({
  where: { role: "ADMIN" },
  select: { id: true, email: true }, // Only select needed fields
  take: 100, // Limit to 100 results
  skip: page * 100, // Pagination
})

Conclusion

These eight tips will help you effectively use Prisma ORM with MongoDB while avoiding common pitfalls. Remember that MongoDB's document model is fundamentally different from relational databases, and understanding these differences is key to building performant applications.

Check out my complete walkthrough of building a full-stack app with Next.js + Prisma ORM + MongoDB to see it in action.

To recap, always use a replica set configuration, handle ObjectIds correctly, understand the difference between null and missing fields, manage relations properly, use db push instead of migrations, adapt to MongoDB's document model features, and optimize for large collections.

Drop a comment if you have questions about using Prisma ORM with MongoDB or if you'd like to see more in-depth coverage of any of these topics.

Say Hello! YouTube | Twitter | LinkedIn | Instagram | TikTok

10X Your Development Speed: Prisma + MongoDB + Next.js Ultimate Stack

Jesse Hall - codeSTACKr — Tue, 01 Apr 2025 13:24:14 +0000

Today, we're looking at Prisma ORM with MongoDB—a really useful combo for building database-driven apps. MongoDB is already a great database choice for JavaScript developers, with several ways to work with it, from the native driver to Mongoose to type-safe ORMs like Prisma.

So why pick Prisma? I've personally used all of these approaches, and I want to share what makes Prisma worth considering for your MongoDB projects.

In this tutorial, I'll walk you through a practical workflow for using Prisma ORM with MongoDB. You'll see how to build a full-stack Next.js application with this combination, and how Prisma Accelerate can make MongoDB performance even better through connection pooling and caching.

For context, I've been building web apps for over 20 years, so I'll be sharing practical tips from my own experience.

The tech stack

Before we get into the code, let's quickly go over what developers typically get when working with MongoDB:

A general purpose, flexible database that adapts easily as your schema changes
Document-based storage that works naturally with JavaScript objects
Powerful query options through the aggregation framework
Solid performance across different workloads

Prisma ORM adds these helpful features that work well with MongoDB's strengths:

Complete type safety for your database operations
Clear schema management with automatic validations
Simple handling of relationships between collections
A query engine that creates optimized MongoDB operations

When we add Prisma Accelerate to the mix, which is a fully managed global connection pool and edge-based caching layer for your existing database, we get these extra benefits:

Serverless connection pooling without managing extra infrastructure
Much faster cold starts in serverless environments
Better response times with caching of query results
Global edge distributed caching layer for quicker database access
Less connection load on your MongoDB deployment

Let me show you how Prisma ORM changes MongoDB development by building a simple but complete user management system with Next.js 15 (App Router), Prisma ORM, MongoDB, and Tailwind CSS with shadcn/ui components.

If you prefer to watch, here's the video version:

Outline & prerequisites

Here's what we'll cover:

Setting up MongoDB Atlas and connecting Prisma ORM
Defining our data model for users, posts, and comments
Generating Prisma Client
Building API routes with Prisma ORM
Creating a front end with Next.js and shadcn/ui
Expanding app functionality with posts and comments
Scaling with Prisma Accelerate
Bonus at the end!

Prerequisites:

Node.js 20+
MongoDB Atlas account
Prisma Data Platform account (for Prisma Accelerate)

Prisma ORM + MongoDB project setup

Let's start by setting up our project. I'll create a new Next.js application and add Prisma ORM.

# In your terminal, create a new Next.js project
npx create-next-app prisma-mongodb-demo
cd prisma-mongodb-demo

# Install Prisma dependencies
npm install -D prisma

# Initialize Prisma in your project
npx prisma init

Now, let's configure our MongoDB connection. I've already set up a MongoDB Atlas cluster. If you haven't, follow the Getting Started with Atlas guide. Make sure to:

Create a database user with read/write permissions.
Add your IP address to the network access list.
Get your connection string from the "Connect" button.

First, we'll update our prisma/schema.prisma file (which was created by the prisma init command) with our MongoDB connection:

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

generator client {
  provider = "prisma-client-js"
}

For our .env file in the root of your project, we'll add:

DATABASE_URL="mongodb+srv://username:password@cluster0.mongodb.net/mydb?retryWrites=true&w=majority"

Make sure to replace username, password, cluster0.mongodb.net, and mydb with your actual MongoDB Atlas credentials. Pay special attention to the "mydb" part of the URL—this is the database name that Prisma ORM will use. If the database doesn't exist yet, MongoDB will create it automatically when Prisma ORM first connects.

Data modeling with Prisma ORM

With Prisma ORM, you get a clear, declarative way to define your MongoDB collections and their relationships.

We're still in the prisma/schema.prisma file. Now, we'll add our data models:

// add these models below the existing blocks
model User {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  email     String   @unique
  name      String?
  posts     Post[]
  comments  Comment[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Post {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  title     String
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  String   @db.ObjectId
  comments  Comment[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Comment {
  id        String   @id @default(auto()) @map("_id") @db.ObjectId
  content   String
  post      Post     @relation(fields: [postId], references: [id])
  postId    String   @db.ObjectId
  author    User     @relation(fields: [authorId], references: [id])
  authorId  String   @db.ObjectId
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

This Prisma ORM schema defines how our data will be structured in MongoDB. Even though MongoDB has a flexible schema by nature, Prisma ORM helps us maintain consistent data structures in our application.

We've defined three collections (called "models" in Prisma ORM): User, Post, and Comment.
For each model:
- The @id decorator marks the primary key field.
- @default(auto()) automatically generates a MongoDB ObjectId.
- @map("_id") tells Prisma ORM to map this field to MongoDB's default _id field.
- @db.ObjectId specifies the MongoDB-specific data type.
We've established relationships between our models:
- A User can have many Posts and Comments.
- A Post belongs to one User and can have many Comments.
- A Comment belongs to one User and one Post.
Relationship fields like posts and comments in the User model use arrays (Post[]) to indicate they can contain multiple related records.
We're using special field types:
- String? means an optional string (the name can be null).
- DateTime fields with @default(now()) automatically set creation timestamps.
- @updatedAt automatically updates the timestamp when a record changes.

The cool thing here is that Prisma ORM will generate TypeScript types from this schema, so we get full type safety when working with our database. It also takes care of setting up the right MongoDB indexes to make these relationships work properly.

Let's generate our Prisma Client and push our schema to MongoDB using the terminal:

npx prisma db push

This command will:

Create the collections in your MongoDB database (users, posts, and comments).
Set up the appropriate indexes for relationships and unique fields (like the unique index on email).
Generate Prisma Client tailored to your schema.

After running this command, you'll see confirmation that the collections and indexes were created successfully.

Setting up a singleton Prisma Client

Before we build our API routes, let's create a shared Prisma Client instance. This prevents multiple database connections in development and ensures efficient connection management.

Create a new file lib/prisma.ts:

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

const globalForPrisma = global as unknown as { prisma: typeof prisma }

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

export default prisma

Building API routes with server actions

Using the Next.js App Router, we can use Server Actions instead of traditional API routes. Server Actions are server functions that can be called directly from components. Let's create these actions to manage our data in a new file named app/actions.ts:

'use server';

import prisma from '@/lib/prisma';
import { revalidatePath } from 'next/cache';

// READ actions
export async function getUsers() {
  try {
    const users = await prisma.user.findMany({
      include: {
        posts: true,
        _count: {
          select: { comments: true, posts: true }
        }
      },
      orderBy: {
        createdAt: 'desc'
      }
    });

    return users;
  } catch (error) {
    console.error('Error fetching users:', error);
    throw new Error('Failed to fetch users');
  }
}

export async function getPosts(limit = 5) {
  try {
    const posts = await prisma.post.findMany({
      include: {
        author: true,
        comments: {
          include: {
            author: true
          },
          orderBy: {
            createdAt: 'desc'
          }
        },
        _count: {
          select: { comments: true }
        }
      },
      orderBy: {
        createdAt: 'desc'
      },
      take: limit
    });

    return posts;
  } catch (error) {
    console.error('Error fetching posts:', error);
    throw new Error('Failed to fetch posts');
  }
}

export async function getUserById(id: string) {
  try {
    const user = await prisma.user.findUnique({
      where: { id },
      include: {
        posts: {
          orderBy: {
            createdAt: 'desc'
          }
        },
        comments: {
          orderBy: {
            createdAt: 'desc'
          },
          take: 10
        },
        _count: {
          select: { comments: true, posts: true }
        }
      }
    });

    if (!user) {
      throw new Error('User not found');
    }

    return user;
  } catch (error) {
    console.error(`Error fetching user with ID ${id}:`, error);
    throw error;
  }
}

// CREATE actions
export async function createUser({ email, name }: { email: string; name?: string }) {
  if (!email) {
    throw new Error('Email is required');
  }

  try {
    const user = await prisma.user.create({
      data: {
        email,
        name,
      },
    });

    // Revalidate the home page to show the new user
    revalidatePath('/');

    return user;
  } catch (error: any) {
    // Handle duplicate email error
    if (error.code === 'P2002') {
      throw new Error('A user with this email already exists');
    }

    throw new Error('Failed to create user');
  }
}

// Post actions
export async function createPost({ 
  title, 
  content, 
  authorId, 
  published = false 
}: { 
  title: string; 
  content?: string; 
  authorId: string; 
  published?: boolean 
}) {
  if (!title || !authorId) {
    throw new Error('Title and author are required');
  }

  try {
    // Ensure the author exists
    const authorExists = await prisma.user.findUnique({
      where: { id: authorId }
    });

    if (!authorExists) {
      throw new Error('Author not found');
    }

    const post = await prisma.post.create({
      data: {
        title,
        content,
        published,
        author: {
          connect: { id: authorId }
        }
      },
      include: {
        author: true
      }
    });

    // Revalidate the home page to show the new post
    revalidatePath('/');

    return post;
  } catch (error) {
    console.error('Error creating post:', error);
    throw error;
  }
}

// Comment actions
export async function createComment({ 
  content, 
  postId, 
  authorId 
}: { 
  content: string; 
  postId: string; 
  authorId: string 
}) {
  if (!content || !postId || !authorId) {
    throw new Error('Content, post, and author are required');
  }

  try {
    // Ensure both the post and author exist
    const postExists = await prisma.post.findUnique({
      where: { id: postId }
    });

    const authorExists = await prisma.user.findUnique({
      where: { id: authorId }
    });

    if (!postExists) {
      throw new Error('Post not found');
    }

    if (!authorExists) {
      throw new Error('Author not found');
    }

    const comment = await prisma.comment.create({
      data: {
        content,
        post: {
          connect: { id: postId }
        },
        author: {
          connect: { id: authorId }
        }
      },
      include: {
        author: true,
        post: true
      }
    });

    // Revalidate the home page to show the new comment
    revalidatePath('/');

    return comment;
  } catch (error) {
    console.error('Error creating comment:', error);
    throw error;
  }
}

Here's a brief explanation of what the server actions code is doing:

The getUsers action fetches all users from the database and includes their posts and comment counts.
The getPosts action fetches the latest posts, including the author and comment counts.
The getUserById action fetches a single user by ID, including their posts, comments, and counts.
The createUser action creates a new user in the database.
The createPost action creates a new post in the database.
The createComment action creates a new comment in the database.

Building the user interface with server components

Now, let's leverage Next.js server components to build our UI. This approach moves data fetching to the server, reducing client-side JavaScript and improving performance. We'll start by editing the app/page.tsx file.

import UserForm from '@/components/UserForm';
import UserList from '@/components/UserList';
import { getUsers } from '@/app/actions';

export default async function Home() {
  // Server-side data fetching using our server actions
  const users = await getUsers();

  return (
    <main className="min-h-screen bg-gray-50 py-12">
      <div className="container mx-auto px-4 max-w-5xl">
        <h1 className="text-3xl font-bold mb-12 text-center text-gray-800">
          Prisma + MongoDB User Management
        </h1>

        <section className="mb-16">
          <div className="flex items-center mb-8">
            <div className="h-10 w-2 bg-blue-500 rounded-full mr-3"></div>
            <h2 className="text-2xl font-bold text-gray-800">Users</h2>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <UserForm />
            <UserList initialUsers={users} />
          </div>
        </section>
      </div>
    </main>
  );
}

You should have some red squiggles in your code now because we haven't created the client components yet. So let's create those now.

First, we’ll create components/UserForm.tsx:

'use client';

import { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { useRouter } from 'next/navigation';
import { createUser } from "@/app/actions";

export default function UserForm() {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const handleCreateUser = async () => {
    if (!email) {
      toast.error("Email is required");
      return;
    }

    setLoading(true);
    try {
      await createUser({ email, name });

      // Reset form
      setEmail('');
      setName('');

      toast.success("User created successfully");

      // Refresh the page data to show the new user
      router.refresh();

    } catch (error) {
      console.error('Error creating user:', error);
      toast.error((error as Error).message || "Failed to create user");
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card className="shadow-sm bg-white overflow-hidden border-0 pt-0 self-start">
      <CardHeader className="bg-blue-50 border-b px-6 py-5 rounded-none">
        <CardTitle className="text-xl text-blue-900">Add New User</CardTitle>
      </CardHeader>
      <CardContent className="p-6">
        <div className="space-y-6">
          <div>
            <Label htmlFor="email" className="text-sm font-medium text-gray-700 mb-1.5 block">
              Email <span className="text-red-500">*</span>
            </Label>
            <Input 
              id="email"
              placeholder="user@example.com" 
              value={email} 
              onChange={(e) => setEmail(e.target.value)} 
              type="email"
              required
              className="h-11 border-gray-300 focus:border-blue-500 focus:ring-blue-500"
            />
          </div>

          <div>
            <Label htmlFor="name" className="text-sm font-medium text-gray-700 mb-1.5 block">
              Name
            </Label>
            <Input 
              id="name"
              placeholder="John Doe" 
              value={name} 
              onChange={(e) => setName(e.target.value)} 
              className="h-11 border-gray-300 focus:border-blue-500 focus:ring-blue-500"
            />
          </div>

          <Button 
            onClick={handleCreateUser} 
            disabled={loading}
            className="w-full h-11 mt-2 bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-200"
          >
            {loading ? 'Creating...' : 'Create User'}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}

Now, create components/UserList.tsx:

'use client';

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import Link from 'next/link';
import { User } from '@prisma/client';

// Use Prisma's generated type with additional properties for counts
type UserWithCounts = User & {
  _count: {
    comments: number;
    posts: number;
  };
};

interface UserListProps {
  initialUsers: UserWithCounts[];
}

export default function UserList({ initialUsers }: UserListProps) {  
  return (
    <Card className="shadow-sm bg-white overflow-hidden border-0 pt-0">
      <CardHeader className="bg-blue-50 border-b px-6 py-5 rounded-none">
        <CardTitle className="text-xl text-blue-900">Users</CardTitle>
      </CardHeader>
      <CardContent className="p-6">
        {initialUsers.length === 0 ? (
          <div className="text-center py-10 text-gray-500 italic">
            No users found. Create your first user!
          </div>
        ) : (
          <div className="space-y-4">
            {initialUsers.map(user => (
              <Link href={`/users/${user.id}`} key={user.id} className="block">
                <div className="p-4 border border-gray-200 rounded-lg hover:bg-blue-50 transition-colors group">
                  <div className="font-medium text-lg text-gray-900 group-hover:text-blue-700">
                    {user.name || 'No name'}
                  </div>
                  <div className="text-sm text-gray-600 mt-1">
                    {user.email}
                  </div>
                  <div className="mt-3 flex items-center gap-4 text-xs text-gray-500">
                    <div className="flex items-center bg-gray-100 px-3 py-1 rounded-full">
                      <span className="font-medium mr-1">Posts:</span> 
                      <span className="text-blue-600 font-medium">{user._count?.posts || 0}</span>
                    </div>
                    <div className="flex items-center bg-gray-100 px-3 py-1 rounded-full">
                      <span className="font-medium mr-1">Comments:</span> 
                      <span className="text-blue-600 font-medium">{user._count?.comments || 0}</span>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}

And you should see even more squiggly lines, haha. To fix these don't forget to set up the UI components:

# Initialize shadcn
npx shadcn@latest init
# Add the components we need
npx shadcn@latest add button card input label sonner

Then, add the Sonner (toast) provider to your app/layout.tsx file:

import { Toaster } from "@/components/ui/sonner"; // add this import

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster position="top-right" /> {/* add this line */}
      </body>
    </html>
  );
}

Now, to test our app, we can run:

npm run dev

You should now be able to create users and see them in the list!

Expanding app functionality with posts and comments

Now, let's make our app do more by adding posts and comments, which will show you how well Prisma ORM handles relationships in MongoDB.

First, let's update the app/page.tsx file to include the PostForm and PostList components:

import UserForm from '@/components/UserForm';
import UserList from '@/components/UserList';
import PostForm from '@/components/PostForm';
import PostList from '@/components/PostList';
import { getUsers, getPosts } from '@/app/actions';

export default async function Home() {
  // Server-side data fetching using our server actions
  const users = await getUsers();
  const posts = await getPosts(5); // Get 5 most recent posts

  return (
    <main className="min-h-screen bg-gray-50 py-12">
      <div className="container mx-auto px-4 max-w-5xl">
        <h1 className="text-3xl font-bold mb-12 text-center text-gray-800">
          Prisma + MongoDB User Management
        </h1>

        <section className="mb-16">
          <div className="flex items-center mb-8">
            <div className="h-10 w-2 bg-blue-500 rounded-full mr-3"></div>
            <h2 className="text-2xl font-bold text-gray-800">Users</h2>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <UserForm />
            <UserList initialUsers={users} />
          </div>
        </section>

        <section>
          <div className="flex items-center mb-8">
            <div className="h-10 w-2 bg-green-500 rounded-full mr-3"></div>
            <h2 className="text-2xl font-bold text-gray-800">Posts</h2>
          </div>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <PostForm users={users} />
            <PostList initialPosts={posts} />
          </div>
        </section>
      </div>
    </main>
  );
}

Now, let's create the components for posts and comments at components/PostForm.tsx and components/PostList.tsx.

'use client';

import { useState } from 'react';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { 
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { useRouter } from 'next/navigation';
import { createPost } from "@/app/actions";
import { User } from "@prisma/client"; // Import User type from Prisma

interface PostFormProps {
  users: User[];
}

export default function PostForm({ users }: PostFormProps) {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');
  const [authorId, setAuthorId] = useState('');
  const [published, setPublished] = useState(false);
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const handleCreatePost = async () => {
    if (!title || !authorId) {
      toast.error("Title and author are required");
      return;
    }

    setLoading(true);
    try {
      await createPost({
        title,
        content,
        authorId,
        published
      });

      // Reset form
      setTitle('');
      setContent('');
      setAuthorId('');
      setPublished(false);

      toast.success("Post created successfully");
      router.refresh();

    } catch (error: any) {
      console.error('Error creating post:', error);
      toast.error(error.message || "Failed to create post");
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card className="shadow-sm bg-white overflow-hidden border-0 pt-0 self-start">
      <CardHeader className="bg-green-50 border-b px-6 py-5 rounded-none">
        <CardTitle className="text-xl text-green-900">Create Post</CardTitle>
      </CardHeader>
      <CardContent className="p-6">
        <div className="space-y-6">
          <div>
            <Label htmlFor="title" className="text-sm font-medium text-gray-700 mb-1.5 block">
              Title <span className="text-red-500">*</span>
            </Label>
            <Input 
              id="title"
              placeholder="Enter post title" 
              value={title} 
              onChange={(e) => setTitle(e.target.value)} 
              required
              className="h-11 border-gray-300 focus:border-green-500 focus:ring-green-500"
            />
          </div>

          <div>
            <Label htmlFor="content" className="text-sm font-medium text-gray-700 mb-1.5 block">
              Content
            </Label>
            <Textarea 
              id="content"
              placeholder="Write your post content here..." 
              value={content} 
              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setContent(e.target.value)}
              rows={4}
              className="resize-none border-gray-300 focus:border-green-500 focus:ring-green-500"
            />
          </div>

          <div>
            <Label htmlFor="author" className="text-sm font-medium text-gray-700 mb-1.5 block">
              Author <span className="text-red-500">*</span>
            </Label>
            <Select value={authorId} onValueChange={setAuthorId}>
              <SelectTrigger id="author" className="h-11 border-gray-300 focus:border-green-500 focus:ring-green-500 bg-white">
                <SelectValue placeholder="Select an author" />
              </SelectTrigger>
              <SelectContent>
                {users.length === 0 ? (
                  <div className="p-3 text-sm text-gray-500">No users available. Create a user first.</div>
                ) : (
                  users.map(user => (
                    <SelectItem key={user.id} value={user.id}>
                      {user.name || user.email}
                    </SelectItem>
                  ))
                )}
              </SelectContent>
            </Select>
          </div>

          <div className="flex items-center space-x-2 pt-2">
            <Checkbox 
              id="published" 
              checked={published} 
              onCheckedChange={(checked: boolean) => setPublished(checked)}
              className="text-green-600 focus:ring-green-500 h-5 w-5"
            />
            <Label htmlFor="published" className="text-sm font-medium text-gray-700 cursor-pointer">
              Publish immediately
            </Label>
          </div>

          <Button 
            onClick={handleCreatePost} 
            disabled={loading}
            className="w-full h-11 mt-2 bg-green-600 hover:bg-green-700 focus:ring-4 focus:ring-green-200"
          >
            {loading ? 'Creating...' : 'Create Post'}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}

components/PostList.tsx:

'use client';

import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { toast } from "sonner";
import { useRouter } from 'next/navigation';
import { formatDistance } from 'date-fns';
import { createComment } from '@/app/actions';
import type { Post, User, Comment } from '@prisma/client';

type PostWithRelations = Post & {
  author: User;
  comments: (Comment & {
    author: User;
  })[];
  _count: {
    comments: number;
  };
};

interface PostListProps {
  initialPosts: PostWithRelations[];
}

export default function PostList({ initialPosts }: PostListProps) {
  const [commentContents, setCommentContents] = useState<{[key: string]: string}>({});
  const [expandedPost, setExpandedPost] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState<string | null>(null);
  const router = useRouter();

  const handleCommentChange = (postId: string, content: string) => {
    setCommentContents(prev => ({
      ...prev,
      [postId]: content
    }));
  };

  const handleSubmitComment = async (postId: string, authorId: string) => {
    const content = commentContents[postId];
    if (!content) {
      toast.error("Comment cannot be empty");
      return;
    }

    setSubmitting(postId);
    try {
      await createComment({
        content,
        postId,
        authorId
      });

      // Clear the input
      setCommentContents(prev => ({
        ...prev,
        [postId]: ''
      }));

      toast.success("Comment added successfully");
      router.refresh();

    } catch (error: any) {
      console.error('Error adding comment:', error);
      toast.error(error.message || "Failed to add comment");
    } finally {
      setSubmitting(null);
    }
  };

  const toggleComments = (postId: string) => {
    setExpandedPost(expandedPost === postId ? null : postId);
  };

  return (
    <Card className="shadow-sm bg-white overflow-hidden border-0 pt-0">
      <CardHeader className="bg-green-50 border-b px-6 py-5 rounded-none">
        <CardTitle className="text-xl text-green-900">Recent Posts</CardTitle>
      </CardHeader>
      <CardContent className="p-6">
        {initialPosts.length === 0 ? (
          <div className="text-center py-10 text-gray-500 italic">
            No posts found. Create your first post!
          </div>
        ) : (
          <div className="space-y-6">
            {initialPosts.map(post => (
              <Card key={post.id} className="border-0 shadow-sm overflow-hidden bg-white pt-0 pb-0">
                <CardHeader className="pb-3 bg-gray-50 border-b px-5 py-4 rounded-none">
                  <div className="flex justify-between items-start">
                    <CardTitle className="text-xl font-bold text-gray-800">{post.title}</CardTitle>
                    {!post.published && (
                      <span className="text-xs bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full font-medium">Draft</span>
                    )}
                  </div>
                  <div className="text-xs text-gray-500 mt-2">
                    By <span className="font-medium">{post.author.name || post.author.email}</span> • 
                    <span className="ml-1">{formatDistance(new Date(post.createdAt), new Date(), { addSuffix: true })}</span>
                  </div>
                </CardHeader>
                <CardContent className="py-5 px-5">
                  <p className="text-gray-700 leading-relaxed">{post.content || 'No content'}</p>
                </CardContent>
                <CardFooter className="flex flex-col items-start pt-0 pb-4 px-5 border-t bg-gray-50">
                  <Button 
                    variant="ghost" 
                    size="sm" 
                    onClick={() => toggleComments(post.id)}
                    className="px-0 text-xs text-green-700 hover:bg-transparent hover:text-green-800 hover:underline"
                  >
                    <span className="font-medium mr-1">{post._count.comments}</span>
                    {post._count.comments === 1 ? 'comment' : 'comments'} • 
                    <span className="ml-1">{expandedPost === post.id ? 'Hide' : 'Show'}</span>
                  </Button>

                  {expandedPost === post.id && (
                    <div className="w-full mt-4 space-y-4">
                      {post.comments.length > 0 ? (
                        <div className="space-y-3 mb-4">
                          {post.comments.map(comment => (
                            <div key={comment.id} className="bg-white p-3 rounded-md border border-gray-200">
                              <div className="font-medium text-xs text-gray-700 mb-1">
                                {comment.author.name || comment.author.email}
                              </div>
                              <div className="text-sm text-gray-800">{comment.content}</div>
                            </div>
                          ))}
                        </div>
                      ) : (
                        <div className="text-sm text-gray-500 mb-3 italic">No comments yet</div>
                      )}

                      <div className="flex gap-2">
                        <Input
                          placeholder="Add a comment..."
                          value={commentContents[post.id] || ''}
                          onChange={(e) => handleCommentChange(post.id, e.target.value)}
                          className="h-10 text-sm border-gray-300 focus:border-green-500 focus:ring-green-500"
                        />
                        <Button 
                          size="sm"
                          disabled={submitting === post.id || !commentContents[post.id]}
                          onClick={() => handleSubmitComment(post.id, post.author.id)}
                          className="px-4 h-10 bg-green-600 hover:bg-green-700"
                        >
                          {submitting === post.id ? 'Posting...' : 'Post'}
                        </Button>
                      </div>
                    </div>
                  )}
                </CardFooter>
              </Card>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}

Don't forget to install the additional UI components:

# Install additional shadcn components
npx shadcn@latest add select textarea checkbox

# Install date-fns for date formatting
npm install date-fns

Let’s test our app again by running:

npm run dev

You should now be able to create users, posts, and comments!

Integrating Prisma Accelerate

Let's add Prisma Accelerate to our app now. It gives us some nice benefits like connection pooling for serverless environments, global distribution, and faster database access.

First, we need to set up Prisma Accelerate in our project:

Sign up for Prisma Accelerate.
Choose Accelerate as a starting product and connect it to your existing MongoDB Atlas database using your connection string.
Generate an API key for your project.
In MongoDB Atlas, add “allow access from everywhere” in the network access list.

Now, let's update our Prisma ORM schema to use Accelerate in the prisma/schema.prisma file:

datasource db {
  provider  = "mongodb"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_DATABASE_URL") // Optional for better performance
}

generator client {
  provider        = "prisma-client-js"
}

...

Update your .env file to include the Prisma Accelerate URL:

DATABASE_URL="prisma://accelerate.prisma-data.net/?api_key=YOUR_API_KEY"
DIRECT_DATABASE_URL="mongodb+srv://username:password@cluster0.mongodb.net/mydb?retryWrites=true&w=majority"

The DATABASE_URL now points to Prisma Accelerate, which routes queries through its global infrastructure, while DIRECT_DATABASE_URL provides a direct connection for certain operations.

We'll need to install the Prisma Accelerate client extension as well:

npm install @prisma/extension-accelerate

Next, let's update our lib/prisma.ts file to take advantage of Accelerate's features. We'll add the Accelerate extension to Prisma Client configuration and bring in the edge version of Prisma Client.

import { PrismaClient } from '@prisma/client/edge';
import { withAccelerate } from '@prisma/extension-accelerate';

const prisma = new PrismaClient().$extends(withAccelerate());

const globalForPrisma = global as unknown as { prisma: typeof prisma };

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

export default prisma;

Lastly, we'll need to generate Prisma Client again:

npx prisma generate --no-engine

With this setup, our application now benefits from:

Faster cold starts: Prisma Accelerate handles all the connection pooling stuff, so you don't get those slow database connection times when your serverless functions spin up.
Better global performance: Your queries go through the closest edge location, making things faster for users all over the world.
No connection overload: Your database stays protected even when you get traffic spikes.
Smart caching: Data that gets accessed a lot can be cached at the edge.
Better visibility: You get a nice dashboard in Prisma Data Platform that shows you how your queries are performing.

Test out the application again by running npm run dev in the terminal and everything should still work as before, just more performant with Prisma Accelerate!

To really see the difference, deploy your app to Vercel, Netlify, or AWS Lambda. You'll notice way faster cold starts and more consistent performance overall.

Accelerate caching strategies

Prisma Accelerate offers edge caching capabilities beyond its connection pooling. Here's how to optimize application performance with these caching options.

Prisma Accelerate supports two main caching methods: Time-to-Live (TTL) and Stale-While-Revalidate (SWR).

Time-to-Live (TTL) caching

TTL caching works well for data that updates infrequently. You specify how long (in seconds) a cached response remains valid:

// Example of TTL caching for user list
export async function getUsers() {
  try {
    const users = await prisma.user.findMany({
      include: {
        posts: true,
        _count: {
          select: { comments: true, posts: true }
        }
      },
      orderBy: {
        createdAt: 'desc'
      },
      // Add TTL caching - cache for 60 seconds
      cacheStrategy: {
        ttl: 60, // Cache is fresh for 60 seconds
        tags: ["users_list"], // Tag for cache invalidation
      }
    });

    return users;
  } catch (error) {
    console.error('Error fetching users:', error);
    throw new Error('Failed to fetch users');
  }
}

With a 60-second TTL:

The first request hits the database and caches the result.
Requests in the next 60 seconds come from the cache without database access.
After 60 seconds, the cache expires and the next request queries the database.

This reduces database load for frequently accessed, relatively static data.

Stale-While-Revalidate (SWR) caching

SWR works better when you need quick responses while maintaining data freshness:

// Example of SWR caching for posts
export async function getPosts(limit = 5) {
  try {
    const posts = await prisma.post.findMany({
      include: {
        author: true,
        comments: {
          include: { author: true },
          orderBy: { createdAt: 'desc' }
        },
        _count: { select: { comments: true } }
      },
      orderBy: {
        createdAt: 'desc'
      },
      take: limit,
      // Add SWR caching
      cacheStrategy: {
        swr: 120, // Serve stale data for up to 120 seconds while revalidating
        tags: ["posts_list"], // Tag for cache invalidation
      }
    });

    return posts;
  } catch (error) {
    console.error('Error fetching posts:', error);
    throw new Error('Failed to fetch posts');
  }
}

With SWR:

After initial caching, subsequent requests receive cached data immediately.
A background process updates the cache.
Users get fast responses while the system updates stale data.

Combined TTL and SWR

You can use both approaches together for more flexibility:

// Example with both TTL and SWR
export async function getUserById(id: string) {
  try {
    const user = await prisma.user.findUnique({
      where: { id },
      include: {
        posts: { orderBy: { createdAt: 'desc' } },
        comments: { 
          orderBy: { createdAt: 'desc' },
          take: 10
        },
        _count: { select: { comments: true, posts: true } }
      },
      // Combined caching strategy
      cacheStrategy: {
        ttl: 30,    // Fresh for 30 seconds
        swr: 60,    // Then stale but acceptable for 60 more seconds
        tags: [`user_${id}`], // User-specific tag
      }
    });

    if (!user) throw new Error('User not found');
    return user;
  } catch (error) {
    console.error(`Error fetching user with ID ${id}:`, error);
    throw error;
  }
}

This approach provides fresh data for 30 seconds, then stale-but-fast data for another 60 seconds while refreshing in the background.

On-demand cache invalidation

When data changes, you can immediately invalidate cache entries using tags:

// After creating or updating content
await prisma.$accelerate.invalidate({
  tags: ["posts_list", `user_${authorId}`],
});

This makes fresh data available right after changes, without waiting for cache expiration.

Choosing the right strategy

Consider these factors for your application:

Data volatility: Update frequency matters
- Frequently changing data: Short TTL or SWR
- Relatively static data: Longer TTL
Freshness requirements: How current the data must be
- Critical data (financial): Short/no caching with invalidation
- Moderate importance (social content): SWR for balance
- Low importance (reference data): Longer TTL
Request volume: Access frequency
- High-volume reads: More caching
- Infrequent access: Less caching

These cache parameters can improve your application's performance without complex caching infrastructure.

Conclusion

That's it! We've built a complete Next.js application with Prisma ORM, MongoDB, and Tailwind CSS. We've explored everything from basic setup to advanced features like Prisma Accelerate.

Let's recap what makes this combination so powerful:

Seamless integration with Next.js
Type-safe database access with Prisma ORM
Intuitive data modeling with relationship support
Performance optimization with Prisma Accelerate

Prisma ORM gives you a more productive, type-safe way to work with MongoDB that lets you focus on building features.

If you're building with MongoDB, I highly recommend trying Prisma ORM today!

Drop a comment if you have any questions about this setup.

BONUS: Repo & homework

If you want to explore this stack further, I've created a GitHub repository with this exact setup. Try adding more functionality like the ability to delete users, posts, and comments. Let me know what you come up with!

Say Hello! YouTube | Twitter | LinkedIn | Instagram | TikTok

Next.js 14: No New APIs & Breaking Changes

Jesse Hall - codeSTACKr — Tue, 31 Oct 2023 19:12:41 +0000

Next.js Conf 2023, held at SFJazz in San Francisco, CA, was a phenomenal blend of live in-person talks and networking with amazing industry experts. I am appreciative to have been given the chance to attend this year. In this article, I’ll give you the TLDR; on the conference and announcements.

Highlights

Turbopack is getting faster!
Server Actions are now stable.
Partial Prerendering is in preview.
A free course, Next.js Learn, was released.

Turbocharged Next.js Compiler

The Next.js team has tirelessly worked on enhancing local development performance since Next.js 13. The focus shifted to a more incremental approach, with Turbopack, their Rust-based engine, being at the core of these advancements. The real-world impact is up to 53.3% faster local server startup and up to 94.7% faster code updates with Fast Refresh. This initiative is nearing its stable release, promising a more reliable, swift development experience.

Stabilization of Server Actions

With Next.js 14, Server Actions have become stable. Instead of manually creating API routes for backend tasks, developers can define server-side functions directly within React components, allowing a seamless interaction between client and server, even incorporating error handling, caching, revalidating, and redirecting within the App Router model. The underlying goal is to streamline the developer's workflow while enhancing the user's interaction with the application. For those using TypeScript, it also ensures better type-safety between client and server. This stable upgrade highlights Next.js's ongoing efforts to enhance the synergy between client and server, promising a more streamlined and robust web development experience.

// app/page.tsx

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    await db.form.insertOne({ formData });
  }

  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Partial Prerendering (Preview)

Partial Prerendering aims to amalgamate the speed of static rendering with the flexibility of dynamic, personalized responses. This compiler optimization leans on React Suspense to deliver a fast initial static response while dynamically replacing components based on user interactions or other triggers. It simplifies the rendering model, requiring no new APIs to learn, and is under active development.

// app/page.tsx

export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}> // skeleton loads while data is being loaded from your database
          <ShoppingCart /> // Replaces the skeleton when data loading is finished
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

Metadata improvements

Next.js 14 addresses the importance of sending crucial metadata about the viewport, color scheme, and theme to the browser before streaming the page content. This effort helps in preventing flickers or layout shifts, enhancing the user experience. Some deprecated metadata options have been replaced with new ones to further this initiative.

Education and community

A brand-new free course on Next.js has been released, covering a wide array of topics from styling, optimizing fonts, and images to setting up databases and handling errors. This addition is a testimony to the growing community and educational resources surrounding Next.js.

Breaking changes

Several breaking changes and deprecations were announced to pave the way for improved features and streamlined development experience.

The minimum Node.js version requirement has been updated to 18.17.
WASM Target removed.
@next/font replaced with next/font.
ImageResponse import changed from next/server to next/og.
next export deprecated; instead, use output: 'export'.

The talks

This is not an exhaustive list of every talk. I’ve picked the ones that I had the opportunity to attend/watch.

Keynote: “No New APIs” 🎉 - Guillermo Rauch

In the keynote for Next.js Conf 2023, Guillermo Rauch discussed the growth and future of Next.js. The talk highlighted the release of Next.js 14, which focuses on improved performance and simplification, rather than introducing new APIs. Guillermo discussed how Next.js 14 is building on foundational technologies like React Server Components and introduced a new feature in preview, called "Partial Prerendering," aimed to provide both fast initial and dynamic visuals without compromising on the developer experience.

How Next.js is Delivering React’s Vision for the Future - Sam Selikoff

Sam discussed how Next.js is fulfilling React's vision for the future, focusing on the integration of server components and server actions into Next.js. He explained that server components and server actions offer a "first-class way" to fetch and handle data, which complements React’s strong suit: composability. 🍻

There was a bit of controversy when an out of context screenshot emerged on Twitter. But if you were there in the audience or online watching, the point Sam was trying to get across was clear: Server Actions are awesome! This talk really made it click for me.

Also, I fixed the image: 😅

Executing on Inspiration with the Vercel Stack - Michelle Bakels

Michelle shared her journey of organizing React Miami, a developers' conference, and how Vercel and Next.js made the process efficient and manageable. With no prior experience in organizing such events, Michelle discussed the challenges she faced and how Vercel’s suite of features, from free Next.js templates to AI-powered CMS solutions, enabled her to focus on what mattered most: building a community and bringing a world-class tech conference to South Florida.

Building Generative UI with Next.js - Jared Palmer

In his talk, Jared Palmer, VP of AI at Vercel, gave us a backstage pass to v0, a product that leverages AI to generate UI code from natural language prompts. v0 uses Vercel's AI SDK and integrates seamlessly with Next.js, providing a streamlined architecture for AI-native products. Palmer also discussed the shift toward generative user interfaces and how Next.js 14 sets the foundation for this new era.

The Big Headless CMS Lie - James Mikrut

James, the co-founder of Payload, a headless CMS with MongoDB support, shared his insights on the drawbacks and limitations of using a headless CMS in the context of web development. He challenged the promises often made about headless CMS, such as separation of concerns and ease of content migration, revealing that these claims often don't align with the reality faced by developers and clients. James is considering integrating Payload directly with Next.js to overcome these limitations and offer a better developer experience, including out-of-the-box features and simpler deployments. Should Payload move to Next.js?

Performance in React and Next.js - Lydia Hallie

Lydia's talk focused on enhancing web performance through the latest features in React 18 and how Next.js leverages these advancements. She discussed the challenges posed by long tasks on the main thread and how they can affect user experience. Lydia discussed React 18's concurrent features, which allow for more responsive, non-blocking user interactions and smoother state updates. She highlighted how Next.js has further optimized these features to provide developers with out-of-the-box solutions for better-performing applications.

Live from Next.js Conf: Twitch Takeover - Theo, Madison Kanna, ThePrimegen

Theo, Madison, and Prime reacted to the Next.js Conf live during the conference. If you watched the conference live from Theo’s Twitch channel, you got the best experience with play-by-play commentary throughout the event.

Witty banter.. ✅

Light-hearted observations.. ✅

HTMX promotion.. ✅

Unlocking Composable Content with the App Router - Kapehe & Grant Sander

Kap and Grant discussed the benefits and challenges of adopting the App Router in Next.js, focusing on its impact on Formidable's business. They talked about how the App Router improves the quality of life by allowing Server Components and co-located data fetching, as well as enabling the embedding of Sanity Studio directly into Next.js apps. The talk also covered migration hiccups, primarily with library compatibility, and delved into caching and revalidation between Sanity and Next.js using the revalidateTag function.

Scaling an Open Source Learning Platform with Vercel - Chris Bautista

Chris, aka Trash, discussed how the TypeHero team has utilized Next.js and the Vercel ecosystem to rapidly scale their open-source learning platform. He emphasizes the framework's strong suits like React Server Components for efficient data rendering and file-based routing for nested routes. He also shared real-world challenges and solutions, including using Turborepo to drastically cut build times and leveraging Vercel's collaborative features for UI/design feedback.

Make Your Next.js App Realtime and Collaborative - Sylwia Vargas

Sylwia discussed how to make a Next.js app real-time and collaborative by creating a polling application. She introduced PartyKit, a tool that simplifies the process of implementing WebSockets for real-time data without running a server. By coupling PartyKit with Next.js, she demonstrated how to create a fully functional, real-time poll that users can interact with, showcasing the code and deployment process.

RSC and SSR: How it Fits - Tejas Kumar

Tejas delved into the intricacies of React Server Components (RSC) and how they integrate with server-side rendering (SSR), particularly in the context of Next.js. Using a dog-breed website as an example, he dissected the concepts of React elements and explained how RSC and SSR work cohesively. Tejas also demonstrated the mechanics of soft navigation in Next.js, highlighting that Server Components output JSX objects, not HTML strings, thereby offering a more fluid and progressively enhanced user experience.

The Things Vercel Won’t Show You - Theo

Theo explored unconventional and "cursed" patterns in Next.js that are typically not recommended by Vercel. The talk covered a range of tactics from marginally acceptable to highly irregular, such as pagination via Server Actions, using globalThis as an SSR helper, and even employing generator functions to achieve server-to-client component updates. These strategies, while not conventional, serve to push the boundaries of what's possible with Next.js.

Automate All of Your Customer Emails with AI in Next.js - Joel Hooks

Joel presented a comprehensive guide on automating customer emails using AI within a Next.js environment. The talk emphasized the need for a flexible, code-level owned, event-driven email workflow and introduced inngest as the tool for managing this automation. The core of the talk was a demonstration of how Hooks leveraged inngest functions to trigger emails upon specific user actions, with the email content itself being generated and refined through multiple rounds with GPT-based AI, achieving high-quality, contextually appropriate customer emails.

See you next year!

The conference was not just a showcase of the latest features but an exemplification of the community’s robustness and the continuous endeavor to elevate the Next.js ecosystem to new heights.

I’m looking forward to what the Next.js team has for us next time.

This article was inspired by the comprehensive write-up by the Vercel team. For an in-depth understanding and exploration of the features discussed, you can visit the Vercel Next.js 14 blog article.

Who am I?

My name is Jesse Hall. I’m a Senior Developer Advocate at MongoDB. We’ve partnered with Vercel to bring you our MongoDB Atlas Vercel Marketplace integration. With our integration, you can spin up a new MongoDB Atlas database in your Vercel project in no time!

For a quick walkthrough, check out this video:

Render ATL 2023 Trip Report

Jesse Hall - codeSTACKr — Wed, 07 Jun 2023 23:24:26 +0000

Don't let the FOMO get you down! Check out my trip report from Render ATL 2023. I'll talk about all of my experiences throughout the entire event.

https://twitter.com/DThompsonDev/status/1664213594723037185

For anyone who has never heard of Render ATL, it is THE tech conference where diversity meets development. This year, it was held May 31 - June 2, 2023 at the Americasmart Building in Atlanta, Georgia.

There were 2600+ in attendance with about 100 speakers! With 12 workshops and 95 talks, there was something for everyone. The topics ranged from design & CSS, web & mobile engineering, product & project management, and leadership & entrepreneurship.

In this article, I want to take you on a trip through Render ATL from my eyes. I'll talk about all of my experiences throughout the entire event.

There were so many great speakers! I just did not have time to attend every session. If your talk is not mentioned, it's not because it wasn't great!!

Who am I?

You're probably wondering who I am. My name is Jesse Hall. I'm a Senior Developer Advocate at MongoDB and a Tech YouTuber. I have over 20 years of development experience and I love to help developers learn new things. I also love long walks on the beach, VS Code, coding in React, and CSS is my jam. 😅 If you want to hear more from me, follow me on Twitter.

Day 1: May 31

Hotel

The first thing I did after landing in Atlanta was check in at the Westin Peachtree Plaza hotel. This 73 floor hotel is amazing! It was the perfect spot to host this event. We even got custom key cards for our rooms.

Workshops

I got in late, so there was no time to attend an entire workshop. But I got to check out the venue and the workshops seemed well attended and received.

Some that stood out to me:

AI for JavaScript - Tensorflow.js - Gant Laborde
Reactivity Deep Dive with Vue.js - Evan You
TypeScript, Quickly and Effectively - Adam Rackis
Build a Simple Chat App with Appwrite - Wess Cope

Dinner

By this time I was hungry. So what do I do? Check Twitter of course!

https://twitter.com/jescalan/status/1663983229060169732

I saw that the Clerk crew were hanging out for dinner, so I met the at Tin Lizzy's for some awesome tacos. I meet so many great people here.

Left to right: adamdotdev, SteinlageScott, devagrawal09, jescalan, codestackr, gabe_g2i, zeu_dev, DenzelEch, ReggieDFord, jamesqquick, domitriusclark, r_marked, jetpackjoe

VIP Reception

After dinner I went to the VIP Reception on the top floor of the Westin (73rd floor!) at the amazing Sun Dial restaurant. This is a swanky restaurant with great food, drinks, and an awesome live band.

Everyone dressed up and we had an amazing time! Check it out:

https://twitter.com/codeSTACKr/status/1664115905603706880

https://twitter.com/techgirl1908/status/1665449238082252801

https://twitter.com/focusotter/status/1664043099780182018

https://twitter.com/LDLockhartJr/status/1665348099408121857

Day 2: June 1

The second day started with small hiccup. There seemed to be an issue with the check-in system that caused a delay in getting everyone through the registration line quickly. However, this only put the schedule behind by 20 minutes, and by lunch everything was back on track. The Render ATL team did a great job working under pressure!

The talks

Generative AI - A Builder's Guide

Speaker: Banjo Obayomi

This was a great introduction to AI's history and how it can be used in today's applications.

https://twitter.com/techgirl1908/status/1664269017182502912

Creating a whole new world with generative AI

Speaker: Colby Fayock

Catching the theme here?! 😅 AI is everywhere. This was a great one outlining tools we can use to build visual experiences with AI.

https://twitter.com/codeSTACKr/status/1664289255126888448

Empowering developers, uplifting users: Building tools in a code first state of mind

Speaker: Yoav Abrahami

Wix has been doing amazing things in the developer tooling front. Tools like Velo, Codux, Blocks, and the new Wix Headless service have really made developers rethink how Wix is positioned in the web platform landscape.

https://twitter.com/DevsOnWix/status/1664308879730130946

From Zero to Hero: Getting started in developer relations

Speaker: Tracy Lee

As a developer advocate, I was very interested to hear what Tracy had to say out the industry. And she did not disappoint! She really got me thinking about how I can help developers and how there are different buckets that a developer advocate can fit into.

https://twitter.com/codeSTACKr/status/1664327664839057408

Think like an attacker: Protecting your JavaScript applications from malicious packages

Speaker: Charlie Gerard

Cybersecurity is a hot topic. In this talk, Charlie showed how to use open-source packages safely.

https://twitter.com/codeSTACKr/status/1664359663830278148

From exploration to modification: Achieve more with a visual IDE

Speakers: Tom Raviv, Jonathan Marton

Wix's new visual IDE for React is amazing! This talk showed it off and you need to download Codux and give it a try if you haven't already! (It's free)

https://twitter.com/codeSTACKr/status/1664374559213010944

Dinner

I was invited to attend a dinner hosted by Wix at the Ponce City Market. Great food and great company! Thank you again to the Wix team!

Can you find me in the picture?

https://twitter.com/DevsOnWix/status/1664446627631824897

Rooftop party

After dinner, we were escorted to the rooftop where the fun continued. The roof of the Ponce City Market is like a mini carnival with putt-putt golf, carnival games, and even rides. But people were mostly dancing because there was a great DJ there too!

https://twitter.com/Devchicajasmin/status/1664498154660659201

https://twitter.com/focusotter/status/1664454195749978114

Day 3: June 2

It's hard to believe it's already Day 3! Here's the line up of talks that I attended:

The talks

From Vanilla JS to React: Refactoring your project

Speaker: Cat Ballar

Cat did an amazing job explaining how to translate a vanilla JavaScript project into React components and demonstrated the use of hooks.

https://twitter.com/codeSTACKr/status/1664623079086071814

Real Talk: Diversity in Tech - Level up your online brand

Speakers: Anthony D. Mays, Janackeh Blackwell, Lawrence Lockhart, Katrina Tucker

This was a very inspirational and practical panel discussion from these online influencers. (I know they like me calling them that 😅)

https://twitter.com/codeSTACKr/status/1664624949569495040

Leveling up with Copilot

Speaker: Rizel Scarlet

This session was standing room only! Rizel is a captivating speaker and made this talk very fun. We learned how to use Copilot to improve our productivity.

https://twitter.com/codeSTACKr/status/1664631128479629316

Fresh Style: The next generation of CSS

Speaker: Scott Tolinski

Scott demonstrated what the future of CSS looks like. There are some really cool things that are ready to ship today or will be ready in the near future.

https://twitter.com/codeSTACKr/status/1664648611118952453

Improve your data fetching with React Query

Speaker: Danny Thompson

Somehow Danny made state management in React seem cool. 😅 React query is an amazing tool and Danny made it easy to understand.

https://twitter.com/codeSTACKr/status/1664640431383093253

Neurodiversity in the workplace

Speaker: Wesley Faulkner

Wesley talked about the difference between neurotypical, neurodivergent, and neurodiversity. The main takeaway: We are all involved in neurodiversity. This is a great subject to learn more about.
Streaming server rendering with suspense

Speaker: Shaundai Person

React kept us in suspense for a long time before finally releasing this feature. Since then, I haven't heard a lot about it. I think most developers don't fully understand it. Shaundai did an awesome job at explaining it with easy to understand examples.

https://twitter.com/codeSTACKr/status/1664692585586122752

Thinking across the framework barrier

Speaker: Evan You

Evan discussed why there are so many JavaScript frameworks and why it's a good thing. Main takeaway: No single JavaScript framework can be a silver bullet.

https://twitter.com/codeSTACKr/status/1664704809948139546

The wind and the waves: The formation of framework waves from the epicenter

Speaker: Sarah Drasner

This was one of my favorite talks. Sarah talked about the evolution of JavaScript frameworks and new stuff in Angular. Main takeaway: Sarah is Angular's grandma. 😂

https://twitter.com/codeSTACKr/status/1664728967088070658

How content creation took my career to the next level

Speaker: James Q Quick

This one hit home. James is a great speaker and has recently gone full-time at content creation. He talked about his journey and all of the many things involved in working for yourself, creating content full-time. This was a very inspirational talk!

https://twitter.com/codeSTACKr/status/1664764068824055808

Closing session

Justin and Angie closed out the conference with reflection, gratitude, and the announcement that Render ATL will be back next year on June 12 - 14, 2024!!

https://twitter.com/anthonydmays/status/1664756999970586624

Concert with Kaytranada

After the last session, the attendees made their way to the Kaytranada concert at Historic Fourth Ward Skatepark.

https://twitter.com/ThugDebugger/status/1664790619644993538

Daily themes

Each day had it's own theme!

🏀 Day 1: Jersey day

https://twitter.com/ladyleet/status/1663918510353838086

https://twitter.com/blkgrlcto/status/1664018048414613507

https://twitter.com/Devchicajasmin/status/1663867601661952001

🦸 Day 2: Cosplay

https://twitter.com/maleja111/status/1664417397967581184

https://twitter.com/AbbeyPerini/status/1664317255407005696

https://twitter.com/wasabiwellness/status/1664309897750626307

https://twitter.com/nickytonline/status/1664316477229481991

https://twitter.com/ladyleet/status/1664275823262838785

🎨 Day 3: Tie Dye

https://twitter.com/xirclebox/status/1665163132610703366

https://twitter.com/emmycacao/status/1664632711464493058

Other's share their experience

✈️ Brandon Bayer showed up in style!

https://twitter.com/flybayer/status/1662934379117568001

🤯 Grey got a Render ATL tattoo!!

https://twitter.com/GreyNewell/status/1664960670608023552

Games!

🕹️ There was a really cool game room!

https://twitter.com/sarah_edo/status/1665104672602898434

Secret suites

🥃 Tracy Lee (This Dot Labs) had a really nice suite I got to visit a couple times. She had the best whiskey's!!

https://twitter.com/BenLesh/status/1663982907520630814

Lots of fun!

https://twitter.com/sarah_edo/status/1664756918961700864

President

Apparently Shaundai is running for President?! 😅

https://twitter.com/DThompsonDev/status/1664976539308441602

More photos

If you want to see more photos or add your own, check out this thread from Danny Thompson.

https://twitter.com/DThompsonDev/status/1665440720683925504

See you next year Render ATL!

There were so many other great speakers! I just couldn't attend every session. Be sure to check out the RenderATL YouTube channel for all the talks when they are released.

I had such an amazing time meeting great people in person. I'll definitely be back next year. See you June 12-14, 2024!! 🍑

Be sure to subscribe to my YouTube channel codeSTACKr if you haven't already.

Thanks for reading!

Say Hello! YouTube | Twitter | Instagram | TikTok

Web Development Roadmap 2023

Jesse Hall - codeSTACKr — Tue, 31 Jan 2023 19:51:46 +0000

Do you want to become a full-stack web developer in 2023? The demand for programmers continues to rise even through the pandemic. If you're wondering if it's too late for you to get started, NO, it's not too late. So let me show you what you need to do.

Intro

You've probably seen road maps like these, I've even created one before. These crazy spaghetti diagrams of hundreds of technologies. These are packed full of info but mostly overwhelm and confused people.

In this article, I'll stick to a roadmap of the core essentials that you need to learn in order to become a full-stack web developer in 2023. Then, after that, I'll talk about a few technologies that are optional, and extracurricular, that you might want to look into after you've learned the basics.

Not only am I going to give you this roadmap, but I've also curated a list of resources for each technology that will get you started learning each one. And I'm going to provide that to you for FREE.

So, I'm going to refer to a ton of resources throughout this article. I have all of them consolidated into a list for you: 2023 Web Dev Roadmap.

I want to be clear though, that you don't need to learn every technology out there. And the best way to pick a technology is to look at the market, and the companies that you would want to work for, and see what technologies they use. Then learn those technologies and languages.

The great thing is that once you've learned one programming language, it's pretty easy to learn another.

Quick disclaimer: I'm not going to cover, in this roadmap, every technology out there. If I leave anything out, it's not because it's not good to know. There is a great use case for everything. But I'm going to focus on the ones that I think will be great to know in 2023.

So, let's get into it...

If you prefer to watch, here's the video version:

Top Skill to Learn

Before you even get started learning web development, you will need to know that the best skill any developer can master - is Googling.

Google is a developer's best friend. When you don't know how to fix an issue, or need to learn how to accomplish a specific task, the first thing you should do is Google it.

Try to find an answer to your questions on your own, and do research. Especially when learning a new technology, the documentation for that tech will most likely answer all of your questions.

If you do need to reach out to the community for help, be very detailed about what your issue is and what you've already tried and searched for.

Get good at Googling. Even the most experienced developer can't remember everything.

How The Internet Works

The first thing that you should understand, if you are just getting started, is how the internet works. You need a basic understanding of how browsers, domain names, hosting services, HTTP/HTTPS, and DNS works.

I have a couple of great resources that will help you understand these concepts.

Basic Tools

Next, you need to set up your basic tools. In web development, the main tools are your browser, code editor, and terminal.

Browser

Browsers are a very important tool for web developers. They are how the end users will view our applications. I prefer to use Chromium-based browsers as my main browser. I use Microsoft Edge specifically, but Chrome and Brave are other Chromium-based browsers that are great. But, when it comes to testing your websites and web apps, you need to test with all of the major browsers to ensure that your application will work properly in all of them. Currently, I test every project in Chrome, Edge, Safari, and Firefox to make sure it looks good and works in all of them.

Text Editor

The text editor is a web developer's best friend. The better you understand what it's capable of the more efficiently, accurately, and quickly you'll be able to write code.

My favorite code editor is VS Code! It is the most popular for the vast majority of developers.

I have tons of resources on my YouTube channel that can help you install, configure, and become familiar with VS Code.

If you want to become a pro in VS Code, I even have an entire course that will help you Become A VS Code SuperHero!

Terminal

Next, you will need to get used to using the terminal, or command line. Some are scared of it, but I promise, it's not that bad.

There are many options for a terminal. Every operating system comes with a terminal. Windows comes with 2; the Command Prompt and PowerShell. You can also use the Windows Subsystem for Linux (WSL) which gives you a Linux shell on Windows.

Another option, the one that I use, is Git Bash.

If you are on macOS or Linux, I would recommend Zsh.

And I'll provide links to all of those.

Coding

After you get your local environment set up, it's time to start coding! The first things you should learn are HTML, CSS, and JavaScript.

HTML provides structure to a website. CSS makes it look good. And JavaScript makes things happen.

HTML

The first thing to learn is HTML. Every webpage uses HTML. It is the main building block of the web. HTML provides the structure of a website. It is not a programming language, but a markup language.

You'll need to learn the basic syntax, semantic HTML, forms & validation, accessibility, SEO, and best practices. I have a bunch of resources for you to learn all that.

CSS

CSS is another important part of every website. It makes them look good by styling the HTML elements, and it adds flair with transitions and animations.

Now, there is a lot to CSS. If you are going to focus on Front-End development, you must understand CSS fully!

After learning the basics, you'll want to learn the layout features of Flexbox and CSS Grid.

After that, be sure to get comfortable with responsive design including rem units, viewport settings, fluid widths, and media queries.

Then there are CSS Frameworks. Some people just skip over the CSS basics and go straight to frameworks. And that's not good. You need to have a solid understanding of CSS before learning a CSS framework. So, I wouldn't suggest looking at any CSS frameworks at this time, but they are included later in the Roadmap.

JavaScript

JavaScript is the first programming language that you'll learn as a developer. HTML is a markup language, CSS is a styling language, and JavaScript is a programming language. It makes the website do "things".

So, you'll need to learn the basic syntax, DOM manipulation, the fetch API, JSON, and ES6+ features.

You should spend most of your time on this part. It is extremely important that you fully understand JavaScript before moving on.

For those who want to learn a JavaScript framework like React or Vue, DO NOT start learning a framework before you understand "vanilla", plain, JavaScript. These frameworks are based on JavaScript. You need this knowledge first.

I have tons of resources listed for you to fully learn JavaScript.

Terminal

Next, I would recommend you learn a bit more about the terminal. As you start getting into version control, frameworks, deployments, and other tech you'll need to use the terminal more and more. So, this is a good time to get more comfortable with the terminal.

Again, a bunch of resources are listed here: 2023 Web Dev Roadmap.

Version Control

Version control is very important to learn. Version control allows you to keep track of changes to your code base. This becomes very important as you start working with other developers on a team. Each person is making changes to the code base and these need to be tracked.

So, you should learn Git and GitHub. These allow you to keep track of changes, collaborate on projects, and are an integral part of CI/CD (Continuous Integration/Continuous Deployment) pipeline.

Hosting & Deployment

Next, you need to understand how to set up a hosting service and deploy a basic website. The easiest way to do this is with a static host like Netlify, Vercel, Cloudflare, or GitHub Pages. These allow for easy deployment that can be integrated with GitHub. This way, every time you update your GitHub repo, your site will automatically rebuild and deploy.

If your application requires a true back-end environment you'll want a more traditional hosting service such as Heroku, Linode, and there are many others.

I have lots of resources on this in the link below too.

Front-end Developer

At this point of the roadmap, you should know enough to call yourself a front-end developer. You should be able to build a basic website, deploy it, and manage it. So let's start looking at some back-end technologies.

Back-End Development

Since you've already learned JavaScript, you should now look into Node.js. Node.js allows us to use JavaScript on the back-end server. With node.js combined with express.js we can define routes, build out APIs, connect to databases, and so much more.

You'll also learn about package management. Node.js comes with npm, which is node package manager. Package managers allow you to easily add pre-built packages into your application that help you accomplish various tasks without recreating the wheel every time.

APIs

Next, learn about APIs (Application Programming Interfaces). These allow you to perform some sort of query or computation on the back-end, then send the results to the front-end.

A simple example is requesting data from a database. The API on the server will perform that action, then send the data to the front-end. This allows us to add a layer of security to our applications. We don't want the front-end to perform these actions since that would expose our database login credentials. The API allows us to do all of that behind the scenes and just send the resulting data to the user.

You'll hear the term REST or RESTful API. There are other types as well like GraphQL.

And I have resources on all of that linked here: 2023 Web Dev Roadmap.

Databases

Just about every site has some data that it needs to keep track of. Examples are products for sale or blog posts.

There are many different types of databases. There are relational, document, graph, wide column, and many others.

DISCLAIMER: Just to be completely transparent, I am a Developer Advocate for MongoDB. That being said, I don't think there is one technology to rule them all. There are different types of databases for a reason. Some are better than others depending on the use cases. So I'm not going to tell you that one database is the best and that you should always only use this one type of technology. Do your own research to understand technologies so that you can pick the best ones for your use case.

Relational Databases

Relational databases are a lot like spreadsheets with tables and rows and columns. These tables link to each other using unique identifiers. Relational databases are more strict and require you to define each table's column and type ahead of time. So you have to have a pre-defined schema.

Because of the way these databases are structured, you will most likely need an ORM (Object Relational Mapping) to make mapping the connected data easier. This way, when queried, it will return all of the connected data that you need. For each query, it has to reach out to each individual table and join the data back together before returning the results.

The most popular databases of this type use SQL or Structured Query Language. Examples are MySQL, PostgreSQL, and Microsoft SQL.

Document Databases

Relational databases have been around for decades and not much has changed. Document databases are a relatively newer technology that brings many benefits over SQL databases.

Document databases are not as strict as relational databases by default but can be as strict as you need. So, there's more flexibility.

Document databases use documents containing JSON. Since JSON is based on JavaScript, it's much easier to understand and implement into your application. There's no need for ORMs (Object Relational Mapping).

The best example of a document database in my opinion is MongoDB.

JavaScript Frameworks

This is the part of the roadmap where I would suggest learning a front-end JavaScript framework. But, I can't emphasize this enough, be sure you know JavaScript before moving on to this step.

Front-End frameworks have many advantages. You can build powerful single-page applications (SPA), keep your components organized, and easily build interactive UIs.

When you are working with a team, it becomes apparent how easy it is to break up an application into components for each team member to work on.

There are many frameworks available. In my opinion, you should learn one of these 3. And these are in order of my preference.

React

* React is by far my personal favorite. It is fairly easy to learn and has great community support. It's used in many companies and there are a lot of job openings for React developers.

* Vue is probably the easiest framework to learn. It is awesome to work with and also has great community support. It isn't as popular in the job market, but every year it's adopted more and more.

Angular

* Angular is a very popular framework, but I personally do not enjoy working with it. I think that it's more suited to very large applications and corporations. But, there are a lot of job openings for Angular developers too.

If you learn React or Vue, other frameworks are built on top of these frameworks. Examples of these are Next.js and Gatsby which are built on top of React, and Nuxt.js which is built on top of Vue. You can look into one of these after learning React or Vue if you want to add more built-in functionality out of the box like static site generation and server-side rendering.

CSS Frameworks

Next is a great time to learn a CSS framework. Just like with JavaScript frameworks, it's going to benefit you to know CSS before learning a CSS framework. CSS frameworks just make it easier to use CSS to style your application, but you are still using CSS.

The 2 CSS frameworks that I like to use are Tailwind CSS and Bootstrap.

Authentication

If your site needs to keep track of user interactions, like a shopping cart, or it has user accounts, you'll need to implement authentication. You could go old-school by using OAuth or JavaScript Web Tokens (JWT) manually.

But, to make things easier, you can use authentication providers which do all of the work for you. A great one is Auth0. And I have some resources for you on authentication as well.

Content Management Systems (CMS)

Content management systems allow you to easily manage the content of your site. If you are a freelancer, you will most definitely want a good CMS for your customer to use so that they can easily update the content on their website themselves.

WordPress is probably the most popular CMS. But WordPress traditionally requires you to use their service for the back-end CMS and the front-end and you're locked in.

In the past couple of years, headless CMSs have become very popular. And WordPress now has a headless option. This allows you to use a headless CMS with any front-end technology and you're not locked into a specific technology.

Some great examples of other headless CMSs are Sanity.io and Strapi.

Full-stack Developer

At this point in the roadmap, you've learned enough front-end and back-end technologies to call yourself a full-stack developer. But the learning never stops. You have to keep up with updates and upgrades to the technologies you've learned so far and keep your eye on new, emerging technologies that could add value to current or future projects. So don't stop learning.

Soft Skills & Personal Development

Something that often gets overlooked is soft skills, or a better name for it is "people skills", along with personal development.

These are the top skills that you should invest effort in developing:

Communication
Teamwork
Attention to Detail
Problem-Solving
Work Ethic
Time Management
Adaptability
Interpersonal Skills
Creativity
Leadership

Another huge issue that you will run into is losing motivation and impostor syndrome. You need to surround yourself with people who are supportive of you, and understand that you are not alone.

An amazing resource for motivation and dealing with impostor syndrome is Danny Thompson!! Check him out on YouTube and Twitter.

Other Tech

From this point on in this article, everything that I talk about is optional learning.

Other Front-end Frameworks

There are a couple of other front-end frameworks that you might want to keep your eye on.

Next.js

Next.js is a full-stack framework built on top of React. It has built-in routing, image optimization, SSG, SSR, ISR, TypeScript support, and one of the coolest features is API routes. You can have backend server API routes that utilize serverless functions right inside your frontend code base. It's really cool!

Svelte

Svelte has gained a lot in popularity. And it's very easy to learn because it just builds upon regular HTML, CSS, and JavaScript, so there's no need to learn boilerplate code needed for other frameworks. There's even a full-featured, full-stack framework built on top of Svelte called Svelte Kit. It's like Next.js is to React.

Astro

Another really interesting framework is Astro. With Astro you can build static websites using existing frameworks altogether. You can incorporate React components, Vue components, Svelte components, all together with Astro. It can combine and build these out to a static HTML site. It's a very interesting approach.

Other JavaScript

TypeScript

To build upon your JavaScript toolkit, you could learn TypeScript which is a superset of JavaScript. It allows for static typing. I don't mean typing on a keyboard. Typing of elements in your code. This helps you to catch errors and fix them before running your code.

When you use TypeScript, it gets compiled into regular JavaScript on build. So, this is a tool that you can add to JavaScript to help you write better code. And, it can be used with most frameworks.

Other CSS

If you want to expand your CSS skills, you should look into CSS animations, preprocessors, and different ways to incorporate CSS into your project, like CSS Modules and CSS in JS.

Other Back-end Languages

If you prefer working with back-end technologies, you might want to look into learning another back-end language. The best way to get a high-level understanding of what these languages are capable of is by checking out the 100 seconds videos from Fireship. He gives great, short explanations of each of these languages: Go, Rust, Python, Dart, PHP, Java, Kotlin, C, and C#.

Blockchain / Cryptocurrency

Something else to look into is blockchain and crypto. Blockchain is a type of database. But it's not like a typical database. It stores data in blocks and then chains them together, hence blockchain.

You can store any type of data in a block, but it's typically used as a ledger for transactions.

Bitcoin, among many others, use blockchain in a decentralized way so that no single person has control.

Decentralized blockchains are immutable. That means that the data cannot be changed. Once a transaction is recorded, it's permanent and everyone can see it.

This makes blockchain very secure.

Blockchains exploded in 2021, and it has leveled off in 2022, but I don't think they are going away and I do believe they will continue to grow in popularity as the technology matures.

I have a bunch of resources for you on this topic too.

Mobile Development

Maybe you want to get into mobile development. The traditional way to build a mobile application is by using languages such as Swift for iOS development and Java or Kotlin for Android development. But if you've learned HTML, CSS, and JavaScript you can use these to build native mobile applications as well.

Several technologies are popular in mobile app development. The most popular ones are React Native and Flutter.

Desktop Development

You can even use your web development skills to build cross-platform desktop apps with Electron. Electron uses JavaScript, HTML, and CSS and is powered by Chromium and Node.js.

With it, you can build desktop applications compatible with Mac, Windows, and Linux.

Some popular apps that are built with Electron are Visual Studio Code, Twitch, Slack, Figma, and Discord.

Machine Learning / AI

AI and machine learning are widely used to imitate human intelligence and perform simple as well as complex functions like the ability to learn and analyze information, collect data, understand the emotions of humans, or solve complex business challenges and problems.

We saw over just this past year the rapid growth of machine learning platforms and applications such as GitHub Copilot and more recently ChatGPT. These are both based on the OpenAI models.

AI is everywhere, get used to it, and it's not going away. It's not going to take your jobs any time soon, in fact, there is a lot of demand for new developers who can develop and improve these AI technologies. So this is a field of study you should check out.

Conclusion

Remember, you don't have to learn everything that we just covered. Start back at the beginning of the article and work your way through. Click here - 2023 Web Dev Roadmap - to get all of the links to the resources mentioned.

After you've learned the basics, focus on the technologies used in your current job or aspiring job. So, if your current employer uses Angular, focus on Angular. If the companies you are interviewing with use React, focus on React before your interviews.

Then you can learn other technologies in your spare time. (If you have any 😂) If you've gotten comfortable with JavaScript and you want to learn some Python in your spare time, then do that.

And don't be worried if you can't keep up with current trends and technologies. Most companies are not using the most up-to-date technologies.

Remember, learning something new takes time. It takes time, patients, and practice to get good at something. So be patient, take your time, never stop learning, and never give up!

Check out the full video on my YouTube channel.

Help me out by liking this video and subscribing if you haven't already.

Thanks for reading!

Say Hello! YouTube | Twitter | Instagram | TikTok

Getting Started with MongoDB & Mongoose

Jesse Hall - codeSTACKr — Tue, 19 Apr 2022 16:12:37 +0000

In this article, we’ll learn how Mongoose, a third-party library for MongoDB, can help you to structure and access your data with ease.

What is Mongoose?

Many who learn MongoDB get introduced to it through the very popular library, Mongoose. Mongoose is described as “elegant MongoDB object modeling for Node.js.”

Mongoose is an ODM (Object Data Modeling) library for MongoDB. While you don’t need to use an Object Data Modeling (ODM) or Object Relational Mapping (ORM) tool to have a great experience with MongoDB, some developers prefer them. Many Node.js developers choose to work with Mongoose to help with data modeling, schema enforcement, model validation, and general data manipulation. And Mongoose makes these tasks effortless.

If you want to hear from the maintainer of Mongoose, Val Karpov, give this episode of the MongoDB Podcast a listen!

Why Mongoose?

By default, MongoDB has a flexible data model. This makes MongoDB databases very easy to alter and update in the future. But a lot of developers are accustomed to having rigid schemas.

Mongoose forces a semi-rigid schema from the beginning. With Mongoose, developers must define a Schema and Model.

What is a schema?

A schema defines the structure of your collection documents. A Mongoose schema maps directly to a MongoDB collection.

const blog = new Schema({
  title: String,
  slug: String,
  published: Boolean,
  author: String,
  content: String,
  tags: [String],
  createdAt: Date,
  updatedAt: Date,
  comments: [{
    user: String,
    content: String,
    votes: Number
  }]
});

With schemas, we define each field and its data type. Permitted types are:

String
Number
Date
Buffer
Boolean
Mixed
ObjectId
Array
Decimal128
Map

What is a model?

Models take your schema and apply it to each document in its collection.

Models are responsible for all document interactions like creating, reading, updating, and deleting (CRUD).

An important note: the first argument passed to the model should be the singular form of your collection name. Mongoose automatically changes this to the plural form, transforms it to lowercase, and uses that for the database collection name.

const Blog = mongoose.model('Blog', blog);

In this example, Blog translates to the blogs collection.

Environment setup

Let’s set up our environment. I’m going to assume you have Node.js installed already.

We’ll run the following commands from the terminal to get going:

mkdir mongodb-mongoose
cd mongodb-mongoose
npm init -y
npm i mongoose
npm i -D nodemon
code .

This will create the project directory, initialize, install the packages we need, and open the project in VS Code.

Let’s add a script to our package.json file to run our project. We will also use ES Modules instead of Common JS, so we’ll add the module type as well. This will also allow us to use top-level await.

...
  "scripts": {
    "dev": "nodemon index.js"
  },
  "type": "module",
...

Connecting to MongoDB

Now we’ll create the index.js file and use Mongoose to connect to MongoDB.

import mongoose from 'mongoose'

mongoose.connect("mongodb+srv://<username>:<password>@cluster0.eyhty.mongodb.net/myFirstDatabase?retryWrites=true&w=majority")

You could connect to a local MongoDB instance, but for this article we are going to use a free MongoDB Atlas cluster. If you don’t already have an account, it's easy to sign up for a free MongoDB Atlas cluster here.

And if you don’t already have a cluster set up, follow our guide to get your cluster created.

After creating your cluster, you should replace the connection string above with your connection string including your username and password.

The connection string that you copy from the MongoDB Atlas dashboard will reference the myFirstDatabase database. Change that to whatever you would like to call your database.

Creating a schema and model

Before we do anything with our connection, we’ll need to create a schema and model.

Ideally, you would create a schema/model file for each schema that is needed. So we’ll create a new folder/file structure: model/Blog.js.

import mongoose from 'mongoose';
const { Schema, model } = mongoose;

const blogSchema = new Schema({
  title: String,
  slug: String,
  published: Boolean,
  author: String,
  content: String,
  tags: [String],
  createdAt: Date,
  updatedAt: Date,
  comments: [{
    user: String,
    content: String,
    votes: Number
  }]
});

const Blog = model('Blog', blogSchema);
export default Blog;

Inserting data // method 1

Now that we have our first model and schema set up, we can start inserting data into our database.

Back in the index.js file, let’s insert a new blog article.

import mongoose from 'mongoose';
import Blog from './model/Blog';

mongoose.connect("mongodb+srv://mongo:mongo@cluster0.eyhty.mongodb.net/myFirstDatabase?retryWrites=true&w=majority")

// Create a new blog post object
const article = new Blog({
  title: 'Awesome Post!',
  slug: 'awesome-post',
  published: true,
  content: 'This is the best post ever',
  tags: ['featured', 'announcement'],
});

// Insert the article in our MongoDB database
await article.save();

We first need to import the Blog model that we created. Next, we create a new blog object and then use the save() method to insert it into our MongoDB database.

Let’s add a bit more after that to log what is currently in the database. We’ll use the findOne() method for this.

// Find a single blog post
const firstArticle = await Blog.findOne({});
console.log(firstArticle);

Let’s run the code!

npm run dev

You should see the document inserted logged in your terminal.

Because we are using nodemon in this project, every time you save a file, the code will run again. If you want to insert a bunch of articles, just keep saving. 😄

Inserting data // method 2

In the previous example, we used the save() Mongoose method to insert the document into our database. This requires two actions: instantiating the object, and then saving it.

Alternatively, we can do this in one action using the Mongoose create() method.

// Create a new blog post and insert into database
const article = await Blog.create({
  title: 'Awesome Post!',
  slug: 'awesome-post',
  published: true,
  content: 'This is the best post ever',
  tags: ['featured', 'announcement'],
});

console.log(article);

This method is much better! Not only can we insert our document, but we also get returned the document along with its _id when we console log it.

Update data

Mongoose makes updating data very convenient too. Expanding on the previous example, let’s change the title of our article.

article.title = "The Most Awesomest Post!!";
await article.save();
console.log(article);

We can directly edit the local object, and then use the save() method to write the update back to the database. I don’t think it can get much easier than that!

Finding data

Let’s make sure we are updating the correct document. We’ll use a special Mongoose method, findById(), to get our document by its ObjectId.

const article = await Blog.findById("62472b6ce09e8b77266d6b1b").exec();
console.log(article);

Notice that we use the exec() Mongoose function. This is technically optional and returns a promise. In my experience, it’s better to use this function since it will prevent some head-scratching issues. If you want to read more about it, check out this note in the Mongoose docs about promises.

There are many query options in Mongoose. View the full list of queries.

Projecting document fields

Just like with the standard MongoDB Node.js driver, we can project only the fields that we need. Let’s only get the title, slug, and content fields.

const article = await Blog.findById("62472b6ce09e8b77266d6b1b", "title slug content").exec();
console.log(article);

The second parameter can be of type Object|String|Array<String> to specify which fields we would like to project. In this case, we used a String.

Deleting data

Just like in the standard MongoDB Node.js driver, we have the deleteOne() and deleteMany() methods.

const blog = await Blog.deleteOne({ author: "Jesse Hall" })
console.log(blog)

const blog = await Blog.deleteMany({ author: "Jesse Hall" })
console.log(blog)

Validation

Notice that the documents we have inserted so far have not contained an author, dates, or comments. So far, we have defined what the structure of our document should look like, but we have not defined which fields are actually required. At this point any field can be omitted.

Let’s set some required fields in our Blog.js schema.

const blogSchema = new Schema({
  title:  {
    type: String,
    required: true,
  },
  slug:  {
    type: String,
    required: true,
    lowercase: true,
  },
  published: {
    type: Boolean,
    default: false,
  },
  author: {
    type: String,
    required: true,
  },
  content: String,
  tags: [String],
  createdAt: {
    type: Date,
    default: () => Date.now(),
    immutable: true,
  },
  updatedAt: Date,
  comments: [{
    user: String,
    content: String,
    votes: Number
  }]
});

When including validation on a field, we pass an object as its value.

value: String is the same as value: {type: String}.

There are several validation methods that can be used.

We can set required to true on any fields we would like to be required.

For the slug, we want the string to always be in lowercase. For this, we can set lowercase to true. This will take the slug input and convert it to lowercase before saving the document to the database.

For our created date, we can set the default buy using an arrow function. We also want this date to be impossible to change later. We can do that by setting immutable to true.

Validators only run on the create or save methods.

Other useful methods

Mongoose uses many standard MongoDB methods plus introduces many extra helper methods that are abstracted from regular MongoDB methods. Next, we’ll go over just a few of them.

`exists()`

The exists() method returns either null or the ObjectId of a document that matches the provided query.

const blog = await Blog.exists({ author: "Jesse Hall" })
console.log(blog)

`where()`

Mongoose also has its own style of querying data. The where() method allows us to chain and build queries.

// Instead of using a standard find method
const blogFind = await Blog.findOne({ author: "Jesse Hall" });

// Use the equivalent where() method
const blogWhere = await Blog.where("author").equals("Jesse Hall");
console.log(blogWhere)

Either of these methods work. Use whichever seems more natural to you.

You can also chain multiple where() methods to include even the most complicated query.

`select()`

To include projection when using the where() method, chain the select() method after your query.

const blog = await Blog.where("author").equals("Jesse Hall").select("title author")
console.log(blog)

Multiple schemas

It's important to understand your options when modeling data.

If you’re coming from a relational database background, you’ll be used to having separate tables for all of your related data.

Generally, in MongoDB, data that is accessed together should be stored together.

You should plan this out ahead of time if possible. Nest data within the same schema when it makes sense.

If you have the need for separate schemas, Mongoose makes it a breeze.

Let’s create another schema so that we can see how multiple schemas can be used together.

We’ll create a new file, User.js, in the model folder.

import mongoose from 'mongoose';
const {Schema, model} = mongoose;

const userSchema = new Schema({
  name: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    minLength: 10,
    required: true,
    lowercase: true
  },
});

const User = model('User', userSchema);
export default User;

For the email, we are using a new property, minLength, to require a minimum character length for this string.

Now we’ll reference this new user model in our blog schema for the author and comments.user.

import mongoose from 'mongoose';
const { Schema, SchemaTypes, model } = mongoose;

const blogSchema = new Schema({
  ...,
  author: {
    type: SchemaTypes.ObjectId,
    ref: 'User',
    required: true,
  },
  ...,
  comments: [{
    user: {
      type: SchemaTypes.ObjectId,
      ref: 'User',
      required: true,
    },
    content: String,
    votes: Number
  }];
});
...

Here, we set the author and comments.user to SchemaTypes.ObjectId and added a ref, or reference, to the user model.

This will allow us to “join” our data a bit later.

And don’t forget to destructure SchemaTypes from mongoose at the top of the file.

Lastly, let’s update the index.js file. We’ll need to import our new user model, create a new user, and create a new article with the new user’s _id.

...
import User from './model/User.js';

...

const user = await User.create({
  name: 'Jesse Hall',
  email: 'jesse@email.com',
});

const article = await Blog.create({
  title: 'Awesome Post!',
  slug: 'Awesome-Post',
  author: user._id,
  content: 'This is the best post ever',
  tags: ['featured', 'announcement'],
});

console.log(article);

Notice now that there is a users collection along with the blogs collection in the MongoDB database.

You’ll now see only the user _id in the author field. So, how do we get all of the info for the author along with the article?

We can use the populate() Mongoose method.

const article = await Blog.findOne({ title: "Awesome Post!" }).populate("author");
console.log(article);

Now the data for the author is populated, or “joined,” into the article data. Mongoose actually uses the MongoDB $lookup method behind the scenes.

Middleware

In Mongoose, middleware are functions that run before and/or during the execution of asynchronous functions at the schema level.

Here’s an example. Let’s update the updated date every time an article is saved or updated. We’ll add this to our Blog.js model.

blogSchema.pre('save', function(next) {
  this.updated = Date.now(); // update the date every time a blog post is saved
  next();
});

Then in the index.js file, we’ll find an article, update the title, and then save it.

const article = await Blog.findById("6247589060c9b6abfa1ef530").exec();
article.title = "Updated Title";
await article.save();
console.log(article);

Notice that we now have an updated date!

Besides pre(), there is also a post() mongoose middleware function.

Next steps

I think our example here could use another schema for the comments. Try creating that schema and testing it by adding a few users and comments.

There are many other great Mongoose helper methods that are not covered here. Be sure to check out the official documentation for references and more examples.

Conclusion

I think it’s great that developers have many options for connecting and manipulating data in MongoDB. Whether you prefer Mongoose or the standard MongoDB drivers, in the end, it’s all about the data and what’s best for your application and use case.

I can see why Mongoose appeals to many developers and I think I’ll use it more in the future.

Thanks for reading!

Say Hello! YouTube | Twitter | Instagram

How To Pass Application Tracking Systems (ATS) & Get Interviews - Resume Tips for Software Developer

Jesse Hall - codeSTACKr — Fri, 15 Jan 2021 16:38:54 +0000

Did you know that not all resumes are created equal? Do you think that an actual person sits down and looks through every resume that gets submitted?

That's what I thought until I started to do some research.

Are you spamming your resume all over the place and not getting any responses?

Here's why: There's this thing called an Application Tracking System.

There are so many applications coming into these companies that recruiters can't keep up. So your resume is most likely getting passed through an ATS before it ever gets seen by any human.

In this article, I am going to tell you all about Application Tracking Systems and how you can get your resume past them.

What is an ATS (Application Tracking System)

Facebook, Amazon, Apple, Netflix, Google, and just about every large company uses an Application Tracking System. It's software that parses, or scrapes, your resume and helps recruiters and hiring managers to organize and manage applicants.

Sounds like a good thing.

But it also filters out what it thinks are unqualified applicants. In fact, more than 75% of applications get discarded before getting to recruiters.

And you could get filtered out even if you are qualified. Let me tell you why.

But really quick, if you don't want to worry about application tracking systems and ensure that you get an interview, check out Paper Moon and use the promo code "STACKR" to get 20% off their Resume Template Kit.

There are several different Application Tracking Systems that are used. A few of the top ones are Taleo, Workday, and Greenhouse.

The ATS parses, or scrapes, your resume and stores what it deems as relevant data in a database. That data can then be used to figure out what your qualifications, work experience, and skills are.

Ranking

Some systems even give applicants a ranking score. They attempt to compare your resume to the job description and rank how qualified it thinks you are. The recruiter will then use those rankings to make decisions on who to interview.

It uses something called Natural Language Processing to figure this out.

Keywords

Another way the data can be used is by searching for applicants based on keywords. If certain keywords are missing from your resume, your name's not going to pop up.

Also, the amount of times a keyword appears on your resume is important. Important keywords should appear on your resume 2 to 3 times. This will rank you higher for those keywords.

Of course, make sure that the placement of the keywords make sense, because once you get past the ATS your resume will be read by a human.

How do you know what keywords to use? The easiest way is by using a word cloud.

So I went to indeed.com and picked a random JavaScript posting. Then I selected all of the details and copied that.

Next, I went to a word cloud generator and I pasted in that job description.

Now you can see easily pick out the main keywords for this job posting and customize your resume to match, where applicable.

Formatting

Another issue with resumes is the way their formatted. Every resume is formatted differently. If your resume is really fancy with tables, graphs, and images, the ATS may misinterpret the information and miscategorize your data. Or worse, deem you as unqualified from a position that you are qualified for.

Headers and Footers

Application Tracking Systems cannot see information in headers and footers. So never put important information in these sections. Or just don't use them.

If you do use headers and footers, you could include images or graphics that you want humans to see. But definitely not necessary.

Dates

Dates are another issue. Again, assume that humans are not reading your resume. The system needs to understand it. So be sure to include timeframes for your job experience. Use year and month formats.

Special Characters

Special characters can also cause problems for the ATS. This can include accents. So if your name is Mathéo, it might get parsed as Mathéo.

So just avoid using special characters.

How can you ensure that you get past the system?

You need to make sure that your resume contains keywords found in the job description. As long as they align with the truth. Don't lie about anything.
Include the top keywords 2 to 3 times.

So you really need to customize, or tune, each resume to align with the job description of the position you are applying for.

This is for sure going to take more time but you will be more likely to pass the ATS.

If you use acronyms, be sure to include the long version, then the acronym in parenthesis.

Example: Search Engine Optimization (SEO)

Don't use tables or crazy graphics or fancy fonts. This could confuse the ATS.
Don't use headers and footers. That information may not get parsed correctly.
And save your resume as either a .doc or .docx if possible. That will help the parser.

ATS Checker

Now, if you want to see how your resume will do in an ATS, go to jobscan.co. You can upload your resume and the job description, then it will scan your resume and give you a score and feedback.

This is a great tool.

Guaranteed To Pass ATS

If you don't want to worry about application tracking systems and ensure that you get an interview, use the Paper Moon's CS Resume Template Kit.

The first 200 that use the promo code "STACKR" will get 20% off their Resume Bundle.

Paper Moon has proven ATS filter passing resumes. You're going to get perfectly formatted, clean resumes. Over 100 technical recruiters have recommended this company.

You'll also get access to examples of actual resumes that have landed top tech interviews to find out exactly what recruiters want to see. These have landed interviews at Google, Facebook, Netflix, Microsoft, Airbnb, Amazon, and so many more top tech companies.

You'll also get exclusive access to a recruiter contact list. This list has over 1000 technical recruiters at all of the top tech companies.

That's not it, you'll also get a Job Application Tracking Sheet, and lifetime free updates.

I think that this product is well worth the money and that's why I've partnered with Paper Moon.

So be sure to check that out.

And give me some feedback. If you receive an interview after using this product, let me know.

Watch the full video here:

If you are interested in more content like this, feel free to subscribe to my YouTube channel.

Thanks for reading!

Say Hello! YouTube | Instagram | Twitter

Microinteractions: Password Validation Animation

Jesse Hall - codeSTACKr — Sat, 13 Jun 2020 17:10:35 +0000

What is a micro-interaction?

They are small animations that let the user know something has happened or is happening. They are a great way to improve the user experience (UX) in your user interface (UI).

Today we are going to build an animation inspired by @frontendjoe, who collaborated with Miriam Isaac on Instagram to break down the password validator. Here we see a textbox next to a button, and when clicked, fills the element and reveals a validation message.

Now, they built this in Vue. We are going to recreate it using vanilla JavaScript.

Ok, so let's get started.

HTML

The HTML is pretty simple:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Micro Interaction Password Input</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <input type="password" id="password" />
      <button class="eye">
        <i id="openEye" class="far fa-eye hide"></i>
        <i id="closeEye" class="far fa-eye-slash"></i>
      </button>
      <button class="action" data-content="">
        <i id="arrow" class="fas fa-arrow-right"></i>
        <i id="check" class="fas fa-check hide"></i>
        <i id="times" class="fas fa-times hide"></i>
      </button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

CSS

The CSS is where a lot of the magic happens. We are going to use custom properties (variables) to change the scale, opacity, and color of various elements. The main reason for this is so that we can manipulate the pseudo elements in JavaScript. Since these are not technically part of the DOM, we cannot select them directly in JavaScript.

:root {
  --scale: scaleX(0);
  --opacity: 0;
  --color: #0069df;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
  font-size: 2rem;
  background-color: #e2f1ff;
}

button,
button:active,
button:focus {
  border: none;
  outline: none;
  font-size: inherit;
}

.wrapper {
  position: relative;
  border: 2px solid var(--color);
  border-radius: 10px;
  padding-left: 10px;
  box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.3);
  transition: border-color 0.75s;
}

input {
  display: inline;
  font-size: inherit;
  border: none;
  outline: none;
  background-color: transparent;
}

.eye {
  display: inline-block;
  background-color: transparent;
  padding: 5px;
  width: 50px;
  cursor: pointer;
}

.action {
  display: inline-block;
  padding: 20px;
  width: 100px;
  background: var(--color);
  color: white;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  transition: background 0.75s;
}
.action::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: inherit;
  border-radius: 5px 0 0 5px;
  width: calc(100% - 99px);
  height: 100%;
  transform: var(--scale);
  transform-origin: right;
  transition: transform 0.75s;
}
.action::after {
  content: attr(data-content);
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  line-height: 4.5rem;
  width: 100%;
  height: 100%;
  transform: var(--scale);
  opacity: var(--opacity);
  transition: opacity 1s;
}

.hide {
  position: absolute;
  opacity: 0;
}

JavaScript

For the JavaScript, we will select all of the DOM elements that we will interact with. Then we will use the root documentElement to change our custom properties in CSS. This will allow us to animate the pseudo elements along with changing the color of all of the elements based on the password validation.

The password validation in this example is simply checking to see if the password is equal to "password". If it is false then the color is changed to red, the icon is changed to "X", and the message displayed is "Invalid Password". If it is true then the color is changed to green, the icon is chaned to "check mark", and the message displayed is "Welcome Back".

We also implement the ability to reveal the password entered by toggling the input from a type of "password" to a type of "text".

We keep track of the states of the application by using variables.

const action = document.querySelector(".action");
const eye = document.querySelector(".eye");
let open = false;
let showPwd = false;

action.addEventListener("click", () => {
  const root = document.documentElement;
  const arrow = document.getElementById("arrow");
  const check = document.getElementById("check");
  const times = document.getElementById("times");
  const password = document.getElementById("password");

  arrow.classList.add("hide");
  check.classList.add("hide");
  times.classList.add("hide");

  if (open) {
    root.style.setProperty("--color", "#0069df"); // blue
    root.style.setProperty("--scale", "scaleX(0)");
    root.style.setProperty("--opacity", 0);
    arrow.classList.remove("hide");
  } else {
    if (password.value === "password") {
      action.dataset.content = "Welcome Back";
      root.style.setProperty("--color", "#00b692"); // green
      check.classList.remove("hide");
    } else {
      action.dataset.content = "Invalid Password";
      root.style.setProperty("--color", "#fa394e"); // red
      times.classList.remove("hide");
    }
    root.style.setProperty("--scale", "scaleX(1)");
    root.style.setProperty("--opacity", 1);
  }
  open = !open;
});

eye.addEventListener("click", () => {
  const password = document.getElementById("password");
  const openEye = document.getElementById("openEye");
  const closeEye = document.getElementById("closeEye");

  openEye.classList.toggle("hide");
  closeEye.classList.toggle("hide");

  if (showPwd) {
    password.setAttribute("type", "password");
  } else {
    password.setAttribute("type", "text");
  }

  showPwd = !showPwd;
});

Watch the full video here:

If you are interested in more content like this, feel free to subscribe to my YouTube channel.

Thanks for reading!

Say Hello! YouTube | Instagram | Twitter