The foundation of this project is built on high-performance technologies. On the backend, the course uses Go (Golang) paired with the lightning-fast Gin-Gonic framework to create a robust and efficient Web API. This combination is fantastic for handling concurrent requests, making the application quick and reliable. For the frontend, you'll be building a responsive and engaging user interface using React. All your data, from user profiles to movie details, will be stored in MongoDB, offering flexible and scalable data management. This combination of Go, React, and MongoDB provides a well-rounded and impressive skillset for any full-stack developer.

You'll learn to connect your Go backend directly to OpenAI’s models using the power of the LangChainGo library. This connection allows you to build a genuine, intelligent service that can analyze data and provide personalized movie suggestions. Also, you'll implement secure user authentication, including registration, login, and access token validation via middleware. Security is a priority, so the course even covers the best practice of storing access tokens in http-only cookies to prevent Cross-Site Scripting (XSS) attacks.

Once the core features are built and working, you’ll will learn to deploy the applicaiton. You’ll get hands-on experience taking your database live by deploying MongoDB to Atlas, hosting your Go/Gin-Gonic API on Render, and deploying the React client to Vercel.

Watch the full course on the freeCodeCamp.org YouTube channel (15-hour watch).

We just posted a course on the freeCodeCamp.org YouTube channel that will teach you how to build applications that are truly secure from the ground up using PHP, Symfony, and MongoDB.

I developed this course. I will teach you how to build a system where data is protected not just at rest and in transit, but also while it's in use.

Throughout this comprehensive, step-by-step tutorial, you will build a fully functional personal finance application. The application will allow users to create accounts, log transactions, and view their financial information.

The core of this course focuses on solving a major challenge in application security which is how to perform queries on encrypted data. You'll learn how to find a user by their social security number or search for transactions within a specific amount range, all without ever decrypting the information on the database server.

I use MongoDB's Queryable Encryption to encrypt sensitive data on the client-side. This data is then stored as fully randomized encrypted fields in the database, yet you can still run equality and range-check queries on it. The server never has access to the unencrypted data or the encryption keys, keeping the data secure throughout its entire life cycle.

This tutorial is designed for developers who have some experience with PHP and a framework like Symfony or Laravel, but even if you're new to these technologies, you should be able to follow along.

Watch the full course now on the freeCodeCamp.org YouTube channel (1-hour watch).

We just published a new course on the freeCodeCamp.org YouTube channel that will teach you how to build a smart AI shopping assistant from the ground up.

This comprehensive course, created by Ania Kubow, goes beyond typical chatbot tutorials. You will create a powerful AI agent that thinks and acts like a real sales associate, capable of making its own decisions to help customers.

This AI agent can:

• Autonomously decide when to search a database versus when to respond directly.

• Use custom tools to search through real product information.

• Remember past parts of the conversation.

• Take multi-step actions to perceive, plan, act, and respond to a customer.

Throughout the course, you will work with modern, cutting-edge technologies. You'll use LangGraph for agent orchestration, MongoDB Atlas for vector search and memory, and Google's Gemini to power the AI's brain. Ania explains everything step-by-step, so you don't need to be an expert in these tools to get started.

By the time you finish, you will have built a complete project with three parts: a Node.js backend, a MongoDB database with AI-generated product data, and a user-friendly React frontend.

Watch the full course on the freeCodeCamp.org YouTube channel (2-hour watch).

In Go, the official MongoDB driver provides a robust way to connect to and interact with MongoDB, a flexible NoSQL database that stores data in JSON-like documents.

In this tutorial, you won't just learn how to connect Go to MongoDB. You'll take it a step further by building a simple blog application. Along the way, you'll learn how to perform essential CRUD (Create, Read, Update, Delete) operations and display your results using the Gin web framework.

Table of Contents

• Prerequisites

• Create a New Go Project

• Basic MongoDB Operations

  • Insert data into the collection

  • Find documents in MongoDB

  • Update documents in MongoDB

  • Delete documents in MongoDB

• How to Build a Blog App with go-mongodb-driver and Gin

  • Initialize the Gin application

  • Create the HTML templates

  • Create the handlers

  • Run the application

• That's How to Use MongoDB with Go

Prerequisites

Before you proceed, ensure that you have the following:

• Basic knowledge of Go and its concepts

• Go (version 1.24 or higher) installed

• MongoDB Installed (running locally on port 27017)

• Basic knowledge of NoSQL

Create a New Go Project

First, create a new Go project, change into the new project directory, and initialize a new Go module by running the following commands:

mkdir go-mongodb-integration
cd go-mongodb-integrationgo 
mod init go-mongodb

Next, install the MongoDB Go driver by running the following command:

go get go.mongodb.org/mongo-driver/mongo
go get go.mongodb.org/mongo-driver/bson

The standard Go library includes the database/sql package for working with SQL databases, but it doesn't support MongoDB out of the box. To work with MongoDB in Go, you’ll use the official MongoDB driver, which provides everything you need to connect to and interact with a MongoDB database.

With the basic setup complete, let’s now examine basic operations in MongoDB.

Basic MongoDB Operations

In MongoDB, databases and collections are created automatically upon the first data insertion, adopting a "lazy creation" approach. Specifically, a database is created when you insert your first document, and a collection is likewise created when data is first inserted into it.

It's important to note that functions like client.Database() and db.Collection() only generate references to these structures – they don’t create the actual database or collection until data is inserted.

Insert data into the collection

Let’s walk through how to insert a document into a collection in MongoDB.

First, open your project in a code editor, create a main.go file, and add the following code:

package main

import (
    "context"
    "log"
    "time"

    "go.mongodb.org/mongo-driver/bson/primitive"
    "go.mongodb.org/mongo-driver/mongo"
    "go.mongodb.org/mongo-driver/mongo/options"
)

type User struct {
    ID   primitive.ObjectID `bson:"_id,omitempty"`
    Name string             `bson:"name"`
    Age  int                `bson:"age"`
}

func main() {
    clientOptions := options.Client().ApplyURI("mongodb://localhost:27017")

    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    client, err := mongo.Connect(ctx, clientOptions)
    if err != nil {
        log.Fatal(err)
    }
    defer client.Disconnect(ctx)

    err = client.Ping(ctx, nil)
    if err != nil {
        log.Fatal(err)
    }

    db := client.Database("test_db")
    usersCollection := db.Collection("users")

    newUser := User{
        Name: "John Doe",
        Age:  30,
    }

    result, err := usersCollection.InsertOne(ctx, newUser)
    if err != nil {
        log.Fatal(err)
    }

    log.Printf("Inserted user with ID: %v\n", result.InsertedID)
}

In the code above, you define a User struct that represents your document structure, then insert a new user document into the collection using the InsertOne method. When you run this insert operation, MongoDB automatically creates both the test_db database and the users collection if they don’t already exist.

Execute the code by running:

go run main.go

You should see the response below, indicating that a user was inserted successfully.

Find documents in MongoDB

Now that you've inserted some data, it's time to query the database and retrieve documents.

Update your main.go file with the following code:

package main

import (
    "context"
    "fmt"
    "log"
    "time"

    "go.mongodb.org/mongo-driver/bson"
    "go.mongodb.org/mongo-driver/bson/primitive"
    "go.mongodb.org/mongo-driver/mongo"
    "go.mongodb.org/mongo-driver/mongo/options"
)

type User struct {
    ID   primitive.ObjectID `bson:"_id,omitempty"`
    Name string             `bson:"name"`
    Age  int                `bson:"age"`
}

func main() {
    clientOptions := options.Client().ApplyURI("mongodb://localhost:27017")

    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    client, err := mongo.Connect(ctx, clientOptions)
    if err != nil {
        log.Fatal(err)
    }
    defer client.Disconnect(ctx)

    db := client.Database("test_db")
    usersCollection := db.Collection("users")

    cursor, err := usersCollection.Find(ctx, bson.M{})
    if err != nil {
        log.Fatal(err)
    }
    defer cursor.Close(ctx)

    var users []User
    if err = cursor.All(ctx, &users); err != nil {
        log.Fatal(err)
    }

    for _, user := range users {
        fmt.Printf("User: %s, Age: %d, ID: %s\n", user.Name, user.Age, user.ID.Hex())
    }
}

In the code above, you use the Find method with an empty filter (`bson.M{}`) to retrieve all documents from the users collection. Then, you use cursor.All to decode all the results into a slice of User structs.

Each document is printed to the terminal, showing the name, age, and ID of every user in the collection.

To run the code, use:

go run main.go

You should see the response below in your terminal.

Update documents in MongoDB

To update a document in your collection, modify your main.go file as shown below:

package main

import (
    "context"
    "log"
    "time"

    "go.mongodb.org/mongo-driver/bson"
    "go.mongodb.org/mongo-driver/bson/primitive"
    "go.mongodb.org/mongo-driver/mongo"
    "go.mongodb.org/mongo-driver/mongo/options"
)

type User struct {
    ID   primitive.ObjectID `bson:"_id,omitempty"`
    Name string             `bson:"name"`
    Age  int                `bson:"age"`
}

func main() {
    clientOptions := options.Client().ApplyURI("mongodb://localhost:27017")
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    client, err := mongo.Connect(ctx, clientOptions)
    if err != nil {
        log.Fatal(err)
    }
    defer client.Disconnect(ctx)

    db := client.Database("test_db")
    usersCollection := db.Collection("users")

    var userToUpdate User
    err = usersCollection.FindOne(ctx, bson.M{"name": "John Doe"}).Decode(&userToUpdate)
    if err != nil {
        log.Println("No user found to update")
    } else {
        update := bson.M{
            "$set": bson.M{
                "name": "Jane Doe",
                "age":  25,
            },
        }
        result, err := usersCollection.UpdateOne(
            ctx,
            bson.M{"_id": userToUpdate.ID},
            update,
        )
        if err != nil {
            log.Fatal(err)
        }
        log.Printf("Updated %v document(s)\n", result.ModifiedCount)
    }
}

In the code above, you first search for a user named "John Doe" using the FindOne method. If a match is found, you use the UpdateOne method to update their name and age. The $set operator ensures that only the specified fields are updated, leaving the rest of the document unchanged.

Execute the code by running:

go run main.go

You should see output in your terminal indicating how many documents were updated.

Delete documents in MongoDB

To remove documents from a collection, you can use the DeleteOne method. Update your main.go file with the following code:

package main

import (
    "context"
    "log"
    "time"

    "go.mongodb.org/mongo-driver/bson"
    "go.mongodb.org/mongo-driver/bson/primitive"
    "go.mongodb.org/mongo-driver/mongo"
    "go.mongodb.org/mongo-driver/mongo/options"
)

type User struct {
    ID   primitive.ObjectID `bson:"_id,omitempty"`
    Name string             `bson:"name"`
    Age  int                `bson:"age"`
}

func main() {
    clientOptions := options.Client().ApplyURI("mongodb://localhost:27017")
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    client, err := mongo.Connect(ctx, clientOptions)
    if err != nil {
        log.Fatal(err)
    }
    defer client.Disconnect(ctx)

    db := client.Database("test_db")
    usersCollection := db.Collection("users")

    result, err := usersCollection.DeleteOne(ctx, bson.M{"name": "Jane Doe"})
    if err != nil {
        log.Fatal(err)
    }
    log.Printf("Deleted %v document(s)\n", result.DeletedCount)
}

In the code above, you use the DeleteOne method to remove the first document that matches the filter { "name": "Jane Doe" }.

You should see the result below in your terminal.

How to Build a Blog App with go-mongodb-driver and Gin

Now that you understand how to perform basic CRUD operations with MongoDB in Go, you're ready to build a more complete application.

Start by creating a new directory for your project and initializing it as a Go module. Navigate to your chosen directory and run:

mkdir go-blog
cd go-blog
go mod init blog

Next, install the required dependencies:

go get github.com/gin-gonic/gin
go get go.mongodb.org/mongo-driver/mongo
go get go.mongodb.org/mongo-driver/bson

Your project will have the following structure:

go-blog/  
├── main.go  
├── handlers/  
│   └── main.go  
└── templates/  
    ├── index.html  
    ├── post.html  
    ├── create.html  
    └── edit.html

Initialize the Gin application

To initialize a new Gin application, create a new main.go file and add the below code snippet to it:

package main

import (
    "context"
    "log"
    "time"

    "blog/handlers"

    "github.com/gin-gonic/gin"
    "go.mongodb.org/mongo-driver/mongo"
    "go.mongodb.org/mongo-driver/mongo/options"
)

func main() {
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    clientOptions := options.Client().ApplyURI("mongodb://localhost:27017")
    client, err := mongo.Connect(ctx, clientOptions)
    if err != nil {
        log.Fatal(err)
    }
    defer client.Disconnect(ctx)

    err = client.Ping(ctx, nil)
    if err != nil {
        log.Fatal(err)
    }
    log.Println("Connected to MongoDB!")

    db := client.Database("blog_db")
    h := handlers.NewHandler(db)

    router := gin.Default()
    router.LoadHTMLGlob("templates/*")

    router.GET("/", h.HomePage)
    router.GET("/post/:id", h.ViewPost)
    router.GET("/create", h.CreatePost)
    router.GET("/edit/:id", h.EditPost)
    router.POST("/save", h.SavePost)
    router.GET("/delete/:id", h.DeletePost)

    log.Println("Server starting on :8080...")
    router.Run(":8080")
}

The code above sets up the MongoDB connection, initializes the Gin router, and registers your routes.

Create the HTML templates

Now, create the HTML templates for displaying the blog UI.

First, create a templates directory and add the following files:

index.html:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Go Blog with MongoDB</title>  
    <script src="https://cdn.tailwindcss.com"></script>  
</head>  
<body class="bg-gray-100 min-h-screen">  
    <div class="container mx-auto px-4 py-8">  
        <header class="mb-8">  
            <h1 class="text-3xl font-bold text-center text-blue-600">Go Blog with MongoDB</h1>  
            <div class="flex justify-center mt-4">  
                <a href="/create" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Create New Post</a>  
            </div>  
        </header>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">  
            {{range .}}  
            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">  
                <div class="p-6">  
                    <h2 class="text-xl font-semibold mb-2 text-gray-800">{{.Title}}</h2>  
                    <p class="text-gray-600 mb-4 line-clamp-3">  
                        {{if gt (len .Content) 150}}  
                            {{slice .Content 0 150}}...  
                        {{else}}  
                            {{.Content}}  
                        {{end}}  
                    </p>  
                    <div class="flex justify-between items-center text-sm text-gray-500">  
                        <span>{{.CreatedAt.Format "Jan 02, 2006"}}</span>  
                        <a href="/post/{{.ID.Hex}}" class="text-blue-500 hover:text-blue-700">Read More</a>  
                    </div>  
                </div>  
                <div class="flex border-t border-gray-200">  
                    <a href="/edit/{{.ID.Hex}}" class="w-1/2 py-2 text-center text-sm text-gray-600 hover:bg-gray-100 border-r border-gray-200">Edit</a>  
                    <a href="/delete/{{.ID.Hex}}" class="w-1/2 py-2 text-center text-sm text-red-600 hover:bg-gray-100" onclick="return confirm('Are you sure you want to delete this post?')">Delete</a>  
                </div>  
            </div>  
            {{else}}  
            <div class="col-span-3 text-center py-12">  
                <p class="text-gray-600 text-lg">No posts yet. <a href="/create" class="text-blue-500 hover:underline">Create one</a>!</p>  
            </div>  
            {{end}}  
        </div>  
    </div>  
</body>  
</html>

This template lists all blog posts and includes buttons to create, edit, or delete posts.

post.html:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>{{.Title}} | Go Blog with MongoDB</title>  
    <script src="https://cdn.tailwindcss.com"></script>  
</head>  
<body class="bg-gray-100 min-h-screen">  
    <div class="container mx-auto px-4 py-8">  
        <header class="mb-8">  
            <h1 class="text-3xl font-bold text-center text-blue-600">Go Blog with MongoDB</h1>  
            <div class="flex justify-center mt-4">  
                <a href="/" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Back to Home</a>  
            </div>  
        </header>

        <div class="max-w-3xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">  
            <div class="p-6">  
                <h2 class="text-2xl font-bold mb-4 text-gray-800">{{.Title}}</h2>  

                <div class="flex items-center text-sm text-gray-500 mb-6">  
                    <span>Posted: {{.CreatedAt.Format "Jan 02, 2006"}}</span>  
                    {{if ne .CreatedAt .UpdatedAt}}  
                    <span class="mx-2">•</span>  
                    <span>Updated: {{.UpdatedAt.Format "Jan 02, 2006"}}</span>  
                    {{end}}  
                </div>  

                <div class="prose max-w-none">  
                    <p class="text-gray-700 whitespace-pre-line">{{.Content}}</p>  
                </div>  
            </div>  

            <div class="flex border-t border-gray-200">  
                <a href="/edit/{{.ID.Hex}}" class="w-1/2 py-3 text-center text-blue-600 hover:bg-gray-100 border-r border-gray-200">Edit Post</a>  
                <a href="/delete/{{.ID.Hex}}" class="w-1/2 py-3 text-center text-red-600 hover:bg-gray-100" onclick="return confirm('Are you sure you want to delete this post?')">Delete Post</a>  
            </div>  
        </div>  
    </div>  
</body>  
</html>

This template displays a single post.

create.html:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Create New Post | Go Blog with MongoDB</title>  
    <script src="https://cdn.tailwindcss.com"></script>  
</head>  
<body class="bg-gray-100 min-h-screen">  
    <div class="container mx-auto px-4 py-8">  
        <header class="mb-8">  
            <h1 class="text-3xl font-bold text-center text-blue-600">Go Blog with MongoDB</h1>  
            <div class="flex justify-center mt-4">  
                <a href="/" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Back to Home</a>  
            </div>  
        </header>

        <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">  
            <div class="p-6">  
                <h2 class="text-2xl font-bold mb-6 text-gray-800">Create New Post</h2>  

                <form action="/save" method="POST">  
                    <div class="mb-4">  
                        <label for="title" class="block text-gray-700 font-medium mb-2">Title</label>  
                        <input type="text" id="title" name="title" required  
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">  
                    </div>  

                    <div class="mb-6">  
                        <label for="content" class="block text-gray-700 font-medium mb-2">Content</label>  
                        <textarea id="content" name="content" rows="10" required  
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>  
                    </div>  

                    <div class="flex justify-end">  
                        <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-md">  
                            Save Post  
                        </button>  
                    </div>  
                </form>  
            </div>  
        </div>  
    </div>  
</body>  
</html>

This template allows you to create a new post.

edit.html:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Edit Post | Go Blog with MongoDB</title>  
    <script src="https://cdn.tailwindcss.com"></script>  
</head>  
<body class="bg-gray-100 min-h-screen">  
    <div class="container mx-auto px-4 py-8">  
        <header class="mb-8">  
            <h1 class="text-3xl font-bold text-center text-blue-600">Go Blog with MongoDB</h1>  
            <div class="flex justify-center mt-4">  
                <a href="/" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Back to Home</a>  
            </div>  
        </header>

        <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md overflow-hidden">  
            <div class="p-6">  
                <h2 class="text-2xl font-bold mb-6 text-gray-800">Edit Post</h2>  

                <form action="/save" method="POST">  
                    <input type="hidden" name="id" value="{{.ID.Hex}}">  

                    <div class="mb-4">  
                        <label for="title" class="block text-gray-700 font-medium mb-2">Title</label>  
                        <input type="text" id="title" name="title" value="{{.Title}}" required  
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">  
                    </div>  

                    <div class="mb-6">  
                        <label for="content" class="block text-gray-700 font-medium mb-2">Content</label>  
                        <textarea id="content" name="content" rows="10" required  
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">{{.Content}}</textarea>  
                    </div>  

                    <div class="flex justify-between">  
                        <a href="/post/{{.ID.Hex}}" class="text-gray-600 hover:text-gray-800">Cancel</a>  
                        <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-md">  
                            Update Post  
                        </button>  
                    </div>  
                </form>  
            </div>  
        </div>  
    </div>  
</body>  
</html>

This template is used to edit a post.

Create the handlers

Next, set up the handlers to connect with MongoDB and render the templates. Create a new folder called handlers in your project's root directory, then add a main.go file inside it and insert the following code snippet:

package handlers

import (
    "context"
    "log"
    "net/http"
    "time"

    "github.com/gin-gonic/gin"
    "go.mongodb.org/mongo-driver/bson"
    "go.mongodb.org/mongo-driver/bson/primitive"
    "go.mongodb.org/mongo-driver/mongo"
)

type Post struct {
    ID        primitive.ObjectID `bson:"_id,omitempty" json:"id"`
    Title     string             `bson:"title" json:"title"`
    Content   string             `bson:"content" json:"content"`
    CreatedAt time.Time          `bson:"created_at" json:"created_at"`
    UpdatedAt time.Time          `bson:"updated_at" json:"updated_at"`
}

type Handler struct {
    db         *mongo.Database
    collection *mongo.Collection
}

func NewHandler(db *mongo.Database) *Handler {
    return &Handler{
        db:         db,
        collection: db.Collection("posts"),
    }
}

func (h *Handler) HomePage(c *gin.Context) {
    ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
    defer cancel()

    cursor, err := h.collection.Find(ctx, bson.M{})
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
        return
    }
    defer cursor.Close(ctx)

    var posts []Post
    if err = cursor.All(ctx, &posts); err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
        return
    }

    c.HTML(http.StatusOK, "index.html", posts)
}

func (h *Handler) ViewPost(c *gin.Context) {
    id := c.Param("id")
    objID, err := primitive.ObjectIDFromHex(id)
    if err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid post ID"})
        return
    }

    ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
    defer cancel()

    var post Post
    err = h.collection.FindOne(ctx, bson.M{"_id": objID}).Decode(&post)
    if err != nil {
        c.JSON(http.StatusNotFound, gin.H{"error": "Post not found"})
        return
    }

    c.HTML(http.StatusOK, "post.html", post)
}

func (h *Handler) CreatePost(c *gin.Context) {
    c.HTML(http.StatusOK, "create.html", nil)
}

func (h *Handler) EditPost(c *gin.Context) {
    id := c.Param("id")
    objID, err := primitive.ObjectIDFromHex(id)
    if err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid post ID"})
        return
    }

    ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
    defer cancel()

    var post Post
    err = h.collection.FindOne(ctx, bson.M{"_id": objID}).Decode(&post)
    if err != nil {
        c.JSON(http.StatusNotFound, gin.H{"error": "Post not found"})
        return
    }

    c.HTML(http.StatusOK, "edit.html", post)
}

func (h *Handler) SavePost(c *gin.Context) {
    ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
    defer cancel()

    id := c.PostForm("id")
    title := c.PostForm("title")
    content := c.PostForm("content")

    now := time.Now()

    if id == "" {
        post := Post{
            Title:     title,
            Content:   content,
            CreatedAt: now,
            UpdatedAt: now,
        }

        result, err := h.collection.InsertOne(ctx, post)
        if err != nil {
            c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
            return
        }

        log.Printf("Created post with ID: %v\n", result.InsertedID)
    } else {
        objID, err := primitive.ObjectIDFromHex(id)
        if err != nil {
            c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid post ID"})
            return
        }

        update := bson.M{
            "$set": bson.M{
                "title":      title,
                "content":    content,
                "updated_at": now,
            },
        }

        result, err := h.collection.UpdateOne(ctx, bson.M{"_id": objID}, update)
        if err != nil {
            c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
            return
        }

        log.Printf("Updated post with ID: %s (Modified %d documents)\n", id, result.ModifiedCount)
    }

    c.Redirect(http.StatusSeeOther, "/")
}

func (h *Handler) DeletePost(c *gin.Context) {
    id := c.Param("id")
    objID, err := primitive.ObjectIDFromHex(id)
    if err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid post ID"})
        return
    }

    ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
    defer cancel()

    result, err := h.collection.DeleteOne(ctx, bson.M{"_id": objID})
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
        return
    }

    log.Printf("Deleted %d document(s) with ID: %s\n", result.DeletedCount, id)
    c.Redirect(http.StatusSeeOther, "/")
}

The code above contains all the logic for managing blog posts. Here's what each component does:

• Post struct: Defines the structure of a blog post document with fields for ID, title, content, and timestamps. The bson tags specify how fields are stored in MongoDB, while json tags handle JSON serialization.

• Handler struct: Contains a reference to the MongoDB database and the posts collection, providing a centralized way to access the database throughout your handlers.

• NewHandler function: Creates and initializes a new handler instance with the database connection and sets up the posts collection reference.

• HomePage: Retrieves all blog posts from the database using Find() with an empty filter and renders them using the index.html template.

• ViewPost: Fetches a single post by its ObjectID using FindOne() and displays it with the post.html template.

• CreatePost & EditPost: Render the respective forms for creating new posts or editing existing ones.

• SavePost: Handles both creating new posts and updating existing ones. It checks if an ID is provided. If not, it creates a new post using InsertOne(). Otherwise, it updates the existing post using UpdateOne() with MongoDB's $set operator.

• DeletePost: Removes a post from the database using DeleteOne() and redirects back to the homepage.

Run the application

With everything set up, you can now launch your blog. Open your terminal and run:

go mod tidy && go run main.go

Then, visit http://localhost:8080 in your browser to see your blog in action.

That's How to Use MongoDB with Go

In this tutorial, you built a simple blog application using Go and MongoDB. You learned how to connect to a MongoDB database using the official Go driver, perform CRUD operations, and render your results with the Gin web framework.

MongoDB’s flexible, document-based structure makes it a great fit for applications where data models need to evolve over time. It allows you to iterate quickly and adapt as your app grows.

As you expand this project, consider adding features such as user authentication, tagging or categorization, comments, pagination, or search functionality to enhance the user experience.

Cheers to building more with Go and MongoDB!

I created this course myself. I’ll teach you how to code a feature-rich Instagram clone from the ground up, leveraging the power of the Laravel framework and the flexibility of the MongoDB database.

Why Build an Instagram Clone?

Building a clone of a popular application like Instagram forces you to tackle real-world challenges: managing user accounts, handling media uploads, implementing social interactions like likes and comments, and structuring data efficiently. Completing such a project demonstrates a strong grasp of full-stack development principles and provides tangible proof of your abilities to potential employers or clients.

The Tech Stack

This tutorial pairs Laravel, a leading PHP framework, with MongoDB, a popular NoSQL database. This combination forms a very versatile technology stack for modern web development. It offers exceptional flexibility, scalability, and developer experience.

• Laravel: Laravel provides a robust structure for building web applications. It follows the Model-View-Controller (MVC) architectural pattern, promoting clean, organized, and maintainable code. Laravel significantly simplifies common web development tasks such as routing (directing web requests), authentication (handling user login and registration), and interacting with databases through its powerful Object-Relational Mapper (ORM), Eloquent.

• MongoDB: Unlike traditional SQL databases that use tables and predefined schemas, MongoDB is a document database. It stores data in flexible, JSON-like documents, making it incredibly adaptable. This is ideal for applications where data structures might evolve over time. MongoDB's schema-less nature allows you to easily add new fields (like adding a 'username' or 'bio' to a user profile after initial creation, as demonstrated in the tutorial) without complex database migrations.

Combining Laravel's structured development approach with MongoDB's flexible data storage provides the best of both worlds, especially for applications like an Instagram clone that manage diverse content types (profiles, posts, images, comments, likes) and their intricate relationships.

Key Concepts and Features

Throughout the tutorial, you will gain hands-on experience with:

1. Full-Stack Integration: Learn how the frontend (what the user sees and interacts with) and the backend (server-side logic and database) work together seamlessly.

2. Laravel Fundamentals: Master core Laravel concepts including the MVC pattern, defining routes (web.php), creating controllers to handle logic, building Eloquent models to interact with the database, and crafting user interfaces with the Blade templating engine.

3. MongoDB with Laravel: Discover how to configure Laravel to work with MongoDB, install necessary drivers and packages (like mongodb/laravel-mongodb), and utilize Eloquent models specifically adapted for MongoDB collections and documents. You'll learn how relationships (like a user having many posts, or a post having many comments) are handled in a NoSQL context within Laravel.

4. User Authentication & Profiles: Implement secure user registration and login functionality using Laravel's built-in features. Build user profiles, allowing users to update their information (name, username, bio) and upload profile pictures.

5. Core Social Features: Develop the essential functionalities of a social platform: creating posts with images and captions, displaying a feed of posts, implementing a like/unlike system, and adding/deleting comments on posts.

6. Image Handling: Learn how to manage file uploads, specifically storing user-uploaded images (for posts and profiles) using Laravel's file storage system, initially locally and understanding how to potentially extend this to cloud storage like AWS S3.

7. Database Management with MongoDB Atlas: Go beyond local development by learning how to set up a free cloud database cluster on MongoDB Atlas, configure security (users and network access), and connect your Laravel application to this cloud database – a crucial skill for deploying real-world applications.

8. Frontend Styling: Utilize Bootstrap 5 (via CDN) to style the application, creating a clean and responsive user interface that mimics the look and feel of Instagram.

Prerequisites

To get the most out of this tutorial, you should have a foundational understanding of:

• PHP basics

• Web fundamentals (HTML, CSS, basic JavaScript, HTTP concepts)

• Command-line usage

• You'll also need PHP, Composer (PHP package manager), and MongoDB installed on your local machine. The tutorial briefly covers installation pointers for different operating systems.

Ready to build your own Instagram clone and significantly boost your web development expertise? Watch the full course on the freeCodeCamp.org YouTube channel (1-hour watch).

Before diving into this article, I recommend that you have a foundational understanding of HTML, CSS, and JavaScript, as well as some knowledge of frontend and backend frameworks and libraries.

My primary focus will be on functionality, allowing you to customize the design as you see fit. The commands I’ll use here are tailored for Windows, so if you're using Linux, macOS, or Ubuntu, you may need to adjust them accordingly.

By the end of this guide, you'll have a fully functional To-Do app up and running on your system.

Table of Contents

• Introduction to the MERN Stack

• How to Set Up Your Development environment

  • Install Node.js and npm - Node Package Manager

• How to Set Up a New MERN Project

  • Frontend Setup

  • Build the To-Do App UI

  • Displaying your tasks in the UI

  • Give Your App Customized Styling

  • Backend Setup

  • Set Up MongoDB Atlas

  • Run the Application

• Conclusion

Introduction to the MERN Stack

The MERN stack is a popular JavaScript stack for building modern web applications. It consists of:

• MongoDB: A NoSQL database for storing data.

• Express.js: A backend framework for building APIs.

• React (UI library) + Vite (build tool) + TypeScript (typed JavaScript): A modern frontend stack for building scalable and maintainable user interfaces.

• Node.js: A runtime environment for executing JavaScript on the server.

How to Set Up Your Development environment

Install Node.js and npm (Node Package Manager)

Instead of installing Node.js and npm in your project folder, I advise you to install them in your system's root directory so that you can use them in any project, not just this one.

First, download and install Node.js (which includes npm) from the official website if you don’t have it already.

After installation, open your command line (I am using Git Bash) and verify the installation by running the following commands:

node -v
npm -v

You should see the installed versions of Node.js and npm if correctly installed.

How to Set Up a New MERN Project

Create a project folder and open your code editor by running these commands:

mkdir mern-todo-app
cd mern-todo-app
code .

The command code . automatically opens VS Code. If it doesn’t, open VS Code manually and navigate to your mern-todo-app folder.

Frontend Setup

Set Up Vite with React and TypeScript

Make sure you are in your project root directory (mern-todo-app), then run the following command:

npm create vite@latest frontend --template react-ts

This command will create a TypeScript-based React frontend inside the frontend folder within your mern-todo-app directory.

Install Axios for Making API Requests

Axios is a popular JavaScript library used to make HTTP requests from the frontend to a backend API. It simplifies sending GET, POST, PUT, and DELETE requests and handling responses.

To install Axios, run the following command:

cd frontend
npm install axios

Build the To-Do App UI

Inside the src folder, create an App.tsx file if it doesn’t already exist, and add the below code. It’s a lot, but don’t worry – I’ll break it down bit by bit afterwards:

frontend/src/App.tsx:

// BLOCK 1: Importing Dependencies
import React, { useState, useEffect } from "react";
import axios from "axios";
import TodoList from "./components/TodoList.tsx";
import "./App.css";

// BLOCK 2: Defining Task Interface
interface Task {
  _id: string;
  title: string;
  completed: boolean;
}

// BLOCK 3: Setting Up State Variables
const App: React.FC = () => {
  // State for tasks, new task text, and editing controls
  const [tasks, setTasks] = useState<Task[]>([]);
  const [task, setTask] = useState<string>("");
  const [editingTaskId, setEditingTaskId] = useState<string | null>(null);
  const [editingTitle, setEditingTitle] = useState<string>("");

  // BLOCK 4: Fetch tasks from the backend on component mount
  useEffect(() => {
    const fetchTasks = async () => {
      try {
        const response = await axios.get<Task[]>(`http://localhost:5000/api/tasks`);
        console.log("Fetched tasks:", response.data); // Debugging log
        setTasks(response.data);
      } catch (error) {
        console.error("Error fetching tasks:", error);
      }
    };
    fetchTasks();
  }, []);

  // BLOCK 5: Adding a Task
  const addTask = async () => {
    if (!task) return;

    try {
      console.log("Adding task:", task); // Debugging log
      const response = await axios.post<Task>(
        `http://localhost:5000/api/tasks`,
        { title: task },
        { headers: { "Content-Type": "application/json" } }
      );
      console.log("Task added response:", response.data);
      setTasks([...tasks, response.data]);
      setTask("");
    } catch (error) {
      console.error("Error adding task:", error);
    }
  };

  // BLOCK 6: Delete a task
  const deleteTask = async (id: string) => {
    try {
      await axios.delete(`http://localhost:5000/api/tasks/${id}`);
      setTasks(tasks.filter((t) => t._id !== id));
    } catch (error) {
      console.error("Error deleting task:", error);
    }
  };

  // BLOCK 7: Updating a Task
  const updateTask = async (id: string, updatedTask: Partial<Task>) => {
    try {
      const response = await axios.put(
        `http://localhost:5000/api/tasks/${id}`,
        updatedTask,
        { headers: { "Content-Type": "application/json" } }
      );

      setTasks(
        tasks.map((task) =>
          task._id === id ? { ...task, ...response.data } : task
        )
      );
      setEditingTaskId(null);
      setEditingTitle("");
    } catch (error) {
      console.error("Error updating task:", error);
    }
  };

  // BLOCK 8: Handling Edits
  const startEditing = (id: string) => {
    setEditingTaskId(id);
  };

  // Handle title change during editing
  const handleEditChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEditingTitle(e.target.value);
  };

  // BLOCK 9: Render the app
  return (
    <div className="App">
      <h1>Todo App</h1>
      <div>
        <input
          type="text"
          value={task}
          onChange={(e) => setTask(e.target.value)}
        />
        <button onClick={addTask}>Add Task</button>
      </div>
      <TodoList
        tasks={tasks}
        deleteTask={deleteTask}
        updateTask={updateTask}
        editingTitle={editingTitle}
        setEditingTitle={setEditingTitle}
        editingTaskId={editingTaskId}
        setEditingTaskId={setEditingTaskId}
        startEditing={startEditing}
        handleEditChange={handleEditChange}
      />
    </div>
  );
};

// BLOCK 10: Exporting the Component
export default App;

Here’s a block-by-block breakdown of the code above:

BLOCK 1: Importing dependencies

• React, { useState, useEffect }: Manages component state and side effects.

• axios: Handles API requests.

• TodoList.tsx: A child component to display and manage tasks.

• App.css: Styles the app.

BLOCK 2: Defining the task interface

• Defines the structure of a task (_id, title, completed).

BLOCK 3: Setting up state variables

• tasks: Stores the list of tasks.

• task: Holds input for new tasks.

• editingTaskId: Tracks the task being edited.

• editingTitle: Stores the updated title while editing.

BLOCK 4: Fetching tasks from the backend (useEffect)

• Runs once when the app loads.

• Calls the API (GET /api/tasks) to get tasks and updates tasks.

• Error handling**:** Logs an error message if the fetching request fails

BLOCK 5: Adding a task

• Sends a POST request to add a new task.

• Updates tasks with the new task.

• Error handling**:** Logs an error message if the adding task request fails

BLOCK 6: Deleting a task

• Sends a DELETE request to remove a task.

• Updates tasks by filtering out the deleted task.

• Error handling**:** Logs an error message if the deleting task request fails

BLOCK 7: Updating a task

• Sends a PUT request to update a task’s title.

• Updates tasks with the new title.

• Error handling**:** Logs an error message if the update request fails

BLOCK 8: Handling edits

• startEditing(id): Sets a task into edit mode.

• handleEditChange(e): Updates the editing input.

BLOCK 9: Rendering the UI

• Displays an input field and button to add tasks.

• Passes task data and functions (deleteTask, updateTask, etc.) to TodoList.tsx.

BLOCK 10: Exporting the component

• export default App;: Makes App usable in other files.

Displaying your tasks in the UI

Inside the src folder, create a new folder named components. Then add a TodoList.tsx file inside it with the below code.

src/components/TodoList.tsx:

// BLOCK 1: Importing Dependencies
import React from "react";

// BLOCK 2: Defining Interfaces
interface Task {
  _id: string; // Unique ID for the task
  title: string; // Task name
  completed: boolean; // True if done, False if not
}

interface TodoListProps {
  tasks: Task[];
  deleteTask: (id: string) => void;
  updateTask: (id: string, updatedTask: Partial<Task>) => void;
  editingTitle: string;
  setEditingTitle: (title: string) => void;
  editingTaskId: string | null;
  setEditingTaskId: (id: string | null) => void;
  startEditing: (id: string) => void;
  handleEditChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

// BLOCK 3: Declares the TodoList Component
const TodoList: React.FC<TodoListProps> = ({
  tasks,
  deleteTask,
  updateTask,
  editingTitle,
  setEditingTitle,
  editingTaskId,
  setEditingTaskId,
  startEditing,
  handleEditChange,
}) => {

  // BLOCK 4: Rendering the Task List and handling task actions
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task._id}>
          <input
            type="checkbox"
            checked={task.completed}
            onChange={() => updateTask(task._id, { completed: !task.completed })}
          />
          {editingTaskId === task._id ? (
            <>
              <input type="text" value={editingTitle} onChange={handleEditChange} />
              <button
                onClick={() => {
                  updateTask(task._id, { title: editingTitle });
                  setEditingTaskId(null);
                }}
              >
                Save
              </button>
            </>
          ) : (
            <>
              <span style={{ textDecoration: task.completed ? "line-through" : "none" }}>
                {task.title}
              </span>

              <div>
                <button onClick={() => deleteTask(task._id)}>Delete</button>
                <button
                  onClick={() => {
                    startEditing(task._id);
                    setEditingTitle(task.title);
                  }}
                >
                  Edit
                </button>
              </div>
            </>
          )}
        </li>
      ))}
    </ul>
  );
};

// BLOCK 5: Exporting the Component
export default TodoList;

Here’s a block-by-block breakdown of the code above:

BLOCK 1: Importing dependencies

• React: Enables functional component creation.

BLOCK 2: Defining interfaces

• Task interface: Defines _id, title, and completed properties.

• TodoListProps interface: Defines props passed to the TodoList component

BLOCK 3: Declares the TodoList component

• Defines a functional React component (TodoList) using TypeScript (React.FC<TodoListProps>).

• Extracts the listed props from TodoListProps and prepares the component for rendering.

BLOCK 4: Rendering the Task List and handling task actions

• Maps through tasks to display each task inside a <ul>.

• Checkbox toggles completed status using updateTask().

• Conditional rendering:

  • If a task is being edited, an input field appears for editing.

  • Otherwise, the task title is displayed with a strikethrough if completed

• Save button: Updates the task title using updateTask(), then exits edit mode.

• Delete button: Calls deleteTask() to remove a task.

• Edit button: Enables edit mode, setting editingTaskId and editingTitle.

BLOCK 5: Exporting the component

• Makes TodoList available for use in other components.

Give Your App Customized Styling

Inside your src folder, create App.css if it doesn’t exist and replace the content with your desired styling. Let’s give the frontend a finishing touch.

src/App.css:

/* Center the app in the middle of the screen */
html, body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4; /* Light gray background */
  width: 100%;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Style the main app container */
.App {
  text-align: center;
  background: white;
  padding: 20px;
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Light shadow effect */
  width: 90%; /* Make it flexible */
  max-width: 350px; /* Prevent exceeding max size */
  box-sizing: border-box;
}

/* Add spacing below the title */
h1 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

/* Style input fields */
input {
  width: 100%; /* Full width */
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  box-sizing: border-box;
}

/* Style buttons */
button {
  width: 100%; /* Make buttons full width */
  padding: 10px;
  margin-top: 5px;
  border: none;
  background-color: #007bff; /* Blue background */
  color: white;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
  transition: background-color 0.3s ease-in-out;
}

/* Change button color when hovered */
button:hover {
  background-color: #0056b3;
}

/* Remove default list styles */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Style list items */
li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 10px;
  margin: 5px 0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  width: 100%;
  box-sizing: border-box;
}

/* Allow task text to take available space */
span {
  flex: 1;
  font-size: 16px;
  color: #333;
}

/* Style completed tasks */
span.completed {
  text-decoration: line-through;
  color: #888;
}

/* Adjust the width of input fields inside the list */
input[type="text"] {
  width: 70%;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* Style the checkbox */
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #007bff; /* Blue checkbox to match buttons */
  margin-right: 10px;
}

/* Styling for editing mode */
.editing-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Responsive styling for smaller screens */
@media (max-width: 400px) {
  .App {
    width: 95%;
    padding: 15px;
    max-width: none; /* Remove fixed width restriction */
  }

  li {
    flex-direction: column;
    align-items: flex-start;
  }

  input {
    width: 100%;
  }

  button {
    width: 100%;
    padding: 10px;
  }
}

Here’s what this CSS code does:

First, it centers the app (html, body):

• Uses flexbox to center the app vertically and horizontally.

• Sets height: 100vh for full-screen height.

• Prevents horizontal scrolling with overflow-x: hidden.

Then it styles the main app container (.App):

• Adds a white background with rounded corners and a shadow.

• Ensures responsiveness with width: 90% and max-width: 350px.

Next, we handle typography and layout:

• Sets Arial, sans-serif as the font.

• Adds spacing below the title (h1).

• Ensures task text takes available space with span { flex: 1; }.

Then we deal with input and button styling:

• Inputs are full-width, styled with padding, borders, and rounded corners.

• Buttons are blue, full-width, with hover effects (background-color: #0056b3).

And then task list styling (ul, li, span.completed):

• Removes default list styles.

• Each task (li) has a white background, padding, rounded corners, and a shadow.

• Completed tasks are styled with a line-through and faded text color.

Next, we handle checkbox and editing mode styling:

• Styled blue checkboxes (accent-color: #007bff).

• Adds an editing-container with display: flex; for edit mode.

And finally, we make the design responsive (@media (max-width: 400px)):

• Adjusts .App width and padding for small screens.

• Stacks list items (li) vertically instead of side-by-side.

Backend Setup

In your VS Code terminal, make sure you are in your project root directory (inside mern-todo-app) and then create a folder called backend. Navigate to the backend folder and initialize Node.js:

mkdir backend
cd backend
npm init -y

Install Dependencies

Still inside your backend folder, run this command:

npm install express mongoose dotenv cors

In this command,

• express is a fast and minimal web framework for Node.js used to create server-side applications and APIs.

• mongoose is an Object Data Modeling (ODM) library for MongoDB, simplifying database interactions.

• dotenv loads environment variables from a .env file, keeping sensitive data secure.

• cors enables Cross-Origin Resource Sharing, allowing frontend applications to communicate with the backend across different domains.

Create a server.js File

Inside your backend folder, create a file named server.js and enter the following code:

backend/server.js:

// BLOCK 1: Importing Dependencies
const express = require("express");
const mongoose = require("mongoose");
const cors = require("cors");
const dotenv = require("dotenv");

// BLOCK 2: Configuring the Express App
dotenv.config();

const app = express();

// BLOCK 3: Setting Up Middleware
app.use(cors());
app.use(express.json());

// BLOCK 4: Connecting to MongoDB
const connectDB = async () => {
  try {
    await mongoose.connect(process.env.MONGO_URI);
    console.log("MongoDB Connected");
  } catch (err) {
    console.error("MongoDB Connection Failed:", err);
    process.exit(1); // Exit process with failure
  }
};

// Call the database connection function
connectDB();

// BLOCK 5: Defining Routes
const tasksRoutes = require("./routes/tasks");
app.use("/api/tasks", tasksRoutes);

// BLOCK 6: Starting the Server
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Here’s a block-by-block breakdown of the code above:

BLOCK 1: Importing dependencies

• express**:** Creates the server.

• mongoose**:** Connects to MongoDB.

• cors**:** Enables cross-origin requests.

• dotenv**:** Loads environment variables.

BLOCK 2: Configuring the Express app

• Loads environment variables using dotenv.config().

• Initializes express() to create an app instance.

BLOCK 3: Setting up middleware

• cors(): Allows API access from different origins.

• express.json(): Parses incoming JSON requests.

BLOCK 4: Connecting to MongoDB

• Defines connectDB() to connect to MongoDB using MONGO_URI.

• Logs success or failure and exits on error.

BLOCK 5: Defining routes

• Imports tasksRoutes from ./routes/tasks.

• Uses /api/tasks as the base route for task operations.

BLOCK 6: Starting the server

• Sets PORT from .env or defaults to 5000.

• Starts the server and logs the running port.

Define Task Model

In your backend folder, create a model folder. Inside model, create a file named Task.js and add the following code:

backend/model/Task.js:

// BLOCK 1: Importing Mongoose
const mongoose = require("mongoose");

// BLOCK 2: Defining Task Schema
const TaskSchema = new mongoose.Schema({
    title: { type: String, required: true },
    completed: { type: Boolean, default: false },
});

// BLOCK 3: Creating and Exporting the Model
module.exports = mongoose.model("Task", TaskSchema);

Here’s a block-by-block breakdown of the code above:

BLOCK 1: Importing Mongoose

• mongoose: Used to define the schema and interact with MongoDB.

BLOCK 2: Defining the task schema

• title: A required string field for the task title.

• completed: A boolean field indicating task status (default: false).

BLOCK 3: Creating and exporting the model

• Creates a Mongoose model named "Task" based on TaskSchema.

• Exports the model for use in other parts of the application

Define Routes

In your backend folder, create a routes folder. Inside routes, create a file named tasks.js and add the following code:

backend/routes/tasks.js:

// BOCK 1: Import dependencies
const express = require("express");
const Task = require("../models/Task");

const router = express.Router();

// BLOCK 2: GET all tasks
router.get("/", async (req, res) => {
  try {
    const tasks = await Task.find();
    res.json(tasks);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

// BLOCK 3: POST a new task
router.post("/", async (req, res) => {
  const { title } = req.body;
  console.log("Received title:", title); // Debugging log

  if (!title) {
    return res.status(400).json({ error: "Task title is required" });
  }

  try {
    const newTask = new Task({ title });
    await newTask.save();
    res.status(201).json(newTask);
  } catch (err) {
    console.error(err.message);
    res.status(500).json({ error: err.message });
  }
});

// BLOCK 4: DELETE a task
router.delete("/:id", async (req, res) => {
  try {
    const { id } = req.params;
    await Task.findByIdAndDelete(id);
    res.json({ message: "Task deleted" });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

// BLOCK 5: UPDATE a task
router.put("/:id", async (req, res) => {
  try {
    const { id } = req.params;

    const updatedTask = await Task.findByIdAndUpdate(
      id,
      req.body,
      { new: true } // Return the updated task
    );
    res.json(updatedTask);
  } catch (error) {
    res.status(500).json({ error: "Error updating task" });
  }
});

// BLOCK 6: Export the router
module.exports = router;

Here’s a block-by-block breakdown of the code above:

BLOCK 1: Import dependencies

• express: Handles routing.

• Task: Imports the Task model.

• express.Router(): Creates a router for task-related routes.

BLOCK 2: GET all tasks

• Fetches all tasks from the database.

• Sends the tasks as a JSON response.

• Handles errors with a 500 status.

BLOCK 3: POST a new task

• Extracts title from the request body.

• Logs the received title for debugging.

• Validates the title (returns 400 if missing).

• Saves the task to the database and returns it.

BLOCK 4: DELETE a task

• Extracts id from the request params.

• Deletes the task from the database.

• Returns a success message.

BLOCK 5: UPDATE a task

• Extracts id from the request params.

• Updates the task using request body data.

• Returns the updated task.

BLOCK 6: Export the router

• Exports router for use in other parts of the app.

This Express.js router handles CRUD operations for a Task model using MongoDB. It defines routes to get all tasks, add a new task, delete a task by ID, and update a task's title by ID. Error handling ensures proper responses for missing data or server issues.

Create a .env file

In your backend folder, create a .env file and add the following:

backend/.env:

MONGO_URI=your_mongodb_atlas_uri

Set Up MongoDB Atlas

MongoDB Atlas is a cloud-based MongoDB service. We'll use the free tier for this project.

To get started, go to MongoDB Atlas and create an account or log in.

Follow the steps to create a free cluster. Once the cluster is created, click Connect and follow the instructions to:

• Whitelist your IP address to allow MongoDB access using your environment variable.

• Create a database user.

• Get the connection string.

Replace the your_mongodb_atlas_uri in .env file with your MongoDB Atlas connection string.

If you are still not comfortable with how to set up MongoDB atlas, read this: MongoDB Atlas Tutorial – How to Get Started.

Run the Application

To run the application successfully using npm run dev, you need to install a dependency that will start both the frontend and backend simultaneously. You can do this using concurrently.

Install concurrently:

Open your terminal, navigate to your project root directory (mern-todo-app), and run:

npm install concurrently

Configure package.json:

After installing concurrently, ensure that you have a package.json file in your project root directory. If it doesn't exist, create one and add the following code:

mern-todo-app/package.json:

{
    "name": "mern-todo-app",
    "version": "1.0.0",
    "private": true,
    "scripts": {
        "start": "cd backend && npm start",
        "client": "cd frontend && npm run dev",
        "dev": "concurrently \"npm run start\" \"npm run client\""
    },
    "dependencies": {
        "concurrently": "^8.2.2"
    }
}

This package.json file configures the application by defining:

• Project metadata (name, version, private flag).

• Scripts (start, client, and dev) to start the backend, run the frontend, and execute both simultaneously.

• Dependencies, including concurrently, which enables running multiple scripts in parallel.

• The project is set to private to prevent accidental publishing.

Start the Application

Ensure everything is set up and saved, then run the following command from the project root:

npm run dev

If the application starts successfully, you should see messages like:

Server running on port 5000
MongoDB Connected

View the Application

Open your browser and navigate to:

• Frontend (To-Do app interface): http://localhost:5173

• Backend (Stored tasks in the database): http://localhost:5000/api/tasks

Test the functionality by adding, editing, saving, deleting tasks, and checking off completed tasks to ensure everything works properly.

Conclusion

Congratulations! You have successfully built a MERN To-Do app. You can further enhance it by adding features such as time and date tracking, and deploying it to a cloud platform.

Feel free to copy the code or clone the GitHub repository to add more functionalities and customize the styling to your preference. If you found this guide helpful, please consider sharing it and connecting with me!

For more learning resources:

• React.js Docs

• TypeScript Docs

• Vite Docs

• MongoDB Docs

• Node.js Docs

I decided to share with you how I was able to implement this. I think you’ll find it helpful, as it’s more cost-effective (in terms of reducing money spent on running tests in CI/CD), and it also improves your developer experience.

Table of Contents

• Prerequisites

• The Node.js Test Runner

• MongoDB In-Memory Server

• How to Write the Tests

  • 1. Set Up the Project

  • 2. Set up Mongoose Schema

  • 3. Set Up Services

  • 4. Set Up Tests

  • 5. Write Tests

  • 6. Pass Tests

  • 7. Use TypeScript (Optional)

• Conclusion

Prerequisites

To follow along with this guide, you should have experience working with Node.js, MongoDB, and Mongoose (or any other MongoDB object data mapper). You should also have Node.js (at least v20.18.2) and MongoDB installed on your computer.

The Node.js Test Runner

The Node.js test runner was introduced as an experimental feature in version 18 of Node.js. It became fully available in version 20. It gives you the ability to:

1. Run tests

2. Report test results

3. Report test coverage (still experimental at version 23)

It’s a good idea to use the in-built test runner when writing tests in Node.js because it means that you have to use fewer external dependencies. You don’t need to install an external library (and its peer dependencies) to run tests.

The built-in best runner is also faster. Based on my experience using it on two projects (which formerly used Jest), I saw improvements of at least a 66% reduction in the time taken to run tests completely.

And unlike other testing frameworks or libraries, the Node.js test runner was built specifically for Node.js projects. It doesn’t try to accommodate the specifics of other programming environments like the browser. The specifics of Node.js are its main and only priority.

MongoDB In-Memory Server

For tests that involve making requests to a database, some developers prefer to mock the requests to avoid making requests to a real database. They do this because making a request to a real database requires a lot of setting up which can cost time and resources.

Writing and fetching data using a real database is slower compared to writing and fetching data from memory. When running automated tests, using a real MongoDB server will be slower than using an in-memory database server, and that is where mongodb-memory-server becomes useful.

According to its documentation, mongodb-memory-server creates and starts a real MongoDB server programmatically from within Node.js, but uses an in-memory database by default. It also allows you to connect to the database server it creates using your preferred object data mapper such as Mongoose, Prisma, or TypeORM. In this guide, we’ll use Mongoose (v8.9.6).

Since the data stored by mongodb-memory-server resides in memory by default, it’s faster to read from and write to than when using a real database. mongodb-memory-server is also easier to set up. These benefits make it a good choice for using it as a database server for writing tests.

Note: Make sure to install v9.1.6 of mongodb-memory-server to follow this guide. v10 currently has issues with cleaning up resources after tests are done. See this issue titled Node forking will include any --import from the original command.

The issue has been resolved at the time of writing this article, but the fix has not been merged for installs.

How to Write the Tests

Now I’ll take you through the following steps to get you started writing tests:

1. Set up the project

2. Set up mongoose schema

3. Set up services

4. Set up tests

5. Write tests

6. Pass tests

7. Use TypeScript (Optional)

1. Set Up the Project

I created a GitHub repository to make it easier for you to follow this guide. Clone the repository at nodejs-test-runner-mongoose and checkout branch 01-setup.

In 01-setup, the dependencies for the project are in the package.json file. Install the dependencies using the npm install command to set up the project. To make sure that the setup is complete and correct, run the node . command in the terminal of your project. You should see your version of Node.js as an output on the terminal.

# install dependencies
npm install
...
# run the node command
node .
# the output
You are running Node.js v22.13.1

2. Set up Mongoose Schema

We’ll set up the schema for two collections (Task and User) in branch 02-setup-schema using Mongoose. The task/model.mjs and user/model.mjs files contain the schema for the Task and the User collection, respectively. We’ll also set up a database connection in index.mjs to ensure that the schema setup works correctly.

I won’t go into detail about Mongoose models and schema in this article because they are outside its scope.

When you run the node . command after implementing the changes in 02-setup-schema, you should see a similar result in the console as in the snippet below:

node .
You are running Node.js v22.13.1
Created user with id 679f1d7f73fbeaf23b2007df
Created task "Task title" for user with id "679f1d7f73fbeaf23b2007df"

You can see the differences between 01-setup and 02-setup-schema via the 01-setup <> 02-setup-schema diff on GitHub.

3. Set Up Services

Next, we create service files (task/service.mjs and user/service.mjs) in branch 03-setup-services. Both files currently contain empty functions that we’ll write tests for later. These functions will contain business logic and also communicate with the database. We’re using JSDoc comments for typing parameters and return values.

Click 02-setup-schema <> 03-setup-services diff to see the code changes between 02-setup-schema and 03-setup-services.

4. Set Up Tests

In branch 04-set-up-tests, we set up the codebase to run tests. We create test.setup.mjs which contains code that will be run before each test file is executed.

In test.setup.mjs, the connect function creates a MongoDB In-Memory server and connects to it with Mongoose for running the tests. The closeDatabase function closes the database connection and cleans up all resources to free memory.

The connect and closeDatabase functions get executed in the t.before hook and the t.after hook respectively. This ensures that, before a test file is run, a database connection is established through t.before. Then after tests for the file have been completely run, the database connection is dropped and the resources used are cleared up through t.after.

In package.json, we’ll update the npm test script to node --test --import ./test.setup.mjs. This command ensures that the test.setup.mjs ES Module is preloaded and executed through the --import CLI command before each test file is run.

Then we’ll create the test files with empty tests in the __tests__ folders for user and task. After implementing the new changes in 04-set-up-tests, running the test script with npm run test should display output similar to the snippet below:

npm run test

> nodejs-test-runner-mongoose@1.0.0 test
> node --test --import ./test.setup.mjs

...

ℹ tests 8
ℹ suites 5
ℹ pass 8
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 941.768873

All tests currently pass because there are no assertions that fail in them. We’ll write tests with assertions in the following section.

5. Write Tests

Now it’s time to write tests for the functions in the service files in the 05-write-tests branch. We’re using the Node.js assert library to ensure that values returned from the functions are what we expect. You can view the tests we’ve written when you compare the differences between 04-set-up-tests and 05-write-tests

When the tests script is run, all tests fail because we haven’t written the functions in the service files yet. You should see output similar to the snippet below when you run the test script:

npm run test

> nodejs-test-runner-mongoose@1.0.0 test
> node --test --import ./test.setup.mjs

...

ℹ tests 8
ℹ suites 5
ℹ pass 0
ℹ fail 8
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 1202.031961

6. Pass Tests

In 06-pass-tests, we write the functions in the service files to pass the tests. Only 6 out of 7 tests pass when the test script is run because we skipped the test for the getById function in user/service.mjs has with t.skip. We haven’t finished the getById function in user/service.mjs. I figured we could leave it as an exercise.

When you run the test script, you should get a similar output in the terminal as below:

ℹ tests 7
ℹ suites 4
ℹ pass 6
ℹ fail 0
ℹ cancelled 0
ℹ skipped 1
ℹ todo 0
ℹ duration_ms 1287.564918

You can see the code we wrote to pass tests in the code changes between 05-write-tests and 06-pass-tests.

7. Use TypeScript (Optional)

If you intend to run tests with TypeScript, you can checkout branch 07-with-typescript. You need to have Node.js >=v22.6.0 installed because we’re using the --experimental-strip-types option in the test. To set up tests to run with TypeScript, go through the following steps:

1. Install TypeScript using the npm install typescript --save-dev command

2. Install tsx using the npm install tsx command

3. Create a default tsconfig.json file at the root of the project using the npx tsc --init command

In package.json, update the test script to this:

"test": "node --test --experimental-strip-types --import tsx --import ./test.setup.mjs"

• --experimental-strip-types helps strip out types before each test file is executed.

• Preloading tsx with the --import helps execute the TypeScript file. Without it, the test runner will not be able to find files imported without the .ts extension. For example, user/model.ts imported with the code snippet below will not be found.

    import { UserModel } from "./model";
  

The rest of the changes from 06-pass-tests to 07-with-typescript involve updating types, changing file extensions from .mjs to .ts and updating import statements.

Conclusion

In this guide, you have learned how to use the built-in Node.js test runner and why it’s often a better choice over other testing libraries and frameworks. You have also learned how to use mongodb-memory-server as a replacement for a real MongoDB server, as well as why it’s a good idea to use this instead of a real MongoDB server for tests.

Most importantly, you have learned how to set up and run tests in Node.js using the Node.js test runner and mongodb-memory-server. You should now know how to set up your projects to run the tests if you use TypeScript.

If you find the nodejs-test-runner-mongoose repository useful, kindly give it a star. It encourages me. Thank you.

Database migrations are usually run before an application starts and do not run successfully more than once for the same database. Database migration tools save a history of migrations that have run in a database so that they can be tracked for future purposes.

In this article, you’ll learn how to set up and run database migrations in a minimal Node.js API application. We will use ts-migrate-mongoose and an npm script to create a migration and seed data into a MongoDB database. ts-migrate-mongoose supports running migration scripts from TypeScript code as well as CommonJS code.

ts-migrate-mongoose is a migration framework for Node.js projects that use mongoose as the object-data mapper. It provides a template for writing migration scripts. It also provides a configuration to run the scripts programmatically and from the CLI.

Table of Contents

• How to Set Up the Project

• How to Configure ts-migrate-mongoose for the Project

• How to Seed User Data with ts-migrate-mongoose

• How to Build an API Endpoint to Fetch Seeded Data

• Conclusion

How to Set Up the Project

To use ts-migrate-mongoose for database migrations, you need to have the following:

1. A Node.js project with mongoose installed as a dependency.

2. A MongoDB database connected to the project.

3. MongoDB Compass (Optional – to enable us view the changes in the database).

A starter repository which can be cloned from ts-migrate-mongoose-starter-repo has been created for ease. Clone the repository, fill the environment variables and start the application by running the npm start command.

Visit http://localhost:8000 with a browser or an API client such as Postman and the server will return a "Hello there!" text to show that the starter application runs as expected.

How to Configure ts-migrate-mongoose for the Project

To configure ts-migrate-mongoose for the project, install ts-migrate-mongoose with this command:

npm install ts-migrate-mongoose

ts-migrate-mongoose allows configuration with a JSON file, a TypeScript file, a .env file or via the CLI. It is advisable to use a .env file because the content of the configuration may contain a database password and it is not proper to have that exposed to the public. .env files are usually hidden via .gitignore files so they are more secure to use. This project will use a .env file for the ts-migrate-mongoose configuration.

The file should contain the following keys and their values:

• MIGRATE_MONGO_URI - the URI of the Mongo database. It is the same as the database URL.

• MIGRATE_MONGO_COLLECTION - the name of the collection (or table) which migrations should be saved in. The default value is migrations which is what is used in this project. ts-migrate-mongoose saves migrations to MongoDB.

• MIGRATE_MIGRATIONS_PATH - the path to the folder for storing and reading migration scripts. The default value is ./migrations which is what is used in this project.

How to Seed User Data with ts-migrate-mongoose

We have been able to create a project and connect it successfully to a Mongo database. At this point, we want to seed user data into the database. We need to:

1. Create a users collection (or table)

2. Use ts-migrate-mongoose to create a migration script to seed data

3. Use ts-migrate-mongoose to run the migration to seed the user data into the database before the application starts

1. Create a users Collection using Mongoose

Mongoose schema can be used to create a user collection (or table). User documents (or records) will have the following fields (or columns): email, favouriteEmoji and yearOfBirth.

To create a Mongoose schema for the user collection, create a user.model.js file in the root of the project containing the following code snippet:

const mongoose = require("mongoose");

const userSchema = new mongoose.Schema(
  {
    email: {
      type: String,
      lowercase: true,
      required: true,
    },
    favouriteEmoji: {
      type: String,
      required: true,
    },
    yearOfBirth: {
      type: Number,
      required: true,
    },
  },
  {
    timestamps: true,
  }
);

module.exports.UserModel = mongoose.model("User", userSchema);

2. Create a Migration Script with ts-migrate-mongoose

ts-migrate-mongoose provides CLI commands which can be used to create migration scripts.

Running npx migrate create <name-of-script> in the root folder of the project will create a script in the MIGRATE_MIGRATIONS_PATH folder (./migrations in our case). <name-of-script> is the name we want the migration script file to have when it is created.

To create a migration script to seed user data, run:

npx migrate create seed-users

The command will create a file in the ./migrations folder with a name in the form -<timestamp>-seed-users.ts. The file will have the following code snippet content:

// Import your models here

export async function up (): Promise<void> {
  // Write migration here
}

export async function down (): Promise<void> {
  // Write migration here
}

The up function is used to run the migration. The down function is used to reverse whatever the up function executes, if need be. In our case, we are trying to seed users into the database. The up function will contain code to seed users into the database and the down function will contain code to delete users created in the up function.

If the database is inspected with MongoDB Compass, the migrations collection will have a document that looks like this:

{
  "_id": ObjectId("6744740465519c3bd9c1a7d1"),
  "name": "seed-users",
  "state": "down",
  "createdAt": 2024-11-25T12:56:36.316+00:00,
  "updatedAt": 2024-11-25T12:56:36.316+00:00,
  "__v": 0
}

The state field of the migration document is set to down. After it runs successfully, it changes to up.

You can update the code in ./migrations/<timestamp>-seed-users.ts to the one in the snippet below:

require("dotenv").config() // load env variables
const db = require("../db.js")
const { UserModel } = require("../user.model.js");

const seedUsers = [
  { email: "john@email.com", favouriteEmoji: "🏃", yearOfBirth: 1997 },
  { email: "jane@email.com", favouriteEmoji: "🍏", yearOfBirth: 1998 },
];

export async function up (): Promise<void> {
  await db.connect(process.env.MONGO_URI)
  await UserModel.create(seedUsers);}

export async function down (): Promise<void> {
  await db.connect(process.env.MONGO_URI)
  await UserModel.delete({
    email: {
      $in: seedUsers.map((u) => u.email),
    },
  });
}

3. Run the Migration Before the Application Starts

ts-migrate-mongoose provides us with CLI commands to run the up and down function of migration scripts.

With npx migrate up <name-of-script> we can run the up function of a specific script. With npx migrate up we can run the up function of all scripts in the ./migrations folder with a state of down in the database.

To run the migration before the application starts, we make use of npm scripts. npm scripts with a prefix of pre will run before a script without the pre prefix. For example, if there is a dev script and a predev script, whenever the dev script is run with npm run dev, the predev script will automatically run before the dev script is run.

We will use this feature of npm scripts to place the ts-migrate-mongoose command in a prestart script so that the migration will run before the start script.

Update the package.json file to have a prestart script that runs the ts-migrate-mongoose command for running the up function of migration scripts in the project.

  "scripts": {
    "prestart": "npx migrate up",
    "start": "node index.js"
  },

With this setup, when npm run start is executed to start the application, the prestart script will run to execute the migration using ts-migrate-mongoose and seed the database before the application starts.

You should have something similar to the snippet below after running npm run start:

Synchronizing database with file system migrations...
MongoDB connection successful
up: 1732543529744-seed-users.ts 
All migrations finished successfully

> ts-migrate-mongoose-starter-repo@1.0.0 start
> node index.js

MongoDB connection successful                      
Server listening on port 8000

Check out the seed-users branch of the repository to see the current status of the codebase at this point in the article.

How to Build an API Endpoint to Fetch Seeded Data

We can build an API endpoint to fetch the seeded users data in our database. In the server.js file, update the code to the one in the snippet below:

const { UserModel } = require("./user.model.js")

module.exports = async function (req, res) {
  const users = await UserModel.find({}) // fetch all the users in the database

  res.writeHead(200, { "Content-Type": "application/json" });
  return res.end(JSON.stringify({ // return a JSON representation of the fetched users data
    users: users.map((u) => ({
      email: u.email,
      favouriteEmoji: u.favouriteEmoji,
      yearOfBirth: u.yearOfBirth,
      createdAt: u.createdAt
    }))
  }, null, 2));
};

If we start the application and visit http://localhost:8000 using Postman or a browser, we get a JSON response similar to the one below:

{
  "users": [
    {
      "email": "john@email.com",
      "favouriteEmoji": "🏃",
      "yearOfBirth": 1997,
      "createdAt": "2024-11-25T14:18:55.416Z"
    },
    {
      "email": "jane@email.com",
      "favouriteEmoji": "🍏",
      "yearOfBirth": 1998,
      "createdAt": "2024-11-25T14:18:55.416Z"
    }
  ]
}

Notice that if the application is run again, the migration script does not run anymore because the state of the migration will now be up after it has run successfully.

Check out the fetch-users branch of the repository to see the current status of the codebase at this point in the article.

Conclusion

Migrations are useful when building applications and there is need to seed initial data for testing, seeding administrative users, updating database schema by adding or removing columns and updating the values of columns in many records at once.

ts-migrate-mongoose can help provide a framework for running migrations for your Node.js applications if you use Mongoose with MongoDB.

In this article, I'll be giving you an introduction to each of the key technologies, and then we'll build a project using the FARM stack and Docker so you can see how everything works together.

This article is based on a course I created on the freeCodeCamp.org YouTube channel. Watch it here:

Introduction to the FARM Stack

The FARM in FARM stack stands for:

• F: FastAPI (Backend)

• R: React (Frontend)

• M: MongoDB (Database)

The FARM stack is designed to leverage the strengths of each component, allowing developers to create feature-rich applications with a smooth development experience.

Components of FARM Stack

1. FastAPI: FastAPI is a modern, high-performance Python web framework for building APIs. It's designed to be easy to use, fast to code, and ready for production environments. FastAPI is built on top of Starlette for the web parts and Pydantic for the data parts, making it a powerful choice for building robust backend services.

2. React: React is a popular JavaScript library for building user interfaces. Developed and maintained by Facebook, React allows developers to create reusable UI components that efficiently update and render as data changes. Its component-based architecture and virtual DOM make it an excellent choice for building dynamic and responsive frontend applications.

3. MongoDB: MongoDB is a document-oriented NoSQL database. It stores data in flexible, JSON-like documents, meaning fields can vary from document to document and data structure can be changed over time. This flexibility makes MongoDB an ideal choice for applications that need to evolve quickly and handle diverse data types.

Advantages of using FARM Stack

1. High Performance: FastAPI is one of the fastest Python frameworks available, while React's virtual DOM ensures efficient UI updates. MongoDB's document model allows for quick reads and writes.

2. Scalability: All components of the FARM stack are designed to scale. FastAPI can handle concurrent requests efficiently, React applications can manage complex UIs, and MongoDB can distribute data across multiple servers.

3. Community and Ecosystem: All three technologies have large, active communities and rich ecosystems of libraries and tools.

4. Flexibility: The FARM stack is flexible enough to accommodate various types of web applications, from simple CRUD apps to complex, data-intensive systems.

By combining these technologies, the FARM stack provides a comprehensive solution for building modern web applications. It allows developers to create fast, scalable backends with FastAPI, intuitive and responsive frontends with React, and flexible, efficient data storage with MongoDB. This stack is particularly well-suited for applications that require real-time updates, complex data models, and high performance.

Project Overview: Todo Application

In the video course, I cover more about each individual technology in the FARM Stack. But in this article, we are going to jump right into a project to put everything together.

We will be creating a todo application to help us understand the FARM stack. Before we start creating the applicaiton, let’s discuss more about the features and software architecture.

Features of the todo application

Our FARM stack todo application will include the following features:

1. Multiple Todo Lists:

   • Users can create, view, update, and delete multiple todo lists.

   • Each list has a name and contains multiple todo items.

2. Todo Items:

   • Within each list, users can add, view, update, and delete todo items.

   • Each item has a label, a checked/unchecked status, and belongs to a specific list.

3. Real-time Updates:

   • The UI updates in real-time when changes are made to lists or items.

4. Responsive Design:

   • The application will be responsive and work well on both desktop and mobile devices.

System architecture

Our todo application will follow a typical FARM stack architecture:

1. Frontend (React):

   • Provides the user interface for interacting with todo lists and items.

   • Communicates with the backend via RESTful API calls.

2. Backend (FastAPI):

   • Handles API requests from the frontend.

   • Implements business logic for managing todo lists and items.

   • Interacts with the MongoDB database for data persistence.

3. Database (MongoDB):

   • Stores todo lists and items.

   • Provides efficient querying and updating of todo data.

4. Docker:

   • Containerizes each component (frontend, backend, database) for easy development and deployment.

Data model design

Our MongoDB data model will consist of two main structures:

1. Todo List:

   {
     "_id": ObjectId,
     "name": String,
     "items": [
       {
         "id": String,
         "label": String,
         "checked": Boolean
       }
     ]
   }

2. List Summary (for displaying in the list of all todo lists):

   {
     "_id": ObjectId,
     "name": String,
     "item_count": Integer
   }

API endpoint design

Our FastAPI backend will expose the following RESTful endpoints:

1. Todo Lists:

   • GET /api/lists: Retrieve all todo lists (summary view)

   • POST /api/lists: Create a new todo list

   • GET /api/lists/{list_id}: Retrieve a specific todo list with all its items

   • DELETE /api/lists/{list_id}: Delete a specific todo list

2. Todo Items:

   • POST /api/lists/{list_id}/items: Add a new item to a specific list

   • PATCH /api/lists/{list_id}/checked_state: Update the checked state of an item

   • DELETE /api/lists/{list_id}/items/{item_id}: Delete a specific item from a list

This project will provide a solid foundation in FARM stack development and Docker containerization, which you can then expand upon for more complex applications in the future.

So let's get started with the project.

Project Tutorial

Project Setup and Backend Development

Step 1: Set up the project structure

Create a new directory for your project:

   mkdir farm-stack-todo
   cd farm-stack-todo

Create subdirectories for the backend and frontend:

   mkdir backend frontend

Step 2: Set up the backend environment

Navigate to the backend directory:

   cd backend

Create a virtual environment and activate it:

   python -m venv venv
   source venv/bin/activate  # On Windows, use: venv\Scripts\activate

Create the following files in the backend directory:

3. • Dockerfile

     • pyproject.toml

In your terminal, install the required packages:

pip install "fastapi[all]" "motor[srv]" beanie aiostream

Generate the requirements.txt file:

pip freeze > requirements.txt

After creating the requirements.txt file (either through pip-compile or manually), you can install the dependencies using:

   pip install -r requirements.txt

Add the following content to Dockerfile:

   FROM python:3

   WORKDIR /usr/src/app
   COPY requirements.txt ./

   RUN pip install --no-cache-dir --upgrade -r ./requirements.txt

   EXPOSE 3001

   CMD [ "python", "./src/server.py" ]

Add the following content to pyproject.toml:

   [tool.pytest.ini_options]
   pythonpath = "src"

Step 4: Set up the backend structure

Create a src directory inside the backend directory:

   mkdir src

Create the following files inside the src directory:

2. • server.py

     • dal.py

Step 5: Implement the Data Access Layer (DAL)

Open src/dal.py and add the following content:

from bson import ObjectId
from motor.motor_asyncio import AsyncIOMotorCollection
from pymongo import ReturnDocument

from pydantic import BaseModel

from uuid import uuid4

class ListSummary(BaseModel):
  id: str
  name: str
  item_count: int

  @staticmethod
  def from_doc(doc) -> "ListSummary":
      return ListSummary(
          id=str(doc["_id"]),
          name=doc["name"],
          item_count=doc["item_count"],
      )

class ToDoListItem(BaseModel):
  id: str
  label: str
  checked: bool

  @staticmethod
  def from_doc(item) -> "ToDoListItem":
      return ToDoListItem(
          id=item["id"],
          label=item["label"],
          checked=item["checked"],
      )

class ToDoList(BaseModel):
  id: str
  name: str
  items: list[ToDoListItem]

  @staticmethod
  def from_doc(doc) -> "ToDoList":
      return ToDoList(
          id=str(doc["_id"]),
          name=doc["name"],
          items=[ToDoListItem.from_doc(item) for item in doc["items"]],
      )

class ToDoDAL:
  def __init__(self, todo_collection: AsyncIOMotorCollection):
      self._todo_collection = todo_collection

  async def list_todo_lists(self, session=None):
      async for doc in self._todo_collection.find(
          {},
          projection={
              "name": 1,
              "item_count": {"$size": "$items"},
          },
          sort={"name": 1},
          session=session,
      ):
          yield ListSummary.from_doc(doc)

  async def create_todo_list(self, name: str, session=None) -> str:
      response = await self._todo_collection.insert_one(
          {"name": name, "items": []},
          session=session,
      )
      return str(response.inserted_id)

  async def get_todo_list(self, id: str | ObjectId, session=None) -> ToDoList:
      doc = await self._todo_collection.find_one(
          {"_id": ObjectId(id)},
          session=session,
      )
      return ToDoList.from_doc(doc)

  async def delete_todo_list(self, id: str | ObjectId, session=None) -> bool:
      response = await self._todo_collection.delete_one(
          {"_id": ObjectId(id)},
          session=session,
      )
      return response.deleted_count == 1

  async def create_item(
      self,
      id: str | ObjectId,
      label: str,
      session=None,
  ) -> ToDoList | None:
      result = await self._todo_collection.find_one_and_update(
          {"_id": ObjectId(id)},
          {
              "$push": {
                  "items": {
                      "id": uuid4().hex,
                      "label": label,
                      "checked": False,
                  }
              }
          },
          session=session,
          return_document=ReturnDocument.AFTER,
      )
      if result:
          return ToDoList.from_doc(result)

  async def set_checked_state(
      self,
      doc_id: str | ObjectId,
      item_id: str,
      checked_state: bool,
      session=None,
  ) -> ToDoList | None:
      result = await self._todo_collection.find_one_and_update(
          {"_id": ObjectId(doc_id), "items.id": item_id},
          {"$set": {"items.$.checked": checked_state}},
          session=session,
          return_document=ReturnDocument.AFTER,
      )
      if result:
          return ToDoList.from_doc(result)

  async def delete_item(
      self,
      doc_id: str | ObjectId,
      item_id: str,
      session=None,
  ) -> ToDoList | None:
      result = await self._todo_collection.find_one_and_update(
          {"_id": ObjectId(doc_id)},
          {"$pull": {"items": {"id": item_id}}},
          session=session,
          return_document=ReturnDocument.AFTER,
      )
      if result:
          return ToDoList.from_doc(result)

This concludes Part 1 of the tutorial, where we set up the project structure and implemented the Data Access Layer for our FARM stack todo application. In the next part, we'll implement the FastAPI server and create the API endpoints.

Implementing the FastAPI Server

Step 6: Implement the FastAPI server

Open src/server.py and add the following content:

from contextlib import asynccontextmanager
from datetime import datetime
import os
import sys

from bson import ObjectId
from fastapi import FastAPI, status
from motor.motor_asyncio import AsyncIOMotorClient
from pydantic import BaseModel
import uvicorn

from dal import ToDoDAL, ListSummary, ToDoList

COLLECTION_NAME = "todo_lists"
MONGODB_URI = os.environ["MONGODB_URI"]
DEBUG = os.environ.get("DEBUG", "").strip().lower() in {"1", "true", "on", "yes"}


@asynccontextmanager
async def lifespan(app: FastAPI):
    # Startup:
    client = AsyncIOMotorClient(MONGODB_URI)
    database = client.get_default_database()

    # Ensure the database is available:
    pong = await database.command("ping")
    if int(pong["ok"]) != 1:
        raise Exception("Cluster connection is not okay!")

    todo_lists = database.get_collection(COLLECTION_NAME)
    app.todo_dal = ToDoDAL(todo_lists)

    # Yield back to FastAPI Application:
    yield

    # Shutdown:
    client.close()


app = FastAPI(lifespan=lifespan, debug=DEBUG)


@app.get("/api/lists")
async def get_all_lists() -> list[ListSummary]:
    return [i async for i in app.todo_dal.list_todo_lists()]


class NewList(BaseModel):
    name: str


class NewListResponse(BaseModel):
    id: str
    name: str


@app.post("/api/lists", status_code=status.HTTP_201_CREATED)
async def create_todo_list(new_list: NewList) -> NewListResponse:
    return NewListResponse(
        id=await app.todo_dal.create_todo_list(new_list.name),
        name=new_list.name,
    )


@app.get("/api/lists/{list_id}")
async def get_list(list_id: str) -> ToDoList:
    """Get a single to-do list"""
    return await app.todo_dal.get_todo_list(list_id)


@app.delete("/api/lists/{list_id}")
async def delete_list(list_id: str) -> bool:
    return await app.todo_dal.delete_todo_list(list_id)


class NewItem(BaseModel):
    label: str


class NewItemResponse(BaseModel):
    id: str
    label: str


@app.post(
    "/api/lists/{list_id}/items/",
    status_code=status.HTTP_201_CREATED,
)
async def create_item(list_id: str, new_item: NewItem) -> ToDoList:
    return await app.todo_dal.create_item(list_id, new_item.label)


@app.delete("/api/lists/{list_id}/items/{item_id}")
async def delete_item(list_id: str, item_id: str) -> ToDoList:
    return await app.todo_dal.delete_item(list_id, item_id)


class ToDoItemUpdate(BaseModel):
    item_id: str
    checked_state: bool


@app.patch("/api/lists/{list_id}/checked_state")
async def set_checked_state(list_id: str, update: ToDoItemUpdate) -> ToDoList:
    return await app.todo_dal.set_checked_state(
        list_id, update.item_id, update.checked_state
    )


class DummyResponse(BaseModel):
    id: str
    when: datetime


@app.get("/api/dummy")
async def get_dummy() -> DummyResponse:
    return DummyResponse(
        id=str(ObjectId()),
        when=datetime.now(),
    )


def main(argv=sys.argv[1:]):
    try:
        uvicorn.run("server:app", host="0.0.0.0", port=3001, reload=DEBUG)
    except KeyboardInterrupt:
        pass


if __name__ == "__main__":
    main()

This implementation sets up the FastAPI server with CORS middleware, connects to MongoDB, and defines the API endpoints for our todo application.

Step 7: Set up environment variables

Create a .env file in the root directory with the following content. Make sure to add the database name ("todo") at the end of ".mongodb.net/".

MONGODB_URI='mongodb+srv://beau:codecamp@cluster0.ji7hu.mongodb.net/todo?retryWrites=true&w=majority&appName=Cluster0'

Step 8: Create a docker-compose file

In the root directory of your project (farm-stack-todo), create a file named compose.yml with the following content:

name: todo-app
services:
  nginx:
    image: nginx:1.17
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
    ports:
      - 8000:80
    depends_on:
      - backend
      - frontend
  frontend:
    image: "node:22"
    user: "node"
    working_dir: /home/node/app
    environment:
      - NODE_ENV=development
      - WDS_SOCKET_PORT=0
    volumes:
      - ./frontend/:/home/node/app
    expose:
      - "3000"
    ports:
      - "3000:3000"
    command: "npm start"
  backend:
    image: todo-app/backend
    build: ./backend
    volumes:
      - ./backend/:/usr/src/app
    expose:
      - "3001"
    ports:
      - "8001:3001"
    command: "python src/server.py"
    environment:
      - DEBUG=true
    env_file:
      - path: ./.env
        required: true

Step 9: Set up Nginx configuration

Create a directory named nginx in the root of your project:

mkdir nginx

Create a file named nginx.conf inside the nginx directory with the following content:

server {
    listen 80;
    server_name farm_intro;

    location / {
        proxy_pass http://frontend:3000;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    location /api {
        proxy_pass http://backend:3001/api;
    }
}

This concludes Part 2 of the tutorial, where we implemented the FastAPI server, set up environment variables, created a docker-compose file, and configured Nginx. In the next part, we'll focus on setting up the React frontend for our FARM stack todo application.

Setting up the React Frontend

Step 10: Create the React application

Navigate to the frontend directory:

cd ../frontend

Create a new React application using Create React App:

npx create-react-app .

Install additional dependencies:

   npm install axios react-icons

Step 11: Set up the main App component

Replace the content of src/App.js with the following:

import { useEffect, useState } from "react";
import axios from "axios";
import "./App.css";
import ListToDoLists from "./ListTodoLists";
import ToDoList from "./ToDoList";

function App() {
  const [listSummaries, setListSummaries] = useState(null);
  const [selectedItem, setSelectedItem] = useState(null);

  useEffect(() => {
    reloadData().catch(console.error);
  }, []);

  async function reloadData() {
    const response = await axios.get("/api/lists");
    const data = await response.data;
    setListSummaries(data);
  }

  function handleNewToDoList(newName) {
    const updateData = async () => {
      const newListData = {
        name: newName,
      };

      await axios.post(`/api/lists`, newListData);
      reloadData().catch(console.error);
    };
    updateData();
  }

  function handleDeleteToDoList(id) {
    const updateData = async () => {
      await axios.delete(`/api/lists/${id}`);
      reloadData().catch(console.error);
    };
    updateData();
  }

  function handleSelectList(id) {
    console.log("Selecting item", id);
    setSelectedItem(id);
  }

  function backToList() {
    setSelectedItem(null);
    reloadData().catch(console.error);
  }

  if (selectedItem === null) {
    return (
      <div className="App">
        <ListToDoLists
          listSummaries={listSummaries}
          handleSelectList={handleSelectList}
          handleNewToDoList={handleNewToDoList}
          handleDeleteToDoList={handleDeleteToDoList}
        />
      </div>
    );
  } else {
    return (
      <div className="App">
        <ToDoList listId={selectedItem} handleBackButton={backToList} />
      </div>
    );
  }
}

export default App;

Step 12: Create the ListTodoLists component

Create a new file src/ListTodoLists.js with the following content:

import "./ListTodoLists.css";
import { useRef } from "react";
import { BiSolidTrash } from "react-icons/bi";

function ListToDoLists({
  listSummaries,
  handleSelectList,
  handleNewToDoList,
  handleDeleteToDoList,
}) {
  const labelRef = useRef();

  if (listSummaries === null) {
    return <div className="ListToDoLists loading">Loading to-do lists ...</div>;
  } else if (listSummaries.length === 0) {
    return (
      <div className="ListToDoLists">
        <div className="box">
        <label>
          New To-Do List:&nbsp;
          <input id={labelRef} type="text" />
        </label>
        <button
          onClick={() =>
            handleNewToDoList(document.getElementById(labelRef).value)
          }
        >
          New
        </button>
        </div>
        <p>There are no to-do lists!</p>
      </div>
    );
  }
  return (
    <div className="ListToDoLists">
      <h1>All To-Do Lists</h1>
      <div className="box">
        <label>
          New To-Do List:&nbsp;
          <input id={labelRef} type="text" />
        </label>
        <button
          onClick={() =>
            handleNewToDoList(document.getElementById(labelRef).value)
          }
        >
          New
        </button>
      </div>
      {listSummaries.map((summary) => {
        return (
          <div
            key={summary.id}
            className="summary"
            onClick={() => handleSelectList(summary.id)}
          >
            <span className="name">{summary.name} </span>
            <span className="count">({summary.item_count} items)</span>
            <span className="flex"></span>
            <span
              className="trash"
              onClick={(evt) => {
                evt.stopPropagation();
                handleDeleteToDoList(summary.id);
              }}
            >
              <BiSolidTrash />
            </span>
          </div>
        );
      })}
    </div>
  );
}

export default ListToDoLists;

Create a new file src/ListTodoLists.css with the following content:

.ListToDoLists .summary {
    border: 1px solid lightgray;
    padding: 1em;
    margin: 1em;
    cursor: pointer;
    display: flex;
}

.ListToDoLists .count {
    padding-left: 1ex;
    color: blueviolet;
    font-size: 92%;
}

Step 13: Create the ToDoList component

Create a new file src/ToDoList.js with the following content:

import "./ToDoList.css";
import { useEffect, useState, useRef } from "react";
import axios from "axios";
import { BiSolidTrash } from "react-icons/bi";

function ToDoList({ listId, handleBackButton }) {
  let labelRef = useRef();
  const [listData, setListData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get(`/api/lists/${listId}`);
      const newData = await response.data;
      setListData(newData);
    };
    fetchData();
  }, [listId]);

  function handleCreateItem(label) {
    const updateData = async () => {
      const response = await axios.post(`/api/lists/${listData.id}/items/`, {
        label: label,
      });
      setListData(await response.data);
    };
    updateData();
  }

  function handleDeleteItem(id) {
    const updateData = async () => {
      const response = await axios.delete(
        `/api/lists/${listData.id}/items/${id}`
      );
      setListData(await response.data);
    };
    updateData();
  }

  function handleCheckToggle(itemId, newState) {
    const updateData = async () => {
      const response = await axios.patch(
        `/api/lists/${listData.id}/checked_state`,
        {
          item_id: itemId,
          checked_state: newState,
        }
      );
      setListData(await response.data);
    };
    updateData();
  }

  if (listData === null) {
    return (
      <div className="ToDoList loading">
        <button className="back" onClick={handleBackButton}>
          Back
        </button>
        Loading to-do list ...
      </div>
    );
  }
  return (
    <div className="ToDoList">
      <button className="back" onClick={handleBackButton}>
        Back
      </button>
      <h1>List: {listData.name}</h1>
      <div className="box">
        <label>
          New Item:&nbsp;
          <input id={labelRef} type="text" />
        </label>
        <button
          onClick={() =>
            handleCreateItem(document.getElementById(labelRef).value)
          }
        >
          New
        </button>
      </div>
      {listData.items.length > 0 ? (
        listData.items.map((item) => {
          return (
            <div
              key={item.id}
              className={item.checked ? "item checked" : "item"}
              onClick={() => handleCheckToggle(item.id, !item.checked)}
            >
              <span>{item.checked ? "✅" : "⬜️"} </span>
              <span className="label">{item.label} </span>
              <span className="flex"></span>
              <span
                className="trash"
                onClick={(evt) => {
                  evt.stopPropagation();
                  handleDeleteItem(item.id);
                }}
              >
                <BiSolidTrash />
              </span>
            </div>
          );
        })
      ) : (
        <div className="box">There are currently no items.</div>
      )}
    </div>
  );
}

export default ToDoList;

Create a new file src/ToDoList.css with the following content:

.ToDoList .back {
    margin: 0 1em;
    padding: 1em;
    float: left;
}

.ToDoList .item {
    border: 1px solid lightgray;
    padding: 1em;
    margin: 1em;
    cursor: pointer;
    display: flex;
}

.ToDoList .label {
    margin-left: 1ex;
}

.ToDoList .checked .label {
    text-decoration: line-through;
    color: lightgray;
}

Step 14: Update the main CSS file

Replace the content of src/index.css with the following:

html, body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 12pt;
}

input, button {
  font-size: 1em;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.box {
    border: 1px solid lightgray;
    padding: 1em;
    margin: 1em;
}

.flex {
  flex: 1;
}

This concludes Part 3 of the tutorial, where we set up the React frontend for our FARM stack todo application. We've created the main App component, the ListTodoLists component for displaying all todo lists, and the ToDoList component for individual todo lists. In the next part, we'll focus on running and testing the application.

Running and Testing the Application

Step 18: Run the application using Docker Compose

1. Make sure you have Docker and Docker Compose installed on your system

2. Open a terminal in the root directory of your project (farm-stack-todo)

3. Build and start the containers:

docker-compose up --build

4. Once the containers are up and running, open your web browser and go to http://localhost:8000

Step 19: Stopping the application

1. If you're running the application without Docker:

   • Stop the React development server by pressing Ctrl+C in its terminal

   • Stop the FastAPI server by pressing Ctrl+C in its terminal

   • Stop the MongoDB server by pressing Ctrl+C in its terminal

2. If you're running the application with Docker Compose:

   • Press Ctrl+C in the terminal where you ran docker-compose up

   • Run the following command to stop and remove the containers:

     docker-compose down

```

Congratulations! You have successfully built and tested a FARM stack todo application. This application demonstrates the integration of FastAPI, React, and MongoDB in a full-stack web application.

Here are some potential next steps to enhance your application:

1. Add user authentication and authorization

2. Implement data validation and error handling

3. Add more features like due dates, priorities, or categories for todo items

4. Improve the UI/UX with a more polished design

5. Write unit and integration tests for both frontend and backend

6. Set up continuous integration and deployment (CI/CD) for your application

Remember to keep your dependencies updated and follow best practices for security and performance as you continue to develop your application.

Conclusion and Next Steps

Congratulations on completing this comprehensive FARM stack tutorial! By building this todo application, you've gained hands-on experience with some of the most powerful and popular technologies in modern web development. You've learned how to create a robust backend API with FastAPI, build a dynamic and responsive frontend with React, persist data with MongoDB, and containerize your entire application using Docker. This project has demonstrated how these technologies work together seamlessly to create a full-featured, scalable web application.

To get the most out of this guide, you should have a background in JavaScript, understand how Mongoose works, and know Object-Oriented Programming basics.

Here's what we'll cover:

1. What is a Mongoose Schema?

2. Discriminator

3. Statics

4. Methods

5. Query Builder

6. Hooks

7. Summary

What is a Mongoose Schema?

Mongoose schemas provide a structured way to model data in a MongoDB database, allowing you to define the properties and behavior of the documents. Schemas serve as a blueprint for a document that gets saved in the database. They enables developers to enforce data integrity and work with MongoDB in a more intuitive and organized manner.

Within a MongoDB collection, a schema outlines the fields of the documents, their data types, validation rules, default values, constraints, and more.

Programmatically, a Mongoose schema is a JavaScript object. Actually, it is an instance of a built-in class called Schema inside the mongoose module. For this reason, you can add more methods to its prototype. This will help you implement many features as middleware, methods, statics, and more. You will learn about some of them in this tutorial.

Features you'll learn how to implement:

• Discriminator

• Statics

• Methods

• Query Builder

• Hooks

Discriminator

A discriminator is a feature that enables you to create multiple models (subtypes) that inherit from a base model (parent). This happens by defining a base schema and then extending it with extra fields specific to each subtype or each child schema.

All documents, regardless of their specific model, are stored in the same MongoDB collection. This keeps your data organized in a single collection while allowing for flexible querying and data management. Also, each document includes a special field that indicates its specific model type, allowing Mongoose to distinguish between the different subtypes.

How to use discriminator:

1. Start by defining a base schema, which will have the common fields among the subtypes. After that, create a model from it.

    import mongoose from 'mongoose';
   
    const baseSchema = new mongoose.Schema({
        name: { type: String, required: true },
    }, { discriminatorKey: 'kind' }; // defaults to '__t');
   
    const BaseModel = mongoose.model('Base', baseSchema);
   

2. Create the subtypes that extend the base schema by defining the discriminator for each one.

    const catSchema = new mongoose.Schema({
        meow: { type: Boolean, default: true }
    });
    // subtype
    const Cat = BaseModel.discriminator('Cat', catSchema);
   
    const dogSchema = new mongoose.Schema({
        bark: { type: Boolean, default: true }
    });
    // subtype
    const Dog = BaseModel.discriminator('Dog', dogSchema);
   

3. You can then create documents in the regular way. All the documents will be stored in the same collection, but each has its own type depending on its subtype model.

    const fluffy = await Cat.create({ name: 'Fluffy' });
    const rover = await Dog.create({ name: 'Rover' });
   

discriminator use case:

Let's say that you're building a multi-user Ecommerce web application which accommodates three main user roles: admins, clients, and sellers. Each of these roles plays a crucial part in the ecosystem of online shopping.

If you try to build a class for each role, you'll find that all the three have common fields and methods. You may decide to create a parent schema (user) and some other children schemas (client, seller, admin) that inherit from it.

You can use the discriminator to achieve this.

In your user.model.js file, add the following code:

import mongoose from "mongoose";

const userSchema = mongoose.Schema(
  {
    name: String,
    profilePic: String,
    email: String,
    password: String,
    birthDate: Date,
    accountAcctivated: { type: Boolean, default: false },
  },
  {
    timestamps: true,
    discriminatorKey: "role",
  }
);

const User = mongoose.model("User", userSchema);
export default User;

Now you have the base model (User) from which other subtypes will inherit. In this parent schema, you define the common fields that all users will share regardless of their roles.

In your client.model.js file:

import mongoose from "mongoose";
import User from "./user.model.js";

const clientSchema = mongoose.Schema(
  {
    products: Array,
    address: String,
    phone: String,
  }
);

const Client = User.discriminator("Client", clientSchema);
export default Client;

In your seller.model.js file:

import mongoose from "mongoose";
import User from "./user.model.js";

export const sellerSchema = mongoose.Schema(
  {
    rating: Number,
    businessType: { type: String, enum: ["individual", "corporation"] },
  }
);

const Seller = User.discriminator("Seller", sellerSchema);
export default Seller;

In your admin.model.js file:

import mongoose from "mongoose";
import User from "./user.model.js";

export const adminSchema = mongoose.Schema(
  {
    permissions: Array,
    assignedTasks: Array,
    department: String,
  }
);

const Admin = User.discriminator("Admin", adminSchema);
export default Admin;

The subtypes or children will be the Client, Seller, and Admin. In each subtype schema, you should add any extra fields or behaviors specific to this subtype only. By creating the child model using the discriminator, the child model will inherit all the fields and methods of its parent model User.

So the previous code will create a user collection in the database with each document having a role field either Client, or Seller, or Admin. All documents are now sharing the parent (user) fields, and depending on the role of each document, each has another extra field.

Although all the documents will be saved in one single collection, models are fully separated while coding. What does this mean?

For instance, If you need to retrieve all clients from the User collection, you should write Client.find({}). This statement uses the discriminator key to find all documents whose role is Client. This way, any operations or queries that refer to one of the child models will still be written separately from the parent model.

Note: Before diving into the next sections, just keep in mind that any statics, methods, query builders, or hooks should be defined before creating the model itself (that is, before const User = mongoose.model("User", userSchema);).

Statics

Statics are useful for defining functions that operate on the model level. They allow you to define reusable functions for operations related to the entire model. They help encapsulate logic that applies to the model rather than individual documents, making your code cleaner, more organized and maintainable

Methods like find, findOne, findById and others all are methods attached to the model. By using the statics property of Mongoose schemas, you will be able to build your own model method.

Statics are powerful. By using them, you can encapsulate complex queries that you might want to reuse. Also, you can create statics for operations that modify or aggregate data, such as counting documents or finding documents based on specific criteria.

statics use case

Statics are easy to build. You define a static method on your schema using the statics object.

In your user.model.js file, add these static methods, countUsers and findByEmail:

// model method
userSchema.statics.countUsers = function () {
    return this.countDocuments({});
};

// model method
userSchema.statics.findByEmail = async function (email) {
  return await this.findOne({ email });
};

Inside any static method, this refers to the model itself. In this example, this in this.findOne({ email }) refers to the User model.

Example usage:

const user = await User.findByEmail("foo@bar.com");
//or
const client = await Client.findByEmail("foo@bar.com");
//or
const seller = await Seller.findByEmail("foo@bar.com");
//or
const admin = await Admin.findByEmail("foo@bar.com");

When you call the static method on your model, the method gets called and this is replaced by the model you called the statics on. This line performs a query to find a single document in the MongoDB collection where the email field matches the provided email argument.

Methods

Methods are functions that you can define on a schema and that can be called on instances of documents created from this schema. They help encapsulate logic within the document itself, making your code cleaner and more modular.

By using instance methods, you can easily interact with and manipulate the data associated with specific documents.

methods use case

You can define methods on the schema using the methods object.

In your user.model.js file, add a document method through which you can check the password of a user:

// instance or document method
userSchema.methods.getProfile = function () {
    return `${this.name} (${this.email})`;
};

// instance or document method
userSchema.methods.checkPassword = function (password) {
    return password === this.password ? true : false;
};

Inside any document method, this refers to the document itself. In this example, this in this.password refers to the user document at which the method will get called on. This means that you can access all the fields of this document. This is so valuable because you can retrieve, modify, and check for anything related to this document.

Example usage:

const client = await Client.findById(...)
client.checkPassword("12345")
//or
const seller = await Seller.findById(...)
seller.checkPassword("12345")
//or
const admin = await Admin.findById(...)
admin.checkPassword("12345")

Since methods are instance-level functions, they are called on the documents. await Client.findById(...) will return a document that has all the built-in methods as well as your own predefined methods checkPassword and getProfile. So by calling, for example client.checkPassword("12345"), the this keyword in the checkPassword function definition will get replaced with the client document. This in turn will compare the user password with the password saved earlier in the database.

Query Builder

A query builder in Mongoose is a custom method that you can define on the query object to simplify and encapsulate common query patterns. These query builders allow you to create reusable and readable query logic, making it easier to work with your data.

One of the most valuable usages of query builders is chaining. They can be chained with other query builders that you've built or with standard query methods like find, sort, and so on.

Query builder use case

You define query builders by adding them to the query property of a Mongoose schema.

In your user.model.js file, add a query helper method that lets you implement pagination.

// query helper
userSchema.query.paginate = function ({ page, limit }) {
    // some code
    const skip = limit * (page - 1);
    return this.skip(skip).limit(limit);
};

To implement pagination, you need two important variables: first, the page number, and second, the number of items you will retrieve per page.

To query the database for a specific count of documents, you will always use the skip and limit built-in query methods in mongoose. skip is used to set a cursor after a certain number of documents, after which the query will get implemented. limit is used to retrieve a specific number of documents.

Inside any query builder method, this refers to the query itself. And since query builders are chainable, you can call any of them after each other.

Finally, any query builder method should return a mongoose query object, which is why you must write return this.skip(skip).limit(limit).

Example usage:

const results = await Client.find().paginate({ page: 2, limit: 5 });
//or
const results = await Seller.find().paginate({ page: 2, limit: 5 });
//or
const results = await Admin.find().paginate({ page: 2, limit: 5 });

You can then call it on any query, and await Client.find().paginate({ page: 2, limit: 5 }) will invoke the paginate function and replace the this keyword with Client.find() using the query builder.

You can implement pagination with certain conditions, but you'll always call skip and limit. By defining the paginate query builder you won't repeat yourself and you'll be able to encapsulate the logic in one single function.

Hooks

Hooks (also known as middleware) are functions that are executed at specific points in the lifecycle of a document. They allow you to add custom behavior before or after certain operations, such as saving, updating, or removing documents.

Types of Hooks

• Pre Hooks: Executed before an operation.

• Post Hooks: Executed after an operation.

Hooks use case

In your user.model.js file, add a post save middleware through which you can send an email for account activation once the user document is saved in the database.

// post hook
userSchema.post("save", async function (doc, next) {
  // send email logic
  // if succeeded
  return next();
  // if failed
  return next(new Error("Failed to send email!"));
});

The callback function will get invoked once you create a user through model.create() or any time you call save() method on the user document.

In this this example, if you need to avoid sending emails on save, you should write a condition to be sure that this save is for a new user only. You can write something like if (doc.createdAt.getTime() === doc.updatedAt.getTime()).

Summary

In this overview of Mongoose features, we've explored four key concepts: discriminators, statics, methods, and hooks.

Discriminators allow you to create multiple models that share a common schema enabling different document types to be stored in a single collection. This facilitates data management and querying.

Statics are model-level methods that provide reusable functionality applicable to the entire model. They encapsulate complex queries and data manipulation logic, helping to keep your codebase clean and maintainable.

Methods are instance-level functions that operate on individual document instances. They allow for custom behaviors and data manipulations specific to each document, so you can modify the document’s data in a specific way, such as formatting or calculating values based on its fields.

Hooks (or middleware) enable you to run functions at specific points in the document lifecycle, such as before or after saving, updating or deleting a document. This is useful for implementing validation, logging, or any other side effects related to database operations.

Together, these features enhance the versatility and organization of your Mongoose models, making it easier to build robust and maintainable applications with MongoDB.

Here can will find a repository where you can learn more about Mongoose schemas and use cases.

In this article, I will guide you through the process of getting your MongoDB URL so you can connect your application effectively. By the end of this tutorial, you’ll have a clear understanding of how to retrieve your MongoDB URL.

Let's get started! 🚀

Step 1: Search for MongoDB or Visit their Website

To begin, head to the MongoDB website.

Step 2: Click on the Sign In button on their website.

This will redirect you to the MongoDB login page. If you don’t have an account yet, you can create one by selecting the Sign Up option instead. Since I already have an account, I will log in to access my MongoDB dashboard.

Step 3: Access the Dashboard

Once you log in, you'll have access to the dashboard. But first, you need to create a project folder.

Why Do You Need a Project Folder?

This is for organizational purposes, helping you keep track of which projects you are working on.

To create a project folder

• Click on the Projects section at the top, indicated by a folder icon. This will reveal a dropdown menu.

• From the dropdown, click on New Project. This will redirect you to a page where you can create your new project.

• Click the Next button to proceed to the project creation page.

After creating your project, you will be redirected back to your dashboard, where you will see your newly created project folder. You can now start working on this specific project.

Step 4: Creating a Cluster

To obtain the MongoDB connection URL, it is essential to create a Cluster.

What is a cluster?

A cluster in MongoDB is a group of servers that work together to store and manage your data, providing high availability and scalability.

To create a cluster:

1. On your dashboard, click on the Clusters button as shown in the picture of Step 3 above.

2. Next, this will direct you to a page called "Deploy your cluster" where you get to create your cluster.

Step 5: Create a Username for Your Connection URL

After creating a cluster, you will be taken to a page where you need to create a username and password for the connection URL. The password can be autogenerated, or you can create your own.

Why Do I Have to Create a Username?

Creating a username is essential for managing access to your MongoDB cluster. A username, along with a password, ensures that only authorized users can access your database. This adds a layer of security, protecting your data from unauthorized access.

Benefits of creating a username:

• Security: Ensures that your database is only accessible to those with the correct credentials.

• Management: You can track who is accessing your database and manage permissions.

• Accountability: Helps in auditing and monitoring activities within your database.

Step 6: Auto Generation of The MongoDB Connection URL

Once you click the Create User button, you will be redirected to a page where your connection URL is automatically generated. Copy this URL and paste it into your .env file to establish a connection to your database. Alternatively, you can paste it directly into your app.js or server.js file, as I explained in my previous article.

Feel free to let me know if you need assistance!

Conclusion

By following the steps outlined in this article, you should now understand how to obtain your MongoDB connection URL. Remember, creating a username and password for your database access is crucial for ensuring the security and management of your data.

If you encounter any challenges along the way, don't hesitate to refer back to this guide, ask questions or better still consult the official MongoDB documentation for further assistance.

If you found this article helpful, share it with others who may also find it interesting.

Stay updated with my projects by following me on Twitter, LinkedIn and GitHub.

Thank you for reading💖.

In this article, you will learn how you can use Entity Framework Core with MongoDB. This article covers the basics, explains the benefits, and provides a step-by-step tutorial. Whether you're new to MongoDB or Entity Framework Core, or just looking to integrate these tools into your .NET projects, this guide will help you bridge the gap between relational and NoSQL databases.

The article starts with a brief introduction to MongoDB as well as an introduction to Microsoft's Entity Framework Core. Then, it covers how to use the MongoDB EF Core Provider. After going though technical details with some basic examples, you will create a full project with MongoB and Entity Framework Core so you can see how everything works together. The project will use MongoDB Atlas sample data to create a Restaurant reservation system.

There is also a video version of this article that you can watch on the freeCodeCamp.org YouTube channel.

Intro to MongoDB

MongoDB is a popular NoSQL database designed to handle large volumes of data and provide high performance, scalability, and flexibility. Unlike traditional relational databases, MongoDB stores data in flexible, JSON-like documents. This document-oriented approach allows for the storage of complex data structures in a more natural and intuitive way.

In MongoDB, data is stored in collections, which are similar to tables in relational databases but without a fixed schema. This means you can have documents with different structures in the same collection. This flexibility is one of the key advantages of using MongoDB, especially when dealing with unstructured or semi-structured data.

Let's take a look at an example of a MongoDB document. Imagine we have a collection called users that stores information about users in an application. Here is what a typical document might look like:

{
    "_id": "12345",
    "name": "John Doe",
    "email": "johndoe@example.com",
    "age": 30,
    "address": {
        "street": "123 Main St",
        "city": "Anytown",
        "state": "CA",
        "zip": "12345"
    },
    "hobbies": ["reading", "travelling", "coding"]
}

In this document, we have various fields such as name, email, age, and address. The address field itself is an embedded document containing multiple sub-fields like street, city, state, and zip. Additionally, the hobbies field is an array of strings.

While this looks like JSON, MongoDB stores data in a binary format called BSON (Binary JSON). BSON extends the JSON model to provide additional data types, such as integers, floats, dates, and binary data. This binary format is optimized for performance and flexibility, allowing MongoDB to efficiently store and retrieve data.

Another important feature of MongoDB is its ability to scale horizontally. This means you can distribute your data across multiple servers, making it easier to manage large datasets and ensure high availability. MongoDB also supports rich queries, indexing, and aggregation, making it a powerful tool for a wide range of applications.

For example, you can perform a query to find all users who live in a specific city:

db.users.find({ "address.city": "Anytown" })

Or you can find users who have a specific hobby:

db.users.find({ "hobbies": "coding" })

MongoDB is widely used in various industries, from e-commerce and content management to real-time analytics and Internet of Things (IoT) applications. Its flexibility and scalability make it an excellent choice for modern applications that need to handle diverse and dynamic data.

Now that we have a basic understanding of what MongoDB is and why it's popular, let's move on to another essential tool in our tech stack: Microsoft's Entity Framework Core.

Intro to Microsoft's Entity Framework Core

Entity Framework Core, often abbreviated as EF Core, is a modern object-database mapper for .NET. It allows developers to work with a database using .NET objects, eliminating the need for most of the data-access code that developers usually need to write.

EF Core is a lightweight, extensible, and cross-platform version of the popular Entity Framework (EF) data access technology. It supports a variety of database engines, including SQL Server, SQLite, and MongoDB.

One of the main benefits of using EF Core is that it enables developers to work with data in a more intuitive and object-oriented way. Instead of writing raw SQL queries, you can interact with your database using LINQ (Language Integrated Query) and strongly-typed classes.

Let's take a look at a basic example. Imagine we have a Product class:

public class Product
{
    public int ProductId { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

This is pretty simple with just three fields. Using EF Core, you can create a context class that represents a session with the database and includes a DbSet for each entity type you want to query or save:

public class AppDbContext : DbContext
{
    public DbSet<Product> Products { get; set; }

    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)   
    {
        optionsBuilder.Use<Your_SQL_Database_function>("YourConnectionStringHere");
    }
}

This code defines a class named AppDbContext that inherits from Entity Framework Core's DbContext class. This class is used to interact with the database. Inside this class, there is a DbSet<Product> property called Products, which represents a collection of Product entities and corresponds to a table named Products in the database. The OnConfiguring method is overridden to configure the database connection, you can specify various databases as the database provider. The method uses an optionsBuilder to set up the connection with a placeholder for the actual database connection string. This connection string obviously should be replaced with the real one containing the necessary details to connect to the database. When you create an instance of AppDbContext in the application, it uses this configuration to perform operations like querying or saving Product entities in the Products table.

With this setup, you can perform CRUD (Create, Read, Update, Delete) operations using EF Core. For example, to add a new product to the database, you can use this code.

using (var context = new AppDbContext())
{
    var product = new Product { Name = "Laptop", Price = 999.99M };
    context.Products.Add(product);
    context.SaveChanges();
}

This code demonstrates how to add a new product to the database using Entity Framework Core. An instance of AppDbContext is created, and within this context, a new Product object with the name "Laptop" and price 999.99 is instantiated. This new product is then added to the Products collection managed by the AppDbContext. Finally, the SaveChanges method is called to save the changes to the database, effectively inserting the new product into the Products table.

To query products, you can use LINQ:

using (var context = new AppDbContext())
{
    var products = context.Products.Where(p => p.Price > 500).ToList();
    foreach (var product in products)
    {
        Console.WriteLine($"Product: {product.Name}, Price: {product.Price}");  
    }
}

This code demonstrates how to query the database using Entity Framework Core. An instance of AppDbContext is created, and within this context, a query is made to retrieve all products with a price greater than 500. The results are stored in a list called products. Then, a loop iterates through each product in the list, printing the name and price of each product to the console.

EF Core takes care of translating these LINQ queries into the appropriate SQL commands for your database, making data access simpler and more maintainable.

EF Core also supports advanced features like change tracking, lazy loading, and migrations, which help you manage database schema changes over time.

In summary, EF Core is a powerful ORM that simplifies data access in .NET applications by allowing you to work with your data using .NET objects and LINQ. Its support for multiple database engines and its extensibility make it a versatile choice for a wide range of applications.

Next, we'll see how the MongoDB EF Core Provider bridges the gap between MongoDB and EF Core, allowing us to use the familiar EF Core patterns with a MongoDB database.

How the MongoDB EF Core Provider Bridges the Gap

The MongoDB Entity Framework Core Provider is a tool that enables developers to use MongoDB with Entity Framework Core (EF Core), combining the flexibility of MongoDB with the familiar API and design patterns of EF Core. This provider allows you to work with MongoDB using the same code-first and LINQ query methodologies that you would use with relational databases, streamlining development and reducing the learning curve for those already familiar with EF Core.

The MongoDB EF Core Provider bridges the gap between MongoDB and EF Core by supporting basic CRUD operations, LINQ queries, and embedded documents, among other features. Here are some key capabilities:

1. Code-First Workflows: You can define your data models in C# and use EF Core to generate the MongoDB schema, rather than starting with the database schema and generating code from it. This is particularly useful for developers who prefer to manage their database structure through code.

2. CRUD Operations: The provider supports basic create, read, update, and delete operations. For example, you can add a new record to the database using the same code we saw earlier:

    using (var context = new AppDbContext())
    {
        var product = new Product { Name = "Laptop", Price = 999.99M };
        context.Products.Add(product);
        context.SaveChanges();
    }
   

3. LINQ Query Support: You can use LINQ to perform queries against MongoDB, allowing you to leverage your existing knowledge of C# and .NET to interact with the database.

    using (var context = new AppDbContext())
    {
        var products = context.Products.Where(p => p.Price > 500).ToList();
        foreach (var product in products)
        {
            Console.WriteLine($"Product: {product.Name}, Price: {product.Price}");
        }
    }
   

4. Change Tracking: EF Core’s change tracking capabilities are supported, enabling automatic detection and saving of changes made to your data entities.

5. Embedded Documents: The provider supports embedded documents, allowing you to store related data within a single document, which is a common pattern in MongoDB.

6. Class Mapping and Serialization: Your C# classes are mapped to MongoDB collections, with support for various data types and serialization settings to ensure that data is stored correctly.

Data Modeling and CRUD Operations Using MongoDB Atlas

Now we'll go over a quick example on how to use the MongoDB EF Core Provider. But soon, we'll create a full project in Visual Studio Code so you can see everything in context.

In this section, we will explore how to define data models and perform CRUD (Create, Read, Update, Delete) operations using the MongoDB Entity Framework Core (EF) Provider with MongoDB Atlas. This integration allows you to leverage the flexibility of MongoDB with the familiar patterns of EF Core.

Setting Up Your Environment

To get started, you need to add the necessary NuGet packages to your project:

dotnet add package MongoDB.EntityFrameworkCore

The MS EF Core Package and the MongoDB C# Driver are added as a dependency when you add the MongoDB EF Core provider package. These packages allow your application to interact with MongoDB through EF Core, using the same context and entity definitions you would use with a relational database.

Setting Up MongoDB Atlas

Before you can perform CRUD operations, you need to set up a MongoDB Atlas cluster and connect your application to it.

Here are the steps. Note that we'll be going over these in detail when we create the project soon.

1. Create a MongoDB Atlas Account: Sign up for a free account at MongoDB Atlas.

2. Create a Cluster: Set up a new cluster. MongoDB Atlas provides a free tier that is perfect for development and small-scale applications.

3. Get Connection String: Obtain your connection string from the MongoDB Atlas dashboard. It will look something like this:

    mongodb+srv://<username>:<password>@cluster0.mongodb.net/myFirstDatabase?retryWrites=true&w=majority
   

Defining the Data Model

Define a class to use as a model for your entity. For this example, we'll create a Customer class:

public class Customer
{
    public ObjectId Id { get; set; }
    public String Name { get; set; }
    public String Order { get; set; }
}

This Customer class represents the structure of the documents stored in the MongoDB collection.

Create a DB Context Class

To begin using Entity Framework Core, create a context class that derives from DBContext. TheDbContext derived class instance represents a database session and is used to query and save instances of your entities.

The DBContext class exposes DBSet properties that specify the entities you can interact with while using that context.

This example creates an instance of a DBContext derived class and specifies the Customer object as a DBSet property:

public class MyDbContext : DbContext
{
    public DbSet<Customer> Customers { get; init; }

    public MyDbContext(DbContextOptions options)
        : base(options)
    {
    }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        base.OnModelCreating(modelBuilder);
        modelBuilder.Entity<Customer>().ToCollection("customers");
    }
}

Code-First Workflow

With the MongoDB EF Provider, you can use a code-first workflow. This means you define your classes first, and EF Core will handle the creation and management of the underlying MongoDB schema. This is particularly useful for MongoDB, which does not enforce a schema, allowing for flexible and dynamic data structures.

Use MongoDB

Once we've created a DBContext class, we need to construct a DbContextOptionsBuilder object and call its UseMongoDB() method. This method takes two parameters: a MongoClient instance and the name of the database that stores the collections you are working with.

The UseMongoDB() method returns a DbContextOptions object. Pass the Options property of this object to the constructor for your DBContext class.

var mongoClient = new MongoClient("<Your MongoDB Connection URI>");

var dbContextOptions =
    new DbContextOptionsBuilder<MyDbContext>().UseMongoDB(mongoClient, "<Database Name");  

var db = new MyDbContext(dbContextOptions.Options);

CRUD Operations

Now let's see how to code the CRUD operations. We'll just focus on each operation individually.

Create Operation

To create a new document in MongoDB, you use the Add method on the DbSet and call SaveChanges. This is an example of creating a new customer:

using (var context = new MyDbContext(options))
{
    var customer = new Customer { Name = "Beau Carnes", Order = "Laptop" };
    context.Customers.Add(customer);
    context.SaveChanges();
}

This code creates a new Customer instance and adds it to the Customers collection. The SaveChanges method saves the new customer to the MongoDB database.

Read Operation

To read documents from the MongoDB collection, you can use LINQ queries on the DbSet. This is an example of retrieving all customers:

using (var context = new MyDbContext(options))
{
    var customers = context.Customers.ToList();
    foreach (var customer in customers)
    {
        Console.WriteLine($"Customer: {customer.Name}, Order: {customer.Order}"); 
    }
}

This code retrieves all customers from the Customers collection and prints their details.

Update Operation

To update an existing document, you retrieve the document, modify its properties, and call SaveChanges. This is an example of updating a customer's order:

using (var context = new MyDbContext(options))
{
    var customer = context.Customers.FirstOrDefault(c => c.Name == "Beau Carnes"); 
    if (customer != null)
    {
        customer.Order = "Smartphone";
        context.SaveChanges();
    }
}

This code finds the customer named "Beau Carnes" and updates their order to "Smartphone".

Delete Operation

To delete a document, you retrieve the document, remove it from the DbSet, and call SaveChanges. This is an example of deleting a customer:

using (var context = new MyDbContext(options))
{
    var customer = context.Customers.FirstOrDefault(c => c.Name == "Beau Carnes"); 
    if (customer != null)
    {
        context.Customers.Remove(customer);
        context.SaveChanges();
    }
}

This code finds the customer named "Beau Carnes" and deletes them from the Customers collection.

Change Tracking

EF Core's change tracking capabilities are fully supported, enabling efficient updates to documents. When you modify an entity and call SaveChanges, EF Core will generate the necessary MongoDB commands to update only the changed fields.

By using the MongoDB EF Provider, you can seamlessly integrate MongoDB's flexible document model with EF Core's robust ORM capabilities, providing a powerful toolset for .NET developers to build modern applications.

Tutorial

Now let's put everything together and create a restaurant reservation system.

Prerequisites

In order to follow along with this tutorial, you are going to need a few things:

• .NET 7.0.

• Basic knowledge of ASP.NET MVC and C#.

• Free MongoDB Atlas account and free tier cluster.

Create the project

ASP.NET Core is a very flexible web framework, allowing you to scaffold out different types of web applications that have slight differences in terms of their UI or structure. For this tutorial, we are going to create an MVC project that will make use of static files and controllers. There are other types of front end you could use, such as React, but MVC with .cshtml views is the most commonly used. To create the project, we are going to use the .NET CLI:

dotnet new mvc -o RestRes

Because we used the CLI, although easier, it only creates the csproj file and not the solution file which allows us to open it in Visual Studio, so we will fix that.

cd RestRes
dotnet new sln
dotnet sln .\RestRes.sln add .\RestRes.csproj

Add the NuGet packages

Now that we have the new project created, we will want to go ahead and add the required NuGet packages. Either using the NuGet Package Manager or using the .NET CLI command below, add the MongoDB MongoDB.EntityFrameworkCore package.

dotnet add package MongoDB.EntityFrameworkCore

Create the models

Before we can start implementing the new packages we just added, we need to create the models that represent the entities we want in our restaurant reservation system that will of course be stored in MongoDB Atlas as documents. In the following subsections, we will create the following models:

• Restaurant

• Reservation

• MongoDBSettings

Restaurant

First, we need to create our restaurant model that will represent the restaurants that are available to be reserved in our system.

1. Create a new file in the Models folder called Restaurant.cs.

2. Add the following code:

using MongoDB.Bson;
using MongoDB.EntityFrameworkCore;
using System.ComponentModel.DataAnnotations;


namespace RestRes.Models
{
    [Collection("restaurants")]    
    public class Restaurant
    {

        public ObjectId Id { get; set; }

        [Required(ErrorMessage = "You must provide a name")]
        [Display(Name = "Name")]
        public string? name { get; set; }


        [Required(ErrorMessage = "You must add a cuisine type")]
        [Display(Name = "Cuisine")]
        public string? cuisine { get; set; }


        [Required(ErrorMessage = "You must add the borough of the restaurant")]
        public string? borough { get; set; }

    }
}

The collection attribute before the class tells the application what collection inside the database we are using. This allows us to have differing names or capitalization between our class and our collection should we want to.

Reservation

We also need to create a reservation class to represent any reservations we take in our system.

1. Create a new file inside the Models folder called Reservation.cs.

2. Add the following code to it:

using MongoDB.Bson;
using MongoDB.EntityFrameworkCore;
using System.ComponentModel.DataAnnotations;


namespace RestRes.Models
{
    [Collection("reservations")]
    public class Reservation
    {
        public ObjectId Id { get; set; }


        public ObjectId RestaurantId { get; set; }


        public string? RestaurantName { get; set; }

        [Required(ErrorMessage = "The date and time is required to make this reservation")]
        [Display(Name = "Date")]
        public DateTime date { get; set; }

    }
}

MongoDBSettings

Although it won’t be a document in our database, we need a model class to store our MongoDB-related settings so they can be used across the application.

1. Create another file in Models called MongoDBSettings.cs.

2. Add the following code:

namespace RestRes.Models
{
  public class MongoDBSettings
  {
      public string AtlasURI { get; set; }
      public string DatabaseName { get; set; }
  }
}

Setting up EF Core

This is the exciting part. We are going to start to implement EF Core and take advantage of the new MongoDB Provider. If you are used to working with EF Core already, some of this will be familiar to you.

RestaurantReservationDbContext

1. Create a Services folder, and the create a file called RestaurantReservationDbContext.cs.

2. Replace the code inside the namespace with the following:

using Microsoft.EntityFrameworkCore;
using RestRes.Models;

namespace RestRes.Services
{
    public class RestaurantReservationDbContext : DbContext
    {
        public DbSet<Restaurant> Restaurants { get; init; }      


        public DbSet<Reservation> Reservations { get; init; }


        public RestaurantReservationDbContext(DbContextOptions options)
        : base(options)
        {
        }


        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            base.OnModelCreating(modelBuilder);


            modelBuilder.Entity<Restaurant>();
            modelBuilder.Entity<Reservation>();
        }
    }
}

If you are used to EF Core, this will look familiar. The class extends the DbContext and we create DbSet properties that store the models that will also be present in the database. We also override the OnModelCreating method. You may notice that unlike when using SQL Server, we don’t call .ToTable(). We could call ToCollection instead but this isn’t required here as we specify the collection using attributes on the classes.

Add connection string and database details to appsettings

Earlier, we created a MongoDBSettings model, and now we need to add the values that the properties map to into our appsettings.

1. In both appsettings.json and appsettings.Development.json, add the following new section:

     "MongoDBSettings": {
       "AtlasURI": "mongodb+srv://<username>:<password>@<url>",
       "DatabaseName": "restaurants"
     }
   

2. Replace the Atlas URI with your own connection string from Atlas.

Updating program.cs

Now we have configured our models and DbContext, it is time to add them to our program.cs file.

After the existing line builder.Services.AddControllersWithViews();, add the following code:

var mongoDBSettings = builder.Configuration.GetSection("MongoDBSettings").Get<MongoDBSettings>();
builder.Services.Configure<MongoDBSettings>(builder.Configuration.GetSection("MongoDBSettings"));

builder.Services.AddDbContext<RestaurantReservationDbContext>(options =>
options.UseMongoDB(mongoDBSettings.AtlasURI ?? "", mongoDBSettings.DatabaseName ?? ""));

Creating the services

Now, it is time to add the services we will use to talk to the database via the RestaurantBookingDbContext we created. For each service, we will create an interface and the class that implements it.

IRestaurantService and RestaurantService

The first interface and service we will implement is for carrying out the CRUD operations on the restaurants collection. This is known as the repository pattern. You may see people interact with the DbContext directly. But most people use this pattern, which is why we are including it here.

1. If you haven’t already, create a Services folder to store our new classes.

2. Create an IRestaurantService interface and add the following code for the methods we will implement:

using MongoDB.Bson;
using RestRes.Models;

namespace RestRes.Services
{
    public interface IRestaurantService
    {
        IEnumerable<Restaurant> GetAllRestaurants();
        Restaurant? GetRestaurantById(ObjectId id);

        void AddRestaurant(Restaurant newRestaurant);

        void EditRestaurant(Restaurant updatedRestaurant);

        void DeleteRestaurant(Restaurant restaurantToDelete);
    }
}

1. Create a RestaurantService class file.

2. Update the RestaurantService class declaration so it implements the IRestaurantService we just created:

using Microsoft.EntityFrameworkCore;
using MongoDB.Bson;
using MongoDB.Driver;
using RestRes.Models;

namespace RestRes.Services
{
  public class RestaurantService : IRestaurantService
  {
    private readonly RestaurantReservationDbContext _restaurantDbContext;
    public RestaurantService(RestaurantReservationDbContext restaurantDbContext)
    {
        _restaurantDbContext = restaurantDbContext;
    }

    public void AddRestaurant(Restaurant restaurant)
    {
      _restaurantDbContext.Restaurants.Add(restaurant);

      _restaurantDbContext.ChangeTracker.DetectChanges();
      Console.WriteLine(_restaurantDbContext.ChangeTracker.DebugView.LongView);

      _restaurantDbContext.SaveChanges();
    }

    public void DeleteRestaurant(Restaurant restaurant)
    {
      var restaurantToDelete = _restaurantDbContext.Restaurants.Where(c => c.Id == restaurant.Id).FirstOrDefault();

      if(restaurantToDelete != null) {
          _restaurantDbContext.Restaurants.Remove(restaurantToDelete);
        _restaurantDbContext.ChangeTracker.DetectChanges();
          Console.WriteLine(_restaurantDbContext.ChangeTracker.DebugView.LongView);
          _restaurantDbContext.SaveChanges();
          }
        else {
            throw new ArgumentException("The restaurant to delete cannot be found.");
        }
    }

    public void EditRestaurant(Restaurant restaurant)
    {
          var restaurantToUpdate = _restaurantDbContext.Restaurants.FirstOrDefault(c => c.Id == restaurant.Id);

        if(restaurantToUpdate != null)
        {                
            restaurantToUpdate.name = restaurant.name;
            restaurantToUpdate.cuisine = restaurant.cuisine;
            restaurantToUpdate.borough = restaurant.borough;

            _restaurantDbContext.Restaurants.Update(restaurantToUpdate);

            _restaurantDbContext.ChangeTracker.DetectChanges();
            Console.WriteLine(_restaurantDbContext.ChangeTracker.DebugView.LongView);

            _restaurantDbContext.SaveChanges();

        }
      else
        {
            throw new ArgumentException("The restaurant to update cannot be found. ");
        }
    }        

    public IEnumerable<Restaurant> GetAllRestaurants()
    {
      return _restaurantDbContext.Restaurants.OrderByDescending(c => c.Id).Take(20).AsNoTracking().AsEnumerable<Restaurant>();
    }

    public Restaurant? GetRestaurantById(ObjectId id)
    {
      return _restaurantDbContext.Restaurants.FirstOrDefault(c  => c.Id == id);
    }
  }

}

IReservationService and ReservationService

Next up is our IReservationService and ReservationService.

Create the IReservationService interface and add the following methods:

using MongoDB.Bson;
using RestRes.Models;

namespace RestRes.Services
{
    public interface IReservationService
    {
        IEnumerable<Reservation> GetAllReservations();
        Reservation? GetReservationById(ObjectId id);

        void AddReservation(Reservation newReservation);

        void EditReservation(Reservation updatedReservation);

        void DeleteReservation(Reservation reservationToDelete);
    }
}

Create the ReservationService class, and replace your class with the following code that implements all the methods:

using Microsoft.EntityFrameworkCore;
using MongoDB.Bson;
using RestRes.Models;

namespace RestRes.Services
{
    public class ReservationService : IReservationService
    {
        private readonly RestaurantReservationDbContext _restaurantDbContext;

        public ReservationService(RestaurantReservationDbContext restaurantDbContext)
        {
            _restaurantDbContext = restaurantDbContext;
        }
        public void AddReservation(Reservation newReservation)
        {
            var bookedRestaurant = _restaurantDbContext.Restaurants.FirstOrDefault(c => c.Id == newReservation.RestaurantId);
            if (bookedRestaurant == null)
            {
                throw new ArgumentException("The restaurant to be reserved cannot be found.");
            }

            newReservation.RestaurantName = bookedRestaurant.name;

            _restaurantDbContext.Reservations.Add(newReservation);

            _restaurantDbContext.ChangeTracker.DetectChanges();
            Console.WriteLine(_restaurantDbContext.ChangeTracker.DebugView.LongView);

            _restaurantDbContext.SaveChanges();
        }

        public void DeleteReservation(Reservation reservation)
        {
            var reservationToDelete = _restaurantDbContext.Reservations.FirstOrDefault(b => b.Id == reservation.Id);

            if(reservationToDelete != null)
            {
                _restaurantDbContext.Reservations.Remove(reservationToDelete);

                _restaurantDbContext.ChangeTracker.DetectChanges();
                Console.WriteLine(_restaurantDbContext.ChangeTracker.DebugView.LongView);

                _restaurantDbContext.SaveChanges();
            }
            else
            {
                throw new ArgumentException("The reservation to delete cannot be found.");
            }
        }

        public void EditReservation(Reservation updatedReservation)
        {
           var reservationToUpdate = _restaurantDbContext.Reservations.FirstOrDefault(b => b.Id == updatedReservation.Id);


            if (reservationToUpdate != null)
            {               
                reservationToUpdate.date = updatedReservation.date;

                _restaurantDbContext.Reservations.Update(reservationToUpdate);

                _restaurantDbContext.ChangeTracker.DetectChanges();
                _restaurantDbContext.SaveChanges();

                Console.WriteLine(_restaurantDbContext.ChangeTracker.DebugView.LongView);
            }  
            else 
            { 
                throw new ArgumentException("Reservation to be updated cannot be found");
            }

        }

        public IEnumerable<Reservation> GetAllReservations()
        {
            return _restaurantDbContext.Reservations.OrderBy(b => b.date).Take(20).AsNoTracking().AsEnumerable<Reservation>();
        }

        public Reservation? GetReservationById(ObjectId id)
        {
            return _restaurantDbContext.Reservations.AsNoTracking().FirstOrDefault(b => b.Id == id);
        }

    }
}

This code is very similar to the code for the RestaurantService class but for reservations instead.

Adding them to Dependency Injection

The final step for the services is to add them to the dependency injection container.

Inside Program.cs, add the following code after the code we added there earlier:

builder.Services.AddScoped<IRestaurantService, RestaurantService>();
builder.Services.AddScoped<IReservationService, ReservationService>();

Creating the view models

Before we implement the front end, we need to add the view models that will act as a messenger between our front and back ends where required. Even though our application is quite simple, implementing the view model is still good practice as it helps decouple the pieces of the app.

RestaurantListViewModel

The first one we will add is the RestaurantListViewModel. This will be used as the model in our Razor page later on for listing restaurants in our database.

1. Create a new folder in the root of the project called ViewModels.

2. Add a new file called RestaurantListViewModel.cs.

3. Add the following code:

using RestRes.Models;

namespace RestRes.ViewModels
{
    public class RestaurantListViewModel
    {        
        public IEnumerable<Restaurant>? Restaurants { get; set; }
    }
}

RestaurantAddViewModel

We also want a view model that can be used by the Add view we will add later.

1. Inside the ViewModels folder, create a new file called RestaurantAddViewMode.cs.

2. Add:

using RestRes.Models;

namespace RestRes.ViewModels
{
    public class RestaurantAddViewModel
    {
        public Restaurant? Restaurant { get; set; } 
    }
}

ReservationListViewModel

Now, we want to do something very similar for reservations, starting with ReservationListViewModel.

1. Create a new file in the ViewModels folder called ReservationListViewModel.cs.

2. Add:

using RestRes.Models;

namespace RestRes.ViewModels
{
    public class ReservationListViewModel
    {
        public IEnumerable<Reservation>? Reservations { get; set; }
    }
}

ReservationAddViewModel

Finally, we have our ReservationAddViewModel.

Create the file and add this code:

using RestRes.Models;

namespace RestRes.ViewModels
{
    public class ReservationAddViewModel
    {
        public Reservation? Reservation { get; set; }
    }
}

Adding to _ViewImports

Later on, we will be adding references to our models and viewmodels in the views. In order for the application to know what they are, we need to add references to them in the _ViewImports.cshtml file inside the Views folder.

There will already be some references in there, including TagHelpers, so we want to add references to our .Models and .ViewModels folders. So the top of the file should look like this:

@using RestRes
@using RestRes.Models
@using RestRes.ViewModels

Creating the controllers

Now that we have the backend implementation and the view models we will refer to, we can start working toward the front end. We will be creating two controllers: one for Restaurant and one for Reservation.

RestaurantController

The first controller we will add is for the restaurant.

1. Inside the existing Controllers folder, add a new controller file called RestaurantController.cs. If using Visual Studio, use the MVC Controller - Empty controller template.

2. Add this code:

using Microsoft.AspNetCore.Mvc;
using MongoDB.Bson;
using RestRes.Models;
using RestRes.Services;
using RestRes.ViewModels;

namespace RestRes.Controllers
{
    public class RestaurantController : Controller
    {
        private readonly IRestaurantService _RestaurantService;

        public RestaurantController(IRestaurantService RestaurantService)
        {
            _RestaurantService = RestaurantService;
        }
        public IActionResult Index()
        {
            RestaurantListViewModel viewModel = new()
            {
                Restaurants = _RestaurantService.GetAllRestaurants(),
            };
            return View(viewModel);
        }

        public IActionResult Add()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Add(RestaurantAddViewModel restaurantAddViewModel)
        {
            if(ModelState.IsValid)
            {
                Restaurant newRestaurant = new()
                {
                    name = restaurantAddViewModel.Restaurant.name,
                    borough = restaurantAddViewModel.Restaurant.borough,
                    cuisine = restaurantAddViewModel.Restaurant.cuisine
                };

                _RestaurantService.AddRestaurant(newRestaurant);
                return RedirectToAction("Index");
            }

            return View(restaurantAddViewModel);         
        }

        public IActionResult Edit(ObjectId id)
        {
            if(id == null || id == ObjectId.Empty)
            {
                return NotFound();
            }

            var selectedRestaurant = _RestaurantService.GetRestaurantById(id);
            return View(selectedRestaurant);
        }

        [HttpPost]
        public IActionResult Edit(Restaurant restaurant)
        {
            try
            {
                if(ModelState.IsValid)
                {
                    _RestaurantService.EditRestaurant(restaurant);
                    return RedirectToAction("Index");
                }
                else
                {
                    return BadRequest();
                }
            }
            catch (Exception ex)
            {
                ModelState.AddModelError("", $"Updating the restaurant failed, please try again! Error: {ex.Message}");
            }

            return View(restaurant);
        }

        public IActionResult Delete(ObjectId id) {
            if (id == null || id == ObjectId.Empty)
            {
                return NotFound();
            }

            var selectedRestaurant = _RestaurantService.GetRestaurantById(id);
            return View(selectedRestaurant);
        }

        [HttpPost]
        public IActionResult Delete(Restaurant restaurant)
        {
            if (restaurant.Id == ObjectId.Empty)
            {
                ViewData["ErrorMessage"] = "Deleting the restaurant failed, invalid ID!";
                return View();
            }

            try
            {
                _RestaurantService.DeleteRestaurant(restaurant);
                TempData["RestaurantDeleted"] = "Restaurant deleted successfully!";

                return RedirectToAction("Index");
            }
            catch (Exception ex)
            {
                ViewData["ErrorMessage"] = $"Deleting the restaurant failed, please try again! Error: {ex.Message}";
            }

            var selectedRestaurant = _RestaurantService.GetRestaurantById(restaurant.Id);
            return View(selectedRestaurant);
        }        
    }
}

ReservationController

Now for the reservation controller. This is very similar to the RestaurantController but it has a reference to both the restaurant and reservation service as we need to associate a restaurant with a reservation. This is because at the moment, the EF Core Provider doesn’t support relationships between entities so we can relate entities in a different way.

1. Create another empty MVC Controller file called ReservationController.cs.

2. Paste the following code:

using Microsoft.AspNetCore.Mvc;
using MongoDB.Bson;
using RestRes.Models;
using RestRes.Services;
using RestRes.ViewModels;

namespace RestRes.Controllers
{
    public class ReservationController : Controller
    {
        private readonly IReservationService _ReservationService;
        private readonly IRestaurantService _RestaurantService;        

        public ReservationController(IReservationService ReservationService, IRestaurantService RestaurantService)
        {
            _ReservationService = ReservationService;
            _RestaurantService = RestaurantService;
        }

        public IActionResult Index()
        {
            ReservationListViewModel viewModel = new ReservationListViewModel()
            {
                Reservations = _ReservationService.GetAllReservations()
            };
            return View(viewModel);
        }

        public IActionResult Add(ObjectId restaurantId)
        {
            var selectedRestaurant = _RestaurantService.GetRestaurantById(restaurantId);

            ReservationAddViewModel reservationAddViewModel = new ReservationAddViewModel();

            reservationAddViewModel.Reservation = new Reservation();
            reservationAddViewModel.Reservation.RestaurantId = selectedRestaurant.Id;
            reservationAddViewModel.Reservation.RestaurantName = selectedRestaurant.name;
            reservationAddViewModel.Reservation.date = DateTime.UtcNow;

            return View(reservationAddViewModel);
        }

        [HttpPost]
        public IActionResult Add(ReservationAddViewModel reservationAddViewModel)
        {
                Reservation newReservation = new()
                {
                    RestaurantId = reservationAddViewModel.Reservation.RestaurantId,                   
                    date = reservationAddViewModel.Reservation.date,
                };

                _ReservationService.AddReservation(newReservation);
                return RedirectToAction("Index");   
        }

        public IActionResult Edit(string Id)
        {
            if(Id == null || string.IsNullOrEmpty(Id))
            {
                return NotFound();
            }

            var selectedReservation = _ReservationService.GetReservationById(new ObjectId(Id));
            return View(selectedReservation);
        }

        [HttpPost]
        public IActionResult Edit(Reservation reservation)
        {
            try
            {
                var existingReservation = _ReservationService.GetReservationById(reservation.Id);
                if (existingReservation != null)
                {
                    _ReservationService.EditReservation(reservation);
                    return RedirectToAction("Index");
                }
                else
                {
                    ModelState.AddModelError("", $"Reservation with ID {reservation.Id} does not exist!");
                }
            }
            catch (Exception ex)
            {
                ModelState.AddModelError("", $"Updating the reservation failed, please try again! Error: {ex.Message}");
            }

            return View(reservation);
        }

        public IActionResult Delete(string Id)
        {
            if (Id == null || string.IsNullOrEmpty(Id))
            {
                return NotFound();
            }

            var selectedReservation = _ReservationService.GetReservationById(new ObjectId(Id));
            return View(selectedReservation);
        }

        [HttpPost]
        public IActionResult Delete(Reservation reservation)
        {
            if(reservation.Id == null)
            {
                ViewData["ErrorMessage"] = "Deleting the reservation failed, invalid ID!";
                return View();
            }

            try
            {
                _ReservationService.DeleteReservation(reservation);
                TempData["ReservationDeleted"] = "Reservation deleted successfully";

                return RedirectToAction("Index");
            }
            catch (Exception ex)
            {
                ViewData["ErrorMessage"] = $"Deleting the reservation failed, please try again! Error: {ex.Message}";
            }

            var selectedRestaurant = _ReservationService.GetReservationById(reservation.Id);
            return View(selectedRestaurant);
        }
    }
}

Creating the views

Now we have the back end and the controllers prepped with the endpoints for our restaurant reservation system, it is time to implement the views. This will be using Razor pages. You will also see reference to classes from Bootstrap as this is the CSS framework that comes with MVC applications out of the box. We will be providing views for the CRUD operations for both listings and bookings.

Listing Restaurants

First, we will provide a view that will map to the root of /Restaurant, which will by convention look at the Index method we implemented.

ASP.NET Core MVC uses a convention pattern whereby you name the .cshtml file the name of the endpoint/method it uses and it lives inside a folder named after its controller.

1. Inside the Views folder, create a new subfolder called Restaurant.

2. Inside that Restaurant folder, add a new view by creating a file called Index.cshtml. If using the available templates, you want Razor View - Empty. Name the view Index.

3. Add this code:

@model RestaurantListViewModel

@if (TempData["RestaurantDeleted"] != null)
{
    <p class="text-success">@TempData["RestaurantDeleted"]</p>
}


@if (!Model.Restaurants.Any())
{
    <p>No results</p>
}
else
{
    <table class="table table-condensed table-bordered">
        <tr>
            <th>
                Name
            </th>
            <th>
                Cuisine
            </th>
            <th>
                Borough
            </th>            
            <th>
                Actions
            </th>
        </tr>

        @foreach (var restaurant in Model.Restaurants)
        {
            <tr>
                <td>@restaurant.name</td>
                <td>@restaurant.cuisine</td>
                <td>@restaurant.borough</td>                
                <td>
                    <a asp-action="Edit" asp-route-id="@restaurant.Id.ToString()">Edit</a>
                    <a asp-action="Delete" asp-route-id="@restaurant.Id.ToString()">Delete</a>
                    <a asp-controller="Reservation" asp-action="Add" asp-route-restaurantId="@restaurant.Id.ToString()">Reserve</a>
                </td>
            </tr>
        }

    </table>
}

<p>
    <a class="btn btn-primary" asp-action="Add">Add new restaurant</a>
</p>

Now let's update the default route from Home to /Restaurant.

In Program.cs, inside app.MapControllerRoute, replace the pattern line with the following:

pattern: "{controller=Restaurant}/{action=Index}/{id?}");

If we ran this now, the buttons would lead to 404s because we haven’t implemented them yet. So let’s do that now.

Adding restaurants

We will start with the form for adding new restaurants.

1. Add a new, empty Razor View inside the Restaurant subfolder called Add.cshtml.

2. Add the following code:

@model RestaurantAddViewModel

<h2>Create a new restaurant</h2>
<hr />

@if (ViewData["ErrorMessage"] != null)
{
    <p class="text-danger">@ViewData["ErrorMessage"]</p>
}

<form method="post" asp-controller="Restaurant" asp-action="Add">
    <div asp-validation-summary="All" class="text-danger"></div>

    <div class="mb-3">
        <label asp-for="Restaurant.name" class="form-label"></label>
        <input asp-for="Restaurant.name" class="form-control" />
        <span asp-validation-for="Restaurant.name" class="text-danger"></span>
    </div>

    <div class="mb-3">
        <label asp-for="Restaurant.cuisine" class="form-label"></label>
        <input asp-for="Restaurant.cuisine" class="form-control" />
        <span asp-validation-for="Restaurant.cuisine" class="text-danger"></span>
    </div>

      <div class="mb-3">
        <label asp-for="Restaurant.borough" class="form-label">Borough</label>
        <input asp-for="Restaurant.borough" class="form-control" />
        <span asp-validation-for="Restaurant.borough" class="text-danger"></span>
    </div>

    <input type="submit" value="Add restaurant" class="btn btn-primary" />
</form>

<div>
    <a asp-controller="Restaurant" asp-action="Index">Back to list</a>
</div>

Editing restaurants

The code for the Edit page is almost identical to Add, but it uses the Restaurant as a model as it will use the restaurant it is passed to pre-populate the form for editing.

1. Add another view inside the Restaurant subfolder called Edit.cshtml.

2. Add the following code:

@model Restaurant

<h2>Update @Model.name</h2>
<hr />

<form method="post" asp-controller="Restaurant" asp-action="Edit">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="Id" />

    <div class="mb-3">
        <label asp-for="name" class="form-label">Name</label>
        <input asp-for="name" class="form-control" />
        <span asp-validation-for="name" class="text-danger"/>
    </div>
    <div class="mb-3">
        <label asp-for="cuisine" class="form-label"></label>
        <input asp-for="cuisine" class="form-control" />
        <span asp-validation-for="cuisine" class="text-danger"/>
    </div>
    <div class="mb-3">
        <label asp-for="borough" class="form-label">Borough</label>
        <input asp-for="borough" class="form-control" />
        <span asp-validation-for="borough" class="text-danger"/>
    </div>
    <input type="submit" value="Update restaurant" class="btn btn-primary" />
</form>
<div>
    <a asp-controller="Restaurant" asp-action="Index">Back to list</a>
</div>

Deleting restaurants

The final page we need to implement is the page that is called when the delete button is clicked.

1. Create a new empty View called Delete.cshtml.

2. Add the following code:

@model Restaurant

<h2>Deleting @Model.name</h2>
<hr />

@if(ViewData["ErrorMessage"] != null)
{
    <p class="text-danger">@ViewData["ErrorMessage"]</p>
}

<div>
    <dl class="row">
        <dt class="col-sm-4">
            <label asp-for="name">Name</label>
        </dt>
        <dd class="col-sm-10">
            @Model?.name
        </dd>
        <dt class="col-sm-2">
            <label asp-for="cuisine"></label>
        </dt>
        <dd class="col-sm-10">
            @Model?.cuisine
        </dd>
        <dt class="col-sm-2">
            <label asp-for="borough">Borough</label>
        </dt>
        <dd class="col-sm-10">
            @Model?.borough
        </dd>

    </dl>
</div>

<form method="post" asp-action="Delete">
    <input type="hidden" asp-for="Id" />
    <input type="submit" value="Delete restaurant" class="btn btn-danger" onclick="javascript: return confirm('Are you sure you want to delete this restaurant?');" />
</form>

<div>
    <a asp-controller="Restaurant" asp-action="Index">Back to list</a>
</div>

Listing reservations

We have added the views for the restaurants so now we will add the views for reservations, starting with listing any existing reservations.

1. Create a new folder inside the Views folder called Reservation.

2. Create a new empty view file called Index.cshtml.

3. Add the following code to display the reservations, if any exist:

@model ReservationListViewModel

@if (TempData["ReservationDeleted"] != null)
{
    <p class="text-success">@TempData["ReservationDeleted"]</p>
}

@if (!Model.Reservations.Any())
{
    <p>No results</p>
}

else
{    
    <table class="table table-condensed table-bordered">
        <tr>
            <th>
                Booked Restaurant
            </th>
            <th>
                Date and Time
            </th>
            <th>
                Actions
            </th>
        </tr>

        @foreach(var reservation in Model.Reservations)
        {
            <tr>
                <td>@reservation.RestaurantName</td>
                <td>@reservation.date.ToLocalTime()</td>
                <td>
                    <a asp-action="Edit" asp-route-id="@reservation.Id.ToString()">Edit</a>
                    <a asp-action="Delete" asp-route-id="@reservation.Id.ToString()">Delete</a>
                </td>
            </tr>
        }

    </table>   

}

Adding reservations

Adding reservations is next.

1. Create an empty view called Add.cshtml.

2. Add the following code:

@model ReservationAddViewModel


@if (ViewData["ErrorMessage"] != null)
{
    <p class="text-danger">@ViewData["ErrorMessage"]</p>
}

<form method="post" asp-controller="Reservation" asp-action="Add">
    <div asp-validation-summary="All" class="text-danger"></div>
    <input type="hidden" asp-for="Reservation.Id" />
    <input type="hidden" asp-for="Reservation.RestaurantId" />

    <div class="mb-3">
        <label asp-for="Reservation.date" class="form-label"></label>
        <input asp-for="Reservation.date" type="datetime-local" class="form-control" value="@DateTime.Now.ToString("yyyy-MM-ddTHH:mm")" />
        <span asp-validation-for="Reservation.date" class="text-danger"></span>
    </div>

    <input type="submit" value="Reserve table" class="btn btn-primary" />
</form>

Editing reservations

Editing reservations is next.

1. Create an empty view called Edit.cshtml.

2. Add the following code:

@model Reservation

<h2>Editing reservation for @Model.RestaurantName on @Model.date.ToLocalTime()</h2>
<hr />

<form method="post" asp-controller="Reservation" asp-action="Edit">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="Id" />

    <div class="mb-3">
        <label asp-for="date" class="form-label"></label>
        <input asp-for="date" value="@Model.date.ToLocalTime().ToString("yyyy-MM-ddTHH:mm")" class="form-control" />
        <span asp-validation-for="date" class="text-danger" />
    </div>
    <input type="submit" value="Update reservation" class="btn btn-primary" />
</form>
<div>
    <a asp-controller="Reservation" asp-action="Index">Back to reservations</a>
</div>

Deleting reservations

Deleting reservations is next.

1. Create an empty view called Delete.cshtml.

2. Add the following code:

@model Reservation

<h2>Delete reservation</h2>
<hr />

@if (ViewData["ErrorMessage"] != null)
{
    <p class="text-danger">@ViewData["ErrorMessage"]</p>
}

<div>
    <dl class="row">
        <dt class="col-sm-2">
            <label asp-for="RestaurantName">Name</label>
        </dt>
        <dd class="col-sm-10">
            @Model?.RestaurantName
        </dd>
        <dt class="col-sm-2">
            <label asp-for="date"></label>
        </dt>
        <dd class="col-sm-10">
            @Model?.date.ToLocalTime()
        </dd>
        </dl>
</div>

<form method="post" asp-action="Delete">
    <input type="hidden" asp-for="Id" />
    <input type="hidden" asp-for="RestaurantId" />
    <input type="submit" value="Delete reservation" class="btn btn-danger" onclick="javascript: return confirm('Are you sure you want to delete this reservation?');" />
</form>

<div>
    <a asp-controller="Reservation" asp-action="Index">Back to list</a>
</div>

Updating NavBar

The final thing to add is to update the navigation bar of the application so we can easily switch between restaurants and reservations.

Navigate to the file at Views/Shared/_Layout.cshtml. Find the div with class navbar-collapse. Remove that entire section and add the following code:

<div class="collapse navbar-collapse justify-content-between">
    <ul class="navbar-nav flex-grow-1">
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="" asp-controller="Restaurant" asp-action="Index">Restaurants</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="" asp-controller="Reservation" asp-action="Index">Reservations</a>
        </li>
    </ul>
</div>

Testing our application

We now have a functioning application that uses the new MongoDB Provider for EF Core. Now is the time to test it all and visit our endpoints to make sure it all works.

In the terminal run the following command:

dotnet run

Try editing restaurants and adding reservations. You can then navigate to the MongoDB Atlas database page and see that your changes are reflected in the database.

Advanced MongoDB Operations: Atlas Search and Vector Search

The EF Core provider is built on top of the MongoDB C# Driver. Since we already have access to the the MongoClient when creating the DbContext, this allows us to perform advanced MongoDB operations such as Atlas Search and Vector Search. These features enhance your application's capabilities by enabling powerful search functionalities while still leveraging the familiar EF Core framework.

Atlas Search

Atlas Search is a full-text search engine provided by MongoDB Atlas. It allows you to run sophisticated search queries on your MongoDB data. With Atlas Search, you can implement features like autocomplete, faceted search, and relevance-based sorting.

To use Atlas Search with the EF Core Provider, follow these steps:

1. Setup Indexes in MongoDB Atlas:

   • Go to your MongoDB Atlas cluster.

   • Navigate to the "Search" tab and create a new index on your collection. Define the fields you want to make searchable.

2. Define Searchable Fields in Your Models: In your C# models, ensure that the fields you want to search are properly defined. Here is an example of the definition of a Product model.

    public class Product
    {
        public ObjectId Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public decimal Price { get; set; }
        public string Category { get; set; }
    }
   

3. Performing Search Queries: Use the MongoDB .NET Driver's capabilities to perform text searches. Since EF Core itself does not directly support the MongoDB-specific search syntax, you will need to use the driver in conjunction with EF Core. Here’s an example:

    using MongoDB.Driver;
    using MongoDB.Driver.Linq;
   
    var client = new MongoClient("your-mongodb-connection-string");
    var database = client.GetDatabase("your-database-name");
    var collection = database.GetCollection<Product>("Products");
   
    var searchResult = collection.Aggregate()
        .Match(Builders<Product>.Filter.Text("search term"))
        .ToList();
   

This example shows how to perform a text search on the Products collection. The Text filter helps search across all indexed fields defined in your Atlas Search index.

Vector Search

Vector Search in MongoDB is used for searching documents based on vector similarities, which is particularly useful for applications involving machine learning, recommendations, and natural language processing. Vector Search allows you to query documents using vectors representing text, images, or other high-dimensional data.

1. Create and Store Vectors: First, ensure that your documents contain vectors. You might need to preprocess your data to generate these vectors using machine learning models.

2. Index Vectors in MongoDB Atlas: Create a special index on the vector field in MongoDB Atlas to enable efficient vector similarity searches.

3. Performing Vector Searches: Use the MongoDB .NET Driver to query based on vector similarity.

Integrating with EF Core

While the MongoDB EF Core Provider simplifies CRUD operations, some advanced features like Atlas Search and Vector Search require direct use of the MongoDB .NET Driver. However, you can still integrate these operations within your EF Core-based application by using the driver for search functionalities and EF Core for other data management tasks.

By combining EF Core and MongoDB's advanced features, you can build powerful and flexible applications that leverage the best of both worlds—structured data access patterns of EF Core and the powerful search capabilities of MongoDB Atlas.

In the first part, you learned about arrays, how to create arrays, array functions, and how to loop through arrays.

This second part will teach you how to use PHP and MongoDB to rebuild the football team cards project of freeCodeCamp's updated JavaScript curriculum.

The football team data will live in a MongDB Atlas database. We will fetch it as an array, and display it based on the players selected (goalkeepers, defenders, midfielders, and forwards).

This will help you build on top of what you learned about looping through arrays. After all, on many occassions, you'll be looping through what you get from a database or an API, not necessarily some hard-coded arrays.

In order not to shock you by jumping straight into databases from arrays, we'll start with what data and databases are, and then go on to learn about:

• Relational vs non-relational databases

• How to use MongoDB Atlas

• How to Install MongoDB for PHP on a Mac

• How to set up MongoDB Atlas

• How to build a CRUD app with PHP and MongoDB Atlas

• And finally, how to rebuild the football team cards project with PHP and MongoDB Atlas

Pre-requisites

To get the best put of this guide, I suggest you have a basic knowledge of the following:

• PHP fundamentals (variables, arrays, functions, loops)

• HTML and CSS

• JavaScript events

• Command line

• Composer

• How to set up a PHP development environment with VS Code

• Databases

• MongoDB Atlas

• Git and GitHub

Table of Contents

• What are Data and Databases?

• Relational vs Non-relational Databases

  • MongoDB Atlas – An Example of a Non-relational Database

• How to Install MongoDB for PHP

  • Step 1: Install the MongoDB Extension with PECL (PHP Extension Community Library)

  • Step 2: Modify the php.ini File to Include the MongoDB Extension

  • Step 3: Verify the Installation of the MongoDB Extension

  • Step 4: Set Up a MongoDB Atlas Cluster

  • Step 5: Install the MongoDB PHP Library

• CRUD Operations Using PHP and MongoDB

  • Step 1: Install MongoDB Library and Dotenv Package

  • Step 2: Create a .env File for your MongoDB Atlas URI Credential

  • Step 3: Create a Database Connection File

  • Step 4: The READ Part of the CRUD

  • Step 5: The CREATE Part of the CRUD

  • Step 6: The UPDATE Part of the CRUD

  • Step 7: The DELETE Part of the CRUD

• Project: How to Use PHP to Rebuild the Football Team Cards Project of the Updated JavaScript Curriculum

  • Step 1: Set up MongoDB Atlas

  • Step 2: Install the Project Dependencies with Composer

  • Step 3: Create Project Files

  • Step 4: Wrap the select tag in a form Element

  • Step 5: Create the Logic for Fetching the Footballers from the footballers Collection

  • Step 6: Create the Logic for Filtering the Footballers Based on Position

  • Step 7: Display the Players on the Page Based on the Selected Position

• Wrapping Up

What are Data and Databases?

Data is central to pretty much everything in the modern world. The people you see on social media and other websites, the content they post, the comments they add to posts, and many other online activities all produce a lot of data. Even patient files in a hospital or a company's payroll hosted on a local server are data. Data does not have to be on the Internet.

To effectively manage and utilize data for growth, you need a database. A Database is a structured collection of data that helps you efficiently store, retrieve, and manipulate that data.

Databases come in two primary types – relational and non-relational databases. We'll discuss the differences between them next.

Both relational and non-relational databases are managed with what is called database management systems (DBMS). A DBMS is an interface between the user and the database that allows you to create, read, update, and delete data in the database.

Relational vs Non-relational Databases

What are Relational Databases?

Relational databases organize data into tables consisting of rows and columns. Each table represents a specific entity, such as customers or products. The columns define the attributes of these entities, like the customer name or product name.

The relational model uses structured query language (SQL) for querying and managing data. Relationships between tables are established through primary and foreign keys to ensure data integrity and reduce redundancy.

Relational databases are known for their robustness, consistency, and support for complex queries. They are well-suited for applications that require multi-row transactions, such as financial systems, enterprise resource planning (ERP) software, and customer relationship management (CRM) systems.

Examples of relational databases are MySQL, PostgreSQL, and Microsoft SQL Server.

What are Non-Relational Databases?

Non-relational databases store and manage data in flexible, schema-less formats like key-value pairs, documents, wide-columns, or graphs. They are also known as NoSQL databases because they don't use SQL like relational databases.

Non-relational databases are designed to scale horizontally, making them ideal for large-scale data processing and real-time web applications.

Non-relational databases are easy to use, scalable, and high-performing at the same time. Due to that, they often sacrifice some degree of consistency in favor of availability and partition tolerance.

Common use cases include real-time analytics, real-time web apps, and applications requiring high-speed data ingestion.

MongoDB Atlas – An Example of a Non-relational Database

MongoDB Atlas is a non-relational database that stores data in a document-oriented JSON-like format called BSON (Binary JSON). BSON extends the JSON model to provide additional data types and to be efficient for encoding and decoding within various programming languages.

MongoDB Atlas offers the flexibility and scalability of MongoDB, with the benefits of automated deployment, backups, and monitoring. It allows developers to focus on building applications without bothering about database management

MongoDB Atlas also supports advanced features such as data partitioning, replication, and global distribution. This makes it a powerful choice for modern applications requiring flexibility and performance.

How to Install MongoDB for PHP

Before you can install MongoDB for PHP, make sure you have PHP itself installed correctly.

On a Mac, you can install PHP with homebrew by running brew install PHP. In addition to that, make sure you have Apache installed by running brew install httpd and starting it by running brew services start httpd.

You can follow the steps below to install MongoDB for PHP on a Mac.

Step 1: Install the MongoDB Extension with PECL (PHP Extension Community Library)

Install the MongoDB extension for PHP by running pecl install mongodb.

Step 2: Modify the php.ini File to Include the MongoDB Extension

Installing the MongoDB extension should automatically add the necessary configurations to the php.ini file. But of it doesnt do that, locate the php.ini file by running the command below:

$ php --ini
Configuration File (php.ini) Path: /usr/local/etc/php/8.3

After that, paste the following at the end of the php.ini file and save it:

extension=mongodb.so

After doing that, restart Apache by running brew services restart httpd.

Step 3: Verify the Installation of the MongoDB Extension

Run the command below to see whether the PHP extension has been successflly installed:

php -i | grep mongo

You should see something like this in the terminal:

Check out the MongoDB PHP docs for more information on how to use MongoDB with PHP and frameworks like Laravel and Symfony.

Step 4: Set Up a MongoDB Atlas Cluster

To test out the PHP extension you just installed, you need a MongoDB database. Atlas makes this easy for you because the heavy lifting is handled on the cloud.

1. Login to your MongoDB Account

Head over to https://cloud.mongodb.com/ and log in to your account. If you don't have an account, you can create one for free.

2. Create a Project

If you have existing projects, create a new project by clicking on the arrow right beside the currently opened project and selecting "New Project".

Give your project a name and click the "Next" button.

Click "Create Project" to finally create the project.

3. Create a Cluster

After creating a project, you should be prompted to create a cluster. If you're not, make sure you're in the Overview tab. From there, click the big "Create" button:

Select the "MO" free tier, give your cluster a name, and click the "Create Deployment" button.

I have given the cluster the name movie-list.

Just keep in mind that as your database grows, you might need to upgrade to one of the paid tiers.

4. Create a Database User

Immediately after you create your cluster, you'll be prompted to create a database user. Fill in your database user username and password and click the "Create Database User" button. Then click "Choose a connection method".

Make sure you enter a password you can remember or save it in a password manager.

5. Choose a Connection Method

You'll see several methods you can use to connect to the cluster once you click the "Choose a connection method" button.

Select Drivers from the list.

Choose PHP from the list and select PHP Lib 1.9 + MongoDB 1.10 or later as the version to use. Then copy the connection string and click the "Done" button.

6. Choose Network Access

Head over to the "Network Access" tab and select "Add IP ADDRESS", click "ALLOW ACCESS FROM ANYWHERE", and then click the "Confirm" button. You can change this later depending on where your app is deployed.

Go back to the "Database" tab and click the "Browse Collections" button.

Select "Load a Sample Dataset" so you don't have to add your own data – at least for now.

Now you should see the following databases:

To test that your MongoDB extension for PHP is running, you can query any of the data in those databases. But first, you need to install the MongoDB PHP library with composer. composer lets you manage dependencies for your PHP project.

Step 5: Install the MongoDB PHP Library

If you don't have composer installed, install it with homebrew by running brew install composer.

After that, create a folder and open it with your Text Editor. If your Text Editor has an integrated terminal, open it and run the command below:

composer require mongodb/mongodb

If the installation is successful, you'll see a vendor folder, along with composer.json and composer.lock files in the root of your project. You'll also see the following in the terminal:

Now you need to query any data in your atlas database and display them.

Create an index.php file and paste the following inside it:

<?php

require_once __DIR__ . '/vendor/autoload.php';

// Your connection string
$client = new MongoDB\Client(
 'mongodb+srv://username:<password>@movie-list.s6r7qkr.mongodb.net/?retryWrites=true&w=majority&appName=movie-list'
);

$movies = $client->selectCollection('sample_mflix', 'movies');
$document = $movies->findOne(['title' => 'Wild and Woolly']);

echo '<pre>';
print_r($document);

The code above lets you connect to the movies database in the sample_mflix collection with the selectCollection() function and query a movie titled "Wild and Bolly" in it.

Note: Make sure you replace the existing connection string with your own. You copied this in item 5 of step 4. Also, make sure you replace <password> with your database user password.

After that, run your PHP app (with php -S localhost:8000 on Mac in the terminal). If you have everything set up correctly, you should see the following in the browser:

Note: I have the data formatted nicely because I installed the PHP View Chrome extension. It prints everything you have inside the print_r() function like that.

CRUD Operations Using PHP and MongoDB

With MongoDB Atlas for database management and UI persistence, and PHP for server-side logic, you can build an application that implements full CRUD operations – create, read, update, and delete.

The particular CRUD app we are building is a movie list. So make sure you set up an Atlas database for it, as we already covered in this guide.

Now let's look at how you can build a movie list CRUD app.

Step 1: Install MongoDB Library and Dotenv Package

Make sure you have a MongoDB extension and a Dotenv package to help manage your .env variables by running the following commands:

composer require mongodb/mongodb
composer require vlucas/phpdotenv

Step 2: Create a .env File for your MongoDB Atlas URI Credential

Create a .env file and add the following in it:

MDB_URI="Your MongoDB Atlas connection string"

Step 3: Create a Database Connection File

Create a mongo_atlas_setup.php file for the database connection in the root and paste the following in it:

<?php
require_once __DIR__ . '/vendor/autoload.php';

$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
$dotenv->load();

$client = new MongoDB\Client($_ENV['MDB_URI']);

function getMongoClient()
{
 global $client;
 return $client;
}

function getMongoCollection($database, $collection)
{
 $client = getMongoClient();
 return $client->selectCollection($database, $collection);
}

With the code above, we are:

• loading the dependencies required for the project

• loading the environment variable

• using a function to get the database and the collection we want within it

Importing the file and calling the getMongoCollection in it with the database and the collection in it will let you connect to the database and the collection.

Step 4: The READ Part of the CRUD

In the root again, create an index.php file that will take care of the READ part of the CRUD. Paste the following in the file:

<?php

require_once __DIR__ . '/vendor/autoload.php';
require_once __DIR__ . '/mongo_atlas_setup.php';

$movies_list = getMongoCollection('movie_list', 'movies');
$movies = $movies_list->find([], ['sort' => ['_id' => -1]]);
?>

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Movie List CRUD App</title>
 <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-10">

 <div class="max-w-4xl mx-auto bg-white p-6 rounded shadow">
   <h1 class="text-3xl font-bold mb-4 text-center">Movie List CRUD App</h1>

   <?php include 'create.php' ?>

   <div class="space-y-4">
     <?php foreach ($movies as $movie) : ?>
       <div class="p-4 border rounded shadow-sm bg-gray-50">
         <h2 class="text-2xl font-semibold"><?= $movie['movie_title'] ?></h2>
         <p class="text-gray-700">Year: <?= $movie['movie_year'] ?></p>
         <div class="mt-2">
           <a href="update.php?id=<?= $movie['_id'] ?>" class="bg-yellow-500 text-white py-1 px-3 rounded">Update</a>
           <a href="delete.php?id=<?= $movie['_id'] ?>" onclick="return confirm('Are you sure you want to delete this movie?')" class="bg-red-500 text-white py-1 px-3 rounded">Delete</a>
         </div>
       </div>
     <?php endforeach ?>
   </div>
 </div>

</body>

</html>

Notice that there are the Update and Delete linking to an update.php and a delete.php files with the id of the movie clicked. That way, we will know which movie is clicked in order to update or delete it. There's also an include statement for a create.php file.

For now, you can go ahead and create the create.php, update.php, and delete.php files in the root.

At this point, you won't see anything in the UI yet because you need to handle the creation functionality.

Step 5: The CREATE Part of the CRUD

Create a create.php file in the root (if you haven't already) and paste in the following:

<?php
require_once __DIR__ . '/mongo_atlas_setup.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 $movies = getMongoCollection('movie_list', 'movies');
 $newMovie = [
   'movie_title' => $_POST['movie-title'],
   'movie_year' => (int)$_POST['movie-year'],
 ];
 $result = $movies->insertOne($newMovie);
 if ($result->getInsertedCount() === 1) {
   // echo "Movie created successfully!";
   header('Location: ' . '/');
 } else {
   echo "Failed to create movie";
 }
}
?>

<form method="POST" action="create.php" class="space-y-4 mb-6">
 <div>
   <label class="block text-gray-700">Movie Title</label>
   <input type="text" name="movie-title" required class="w-full p-2 border rounded max-w-md">
 </div>
 <div>
   <label class="block text-gray-700">Movie Year</label>
   <input type="text" name="movie-year" required class="w-full p-2 border rounded max-w-md">
 </div>
 <button type="submit" class="bg-green-500 text-white py-2 px-4 rounded">Create</button>
</form>

The code above contains the form and input elements for creating a movie. We are then using the name attributes in those input elements to create the POST request that will let us create a movie and save it in the movies collection of a movie_list database.

Step 6: The UPDATE Part of the CRUD

To handle the updating, we need to create a separate file and do something similar to how the movie creation worked. The exeception is that we are going to use the id (_id) field to determine whether the movie exists and then update it instead of creating a fresh one.

To do that, create an update.php file (if you haven't already) in the root and paste in the following:

<?php
require_once __DIR__ . '/vendor/autoload.php';
require_once __DIR__ . '/mongo_atlas_setup.php';

use MongoDB\BSON\ObjectId;

$movies_list = getMongoCollection('movie_list', 'movies');
$title = '';
$year = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 $filter = ['_id' => new ObjectId($_POST['id'])];

 $update = ['$set' => [
   'movie_title' => $_POST['movie-title'],
   'movie_year' => (int)$_POST['movie-year'],
 ]];

 $result = $movies_list->updateOne($filter, $update);

 if ($result->getModifiedCount() === 1) {
   // echo "Movie updated successfully!";
   header('Location: ' . '/');
 } else {
   echo "Failed to update movie.";
 }
} else {
 if (isset($_GET['id'])) {
   $id = $_GET['id'];
   $movie = $movies_list->findOne(['_id' => new ObjectId($id)]);
   if ($movie) {
     $title = $movie['movie_title'];
     $year = $movie['movie_year'];
   } else {
     echo "Movie not found.";
     exit;
   }
 } else {
   echo "No movie ID provided.";
   exit;
 }
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="https://cdn.tailwindcss.com"></script>
 <title>Update Movie </title>
</head>

<body class="bg-gray-100 p-10">

 <div class="max-w-4xl mx-auto bg-white p-6 rounded shadow">
   <h1 class="text-3xl font-bold mb-4">Update <?= $title ?> </h1>

   <form method="POST" action="update.php" class="space-y-4">
     <input type="hidden" name="id" value="<?php echo $id; ?>">

     <div>
       <label class="block text-gray-700">Title</label>
       <input type="text" name="movie-title" value="<?= htmlspecialchars($title); ?>" required class="w-full p-2 border rounded" />
     </div>

     <div>
       <label class="block text-gray-700">Release Year</label>
       <input type="number" name="movie-year" value="<?= htmlspecialchars($year); ?>" required class="w-full p-2 border rounded" />
     </div>

     <button class=" bg-green-500 text-white py-2 px-4 rounded" type="submit">Update</button>
   </form>

   <div class="mt-4">
     <a href="index.php" class="bg-gray-500 text-white py-2 px-4 rounded">Back to List</a>
   </div>
 </div>

</body>

</html>

Step 7: The DELETE Part of the CRUD

To handle the delete functionality, we can get the movie and use the deleteOne function provided by MongoDB to delete it. Once the deleting is done, we will then use the header() function again to redirect to the home page.

Paste the following code in your delete.php file:

<?php
require_once __DIR__ . '/mongo_atlas_setup.php';

use MongoDB\BSON\ObjectId;

if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['id'])) {
 $movies = getMongoCollection('movie_list', 'movies');
 $filter = ['_id' => new ObjectId($_GET['id'])];
 $result = $movies->deleteOne($filter);
 if ($result->getDeletedCount() === 1) {
   // echo "Movie deleted successfully!";
   header('Location: ' . '/');
 } else {
   echo "Failed to delete movie.";
 }
} else {
 echo "No movie provided.";
}
?>

This is what the CRUD app should look like now:

All the code is in this GitHub repo

Project: How to Use PHP to Rebuild the Football Team Cards Project of the Updated JavaScript Curriculum

Before you start going through the steps to build the project, grab the starter code for the project in the starter branch of this GitHub repo.

You can also take a look at the football team cards project to know what we are trying to achieve.

Step 1: Set up MongoDB Atlas

Log in to your MongoDB Atlas account and create a football-team-cards database. Feel free to create it in an existing project or a new one if you want. In the football-team-cards database, create a footballers collection.

In the footballers collection, click the "INSERT DOCUMENT" button.

Then paste in the content of the footballers.json file in the starter branch of the project GitHub repo and click "Done".

After that, your footballers collection should look like this:

Step 2: Install the Project Dependencies with Composer

Create a football-team-cards-php folder on your computer and open it with your favorite text editor. Open the same folder in your terminal and run the following commands:

composer require vlucas/phpdotenv 
composer require mongodb/mongodb

Step 3: Create Project Files

Inside the football-team-cards-php folder, create the following files:

• .env

• mongo_atlas_php_setup.php

• index.php

• styles.css

In the .env file, you should have the MongoDB Atlas URI:

MDB_URI="Your MongoDB Atlas connection string"

In the mongo_atlas_php_setup.php file, you should connect to the database with this code:

<?php
require_once __DIR__ . '/vendor/autoload.php';
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
$dotenv->load();


function getMongoClient()
{
 return new MongoDB\Client($_ENV['MDB_URI']);
}


function getMongoCollection($database, $collection)
{
 $client = getMongoClient();
 return $client->selectCollection($database, $collection);
}

In the code above, we are loading the environment variables and using a getMongCollection function to connect the database. Make sure you replace the connection string with your own.

Now, anytime you want to connect to a database, require the file, then pass the database and the collection names to the getMongoCollection function.

Copy the content of the index.html and styles.css files in the starter branch of the project GitHub repo and paste them into your index.php and styles.css files.

Step 4: Wrap the select tag in a form Element

Replace the existing select tag with the following:

<form method="POST" action="">
     <label class="options-label" for="players">Filter Teammates:</label>
     <select name="position" id="players" onchange="this.form.submit()">
       <option value="all">All Players</option>
       <option value="nickname">Nicknames</option>
       <option value="forward">Position Forward</option>
       <option value="midfielder">Position Midfielder</option>
       <option value="defender">Position Defender</option>
       <option value="goalkeeper">Position Goalkeeper</option>
     </select>
</form>

This will let you make a POST request with the name attribute set to position. And with the onchange attribute of this.form.submit(), you'll be able to fetch footballers based on any of the options selected. More on this later.

Step 5: Create the Logic for Fetching the Footballers from the footballers Collection

require_once __DIR__ . '/mongo_atlas_php_setup.php';

$position = isset($_POST['position']) ? $_POST['position'] : 'all';

$collection = getMongoCollection('football-team-cards', 'footballers');
$team = $collection->findOne(['team' => 'Argentina']);
$players = $team['players']->getArrayCopy();

With the code above, we are:

• importing the database connection file

• checking for POST data with the name on the select tag and setting a default value of all (the first option in the select element)

• getting the database and collection in it

• using the findOne method from MongoDB to get the team

• and fetching the data as an array with getArraCopy() so we can loop through it

At this point, you can print the $players variable with print_r() or var_dump() to see what it looks like. On my end, it looks like this when I ran the app with php -S localhost:4000:

Step 6: Create the Logic for Filtering the Footballers Based on Position

Remember we have to display the players based on whether they are goakeepers, defenders, midfielders, or forwards. To do that, we can utilize the code below:

$filteredPlayers = $players;


if ($position !== 'all') {
 if ($position === 'nickname') {
   $filteredPlayers = array_filter($players, function ($player) {
     return !empty($player['nickname']);
   });
 } else {
   $filteredPlayers = array_filter($players, function ($player) use ($position) {
     return $player['position'] === $position;
   });
 }
}

At first, we are initializing $filteredPlayers to all the players. If the selected position is not all, we filter the players based on nickname. And if the selected position is not nickname, we filter the players to include only those whose position matches the selected position.

Step 7: Display the Players on the Page Based on the Selected Position

Now, all we need to do is set each option's value (all players, goalkeepers, defenders, midfielders, forwards) to selected if that option is matched. After that, we need to use foreach loop to do the proper display.

Here's one way you can set the value of each option to selected:

<option value="all" <?= $position === 'all' ? 'selected' : '' ?>>All Players</option>
       <option value="nickname" <?= $position === 'nickname' ? 'selected' : '' ?>>Nicknames</option>
       <option value="forward" <?= $position === 'forward' ? 'selected' : '' ?>>Forwards</option>
       <option value="midfielder" <?= $position === 'midfielder' ? 'selected' : '' ?>>Midfielders</option>
       <option value="defender" <?= $position === 'defender' ? 'selected' : '' ?>>Defenders</option>
       <option value="goalkeeper" <?= $position === 'goalkeeper' ? 'selected' : '' ?>>Goalkeepers</option>

And here's how you can use the foreach loop to finally display the players selected:

<div class="cards" id="player-cards">
     <?php if (empty($filteredPlayers)) : ?>
       <p>No players found for the selected position.</p>
     <?php else : ?>
       <?php foreach ($filteredPlayers as $players) : ?>
         <div class="player-card">
           <h2><?= $players['name'] . ($players['isCaptain'] ? ' (Captain)' : '') ?></h2>
           <p>Position: <?= $players['position'] ?></p>
           <p>Number: <?= $players['number'] ?></p>
           <p>Nickname: <?= !empty($players['nickname']) ? $players['nickname'] : 'N/A' ?></p>
         </div>
       <?php endforeach ?>
     <?php endif ?>
   </div>

Now, everything works as expected:

You can grab the final code of the project in the main branch of this GitHub repo.

Wrapping Up

Rebuilding the football team cards project with PHP and MongoDB Atlas shows just how powerful and flexible it can be to combine server-side scripting with a cloud-based NoSQL database.

The project not only highlights how smoothly PHP and MongoDB Atlas work together, but it also shows the advantages of using a cloud-based database like Atlas. Atlas offers scalability, high availability, and easy management, making it a great choice for modern web applications.

Whichever data-driven application you're making, these techniques that we used here to build the project and the initial CRUD app can help you out.

Happy coding!

So far, web development has become much more advanced, and data migration and backup is an essential skill every web developer should have to help ensure continuity of data and preserve user information regardless of any circumstances.

For developers like me who prefer to test all their code features locally in a development environment before final deployment to the cloud, this tutorial would come in handy for you when faced with the challenge of migrating your locally stored MongoDB data to a cloud platform or any other platform.

The inspiration for this article is a result of the need for me to migrate the total JSON data on my local MongoDB Compass server to the cloud (MongoDB Atlas) for an ongoing project. I waded through the endless internet resources and documentation but couldn’t get a suitable, straightforward fix. With multiple trials and errors, I was able to succeed with the migration. This article should serve as the definitive guide you need to save you time and achieve fast results.

In this article, we'll delve into data management in MongoDB, data backup, and efficient data migration tools that ease up the entire process. This article is suited for people with intermediate to advanced knowledge of MongoDB and backend development.

If you have any difficulty with the terminologies used in this article, I would suggest studying the MongoDB documentation here.

Let’s begin.

Introduction to MongoDB

MongoDB is a non-relational NoSQL-based database that stores data via the document model in a JSON format. It’s quite popular, and ranks top among the most used databases worldwide.

It's also more code-friendly as it's currently the default database used by many JavaScript-based full stack and backend developers.

It has various database options, comprising both local database servers and a cloud-based Database-As-A-Platform.

A good example of this is the MongoDB Atlas. MongoDB Atlas is a flexible and scalable MongoDB implementation with strong cloud security.

It provides indexing, load balancing, and sharding, among other features. More information regarding it can be found here.

How to Initialize the MongoDB Server

You should have the MongoDB local server already installed. However, if you haven’t installed it, it can be downloaded here.

The MongoDB server can then be easily executable by adding its path to the environmental variables on Windows.

To initialize the MongoDB application, activate the command prompt and type in
Mongod

MongoDb server running

To explore the databases on the MongoDB server, open the MongoDB command shell and type show dbs

The databses on the MongoDB server

This displays all the databases on the MongoDB server.

With this, let's go on to migrate one of these databases to the cloud.

How to Back Up Data

To efficiently upload the database collections to the cloud, they must first be backed up.

To back up your database, you'll have to install an additional tool. Navigate back to the MongoDB downloads site and download the MongoDB database administration tools.

This package contains a lot of database tools, such as MongoExport, MongoImport, MongoDump, and MongoRestore.

The above settings are applicable for users who have a version of MongoDB above version 4.4. MongoDB decided to release it as a stand-alone tool. For users whose version is less than version 4.4, these tools can be pre-installed in the MongoDB package.

Now, let's go on to the two major tools that would help facilitate the migration process: MongoDump and MongoRestore.

When MongoDump is executed on a database, it helps to create a backup database file in a binary-encoded JSON format (BSON). While the MongoRestore helps to return the backed-up database to MongoDB for usage.

Moving on, ensure that their package path is included in the environmental variables so as to guarantee efficient execution.

In order to back up a local database, open the MongoDB shell and then enter this command:

Mongodump --db={TheNameOFYourDB} --collection={TheNameOfYourCollection} –out={The name of the folder the backed up JSON files would be located}

With this execution, you have successfully backed up your local MongoDB database.

How to Set Up a MongoDB Atlas

MongoDB Atlas is MongoDB cloud Database-As-A-Service cloud option accessible to its users at all times with little to no disruption.

Also, for most production apps that utilize the power of MongoDB on the server as a database tool, the easiest and most convenient provider of this solution is the MongoDB Atlas.

Hence, it is our choice to back up our MongoDB data to the cloud. I would assume you already have a MongoDB Atlas account, but you can still create one and then create a database that would serve as the recipient of the local database.

To set the account up, kindly navigate to the Atlas home page here. Create an account and you'll be directed to a dashboard where you can create new databases.

MongoDb Atlas home page

You can, however, name it with any name you want. To complete the upload of the local MongoDB data to the cloud, navigate to the settings tab on the MongoDB Atlas database and click on the migrate data option. With this successfully done, let's now go on to complete the migration process.

How to Migrate Your Data to the Cloud

To migrate your backed-up database to the cloud, MongoImport and MongoExport will be invoked.

In the command prompt, paste the migration code copied from the Atlas, and then execute it on the command prompt. With that, you should see a success text.

You can then check and refresh your cloud database to see the new files that have been uploaded there. Thereafter, you can connect the new cloud database to your backend application and run it successfully to get the same results on your local computer.

Conclusion

With this, we have come to the end of the tutorial. We hope you’ve learned about data management and migration in MongoDB, tools involved and all its intricacies.

Feel free to drop comments and questions, and also check out my other articles here. Till next time, keep on coding!

If you are reading this article, you are probably a developer who has used an API to call data for your application. You may have also used features such as filtering and pagination to limit the amount of data you want to receive.

These API features are important when building your own API. They help ensure that your API is fast, secure, and easily understandable by the people using it.

In this article, you will build a simple expense API with Nest.js and MongoDB for a database. You will then implement filtering, sorting, limiting, and pagination to make your API faster and easy to use. Let's begin!

Here's what we'll cover:

• What is an API?
• How to set up a Nest.js app
• How to configure MongoDB
• How to set up the expense endpoints
• How to implement filtering and sorting
• How to implement limiting and pagination
• Conclusion

What is an API?

APIs are the backbone of modern software development. API stands for Application Programming Interface, and it allows one piece of software to communicate with another piece of software.

Web APIs use the HTTP communication protocols to communicate with computers. There are different types of APIs, but we won't get into them here.

These days, it's common for web APIs to have design features such as filtering, sorting, limiting, and pagination to make the API faster, easier to use, and more secure. You will learn how to implement these features to make a better API in this article.

How to Set Up a Nest.js App

First of all, you will be building a simple expense CRUD API in Nestjs. Nestjs is a progressive Node.js framework for building modern APIs that's pretty easy to use.

To get started, open your command line and type out the following commands:

$ npm i -g @nestjs/cli
$ nest new expense-app

Follow the installation guide. This will generate a few boilerplate files for you. Then you can open your Nest.js app in an IDE of your choice.

How to Configure MongoDB

Since MongoDB is our preferred database, it's important to configure it so you can use it in your app. First install the @nestjs/mongoose package:

$ npm i @nestjs/mongoose mongoose

Once the installation is complete, go into your app module file and import the MongooseModule:

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { MongooseModule } from '@nestjs/mongoose';

@Module({
  imports: [MongooseModule.forRoot(`mongodb+srv://*******:*******@cluster0.30vt0jd.mongodb.net/expense-test-app`)],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

If you don't want to expose your string that way, you can create a .env file and store your database connection string in it. You will then need to install the @nestjs/config package which uses dotenv internally.

Inside your app module file, import the ConfigModule:

@Module({
  imports: [
    ConfigModule.forRoot({ envFilePath: '.env', isGlobal: true }),
    MongooseModule.forRoot(process.env.DATABASE),
  ],
  controllers: [AppController],
  providers: [AppService],
})

isGlobal: true is to make the module available everywhere in your application. envFilePath specifies the path to your .env file.

How to Set Up the Expense Endpoints

You have configured MongoDB. Now it's time to set up the expense endpoints.

You can create a module in Nest.js by typing the following into the terminal: nest generate module expenses. You can also generate the controller like this: nest generate controller expenses and the service like this: nest generate service expenses. You should do all this in the src folder.

Go ahead and generate an expenses.schema.ts file. Inside the expenses.schema.ts file, create an expense schema with some validation.

import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
import mongoose, { HydratedDocument } from 'mongoose';

export type ExpenseDocument = HydratedDocument<Expense>;

@Schema()
export class Expense {
  @Prop({
    trim: true,
    required: [true, 'Title is required'],
  })
  title: string;

  @Prop({
    min: 0,
    required: [true, 'Amount is required'],
  })
  amount: number;

  @Prop({
    type: String,
    trim: true,
    required: [true, 'Category is required'],
  })
  category: string;

  @Prop({
    type: Date,
    default: Date.now,
  })
  incurred: Date;

  @Prop({ type: String, trim: true })
  notes: string;

  @Prop()
  slug: string;

  @Prop()
  updated: Date;

  @Prop({
    type: Date,
    default: Date.now,
  })
  created: Date;
}

export const ExpenseSchema = SchemaFactory.createForClass(Expense);

The properties in this schema include title, amount, category, notes, and slug.

After doing this, you want to register the expense model in the expenses.module.ts file:

import { Module } from '@nestjs/common';
import { ExpensesController } from './expenses.controller';
import { ExpensesService } from './expenses.service';
import { MongooseModule } from '@nestjs/mongoose';
import { Expense, ExpenseSchema } from './expenses.schema';

@Module({
  imports: [
    MongooseModule.forFeature([{ name: Expense.name, schema: ExpenseSchema }]),
  ],
  controllers: [ExpensesController],
  providers: [ExpensesService],
})
export class ExpensesModule {}