DEV Community: Negin Saljooghi

🚀 Mini Monitoring App in Go with Prometheus, Grafana & CI/CD

Negin Saljooghi — Sat, 06 Sep 2025 16:31:46 +0000

In this tutorial, we’ll build a tiny, production-style Go service that you can deploy, observe, and ship via CI/CD.

💡 Why this project?

Real-world skills: containerization, observability, CI/CD, and documentation.
Interview-friendly: shows us understand build → ship → monitor.
Lightweight: a small Go service with /health and /metrics that we can extend later.

🎯 What we’ll build

A Go service exposing:
GET /health : returns {"status":"OK"}
GET /metrics: Prometheus metrics (custom counter & latency histogram)
A Dockerized app pushed to DockerHub
A Prometheus + Grafana stack to scrape & visualize metrics.
A GitHub Actions pipeline to test, build, and publish the image.

⚙️ Prereqs:

Docker & Docker Compose.
GitHub account (for CI/CD).
DockerHub account (to publish the image).
Go 1.24.x

🧪 Run it now

(Replace negin007 with your DockerHub username if you fork this.)

docker pull negin007/mini-monitoring-app:latest
docker run -d -p 8080:8080 negin007/mini-monitoring-app:latest

Test it:

curl http://localhost:8080/health
curl http://localhost:8080/metrics

🧭 Project structure

mini-monitoring-app/
├─ main.go
├─ go.mod
├─ Dockerfile
├─ .dockerignore
├─ docker-compose.yml
├─ prometheus.yml
├─ .github/
│ └─ workflows/ci.yml
└─ README.md

🪜 The Steps

1. Write Go service

Minimal main.go with /health and /metrics.(Full file: main.go)

2. Instrumentation

We expose two custom metrics:

Counter health_requests_total → ever-increasing count of health checks.
Histogram response_latency_seconds → measures latency in buckets.

Why a histogram? Because you can calculate percentiles like P95 using Prometheus:

histogram_quantile(0.95,sum(rate(response_latency_seconds_bucket[1m])) by (le))

-rate(...[1m]) → per-second rate over 1 minute

-sum(... ) by (le) → aggregate all instances by bucket(le = “less or equal”)

-histogram_quantile(0.95, ...) → compute the 95th percentile latency (P95).

3. Dockerize the service

Dockerfile: (Full file: Dockerfile)

Build & run locally:

docker build -t yourname/mini-monitoring-app:local .
docker run -p 8080:8080 yourname/mini-monitoring-app:local

4. Validate endpoints locally:

We should see {"status":"UP"}.

curl http://localhost:8080/health
curl http://localhost:8080/metrics

5. Add Monitoring Stack (Prometheus + Grafana)

prometheus.yml config:

global:
  scrape_interval: 5s  

scrape_configs:
  - job_name: "mini-monitoring-app"
    static_configs:
      - targets: ["app:8080"]

docker-compose.yml spins up app + Prometheus + Grafana.
(Full files: prometheus.yml , docker-compose.yml)

Run all services:

docker-compose up -d : App → http://localhost:8080
Prometheus → http://localhost:9090 (check Status → Targets)
Grafana → http://localhost:3000 (login admin / admin)

6. Build a Grafana dashboard

Two common panel types:

Graph/Time series → trends over time (great for latency/throughput)
Gauge/Stat → current value or single number (great for “count now”)

Example panels:

Stat: health_requests_total (total health checks)
Time series (P95 latency):

histogram_quantile(0.95, sum(rate(response_latency_seconds_bucket[1m])) by (le))

7. CI/CD with GitHub Actions

Workflow .github/workflows/ci.yml:

Runs Go tests
Builds Docker image
Pushes image to DockerHub

Required secrets(Repo → Settings → Secrets → Actions):

DOCKERHUB_USERNAME → your DockerHub username
DOCKERHUB_TOKEN → DockerHub access token (Read/Write)

(Full file:ci.yml)

✅ Conclusion

This tiny monitoring app shows how a real-world service can be built, observed, and shipped with modern practices:

Go for a lightweight service
Prometheus + Grafana for observability
Docker & GitHub Actions for CI/CD automation

👉 Repo: Mini-Monitoring-App

Thank you for reading! 🍀

A CRUD API with Go, using the Gin framework and MongoDB.

Negin Saljooghi — Thu, 15 May 2025 13:45:19 +0000

Hi, here we want to create a simple and clean RESTful API built with Golang (Gin), MongoDB, and JWT Authentication.
This API allows you to register, log in, and perform user management operations securely.
you can find the source code here : sourcecode

📦 Features of Project

🔑 User registration and login with secure password hashing
🛡️ JWT-based authentication
🔄 Full ‍‍CRUD operations for users
✅ Input validation using go-playground/validator
📚 Swagger documentation with swaggo/gin-swagger
💾 MongoDB integration using mongo-driver
🧪 Tests for core functionalities

⚙️ Prerequisites
‌Befor starting make sure that you have these :

latest version of go
postman or curl for api testing

🔨 Initializing a Go project:

First of all create a folder for project :

mkdir go-crud-api
cd go-crud-api

For initializing a Go project we usually run this command : go mod init . this command create a file (go.mod) in your directory , this file is using for dependency management of your project. so open your terminal & run this command go mod init then write this go mod init github.com/yourusername/go-crud-api in the file if you doesn't create any repo for your project you can just write go mod init my-project then change it to your repo address.

we use Gin for creating api :go get -u github.com/gin-gonic/gin

📁 Project structure

go-crud-api/
│
├── main.go
├── config/          ← Database settings and ...
│   └── db.go
├── controller/      ← Controllers (logic related to APIs)
│   └── user.go
├── model/           ← Data structures and models
│   └── user.go
├── middleware/      ← Middlewares (like auth)
│   └── authMiddleware.go
├── routes/          ← Routing
│   └── userRoutes.go
├── utils/           ← Helper functions (like ValidateToken)
│   └── jwt.go
├── go.mod / go.sum  ← Package information
└── README.md        ← Project description

🧠 Explain Code

1. go-crud-api/main.go

package main

import (
    "crud-api-go/config"
    "crud-api-go/routes"
    "github.com/gin-gonic/gin"
)

func main() {
    config.ConnectDB()
    router := gin.Default()
    routes.UserRoutes(router)
    router.Run("localhost:8080")
}

The main function is the entry point of our program.
config.ConnectDB() : this line calls a function(ConnectDB)from config package. this function is responsible for establishing connection to your database.
router := gin.Default() : A router is a core of a web app , it determines how the app responds to different client request at different URL.
routes.UserRoutes(router) : This line calls a function userRoutes from the routes package,passing the Gin router as an argument.this function is responsible for defining all the API routes related to users (like creating, reading, updating, and deleting users).
router.Run("localhost:8080") : This line starts the Gin web server makes it listen for incoming HTTP requests on the address localhost:8080.

2. go-crud-api/config/db.go

Setting Up Our MongoDB Connection in Go**

Packages We Rely On:

time, context: Used for managing timeouts during the database connection process.
os, log, fmt: Essential for interacting with the operating system (reading environment variables), logging errors, and printing informational messages.
github.com/joho/godotenv: A library for loading environment variables from a .env file.
go.mongodb.org/mongo-driver/mongo & go.mongodb.org/mongo-driver/mongo/options: The official Go driver for MongoDB.
var DB *mongo.Database : Here, we declare a global variable DB of type *mongo.Database. This allows us to easily access the established database connection from anywhere in our Go application.
err := godotenv.Load() : We use the godotenv.Load() function to read key-value pairs from our .env file and make them available as environment variables within our application.

if err != nil {
    log.Fatal("❌ Error loading .env file")
}

If the .env file failed to load the program execution will be halted.

mongoURI := os.Getenv("MONGO_URI")
databaseName := os.Getenv("DB_NAME")

with os.Getenv we get the environmental variable for connecting to database.

clientOptions := options.Client().ApplyURI(mongoURI) : This line is using for setup connection settings.

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

A context is created with a 10-second timeout to prevent the connection from hanging indefinitely. The defer cancel() ensures that the context's resources are released when the function exits.

client, err := mongo.Connect(ctx, clientOptions) : Here, we attempt to establish a connection to our MongoDB instance using the configured clientOptions and the context we created.

DB = client.Database(databaseName) : Finally we setup the database instance, so it's accessible through out the entire application.

package config

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

    "github.com/joho/godotenv"
    "go.mongodb.org/mongo-driver/mongo"
    "go.mongodb.org/mongo-driver/mongo/options"
)

var DB *mongo.Database

func ConnectDB() {
    // Load environment variables
    err := godotenv.Load()
    if err != nil {
        log.Fatal("❌ Error loading .env file")
    }

    // Get URI and database name from .env file
    mongoURI := os.Getenv("MONGO_URI")
    databaseName := os.Getenv("DB_NAME")

    if mongoURI == "" {
        log.Fatal("❌ MONGO_URI is not set in .env")
    }
    if databaseName == "" {
        log.Fatal("❌ DB_NAME is not set in .env")
    }

    // Set up connection options
    clientOptions := options.Client().ApplyURI(mongoURI)

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

    // Connect to MongoDB
    client, err := mongo.Connect(ctx, clientOptions)
    if err != nil {
        log.Fatal("❌ MongoDB connection error:", err)
    }

    // Ping the database to test connection
    err = client.Ping(ctx, nil)
    if err != nil {
        log.Fatal("❌ MongoDB ping error:", err)
    }

    fmt.Println("✅ Connected to MongoDB Atlas!")

    // Set the selected database
    DB = client.Database(databaseName)
}

3. go-crud-api/routes/userRoutes.go

This file is related to defining HTTP routes.we define public routes such as signup & login then we created a group of routes that are connected to the authentication middleware and include CRUD operations on users.

package routes

import (
    "crud-api-go/controller"
    "crud-api-go/middleware"

    "github.com/gin-gonic/gin"
)

func UserRoutes(router *gin.Engine) {
    router.POST("/signup", controller.Signup)
    router.POST("/login", controller.Login)

    protected := router.Group("/")
    protected.Use(middleware.AuthMiddleware())
    {
        protected.GET("/users", controller.GetUsers)
        protected.GET("/users/:id", controller.GetUserByID)
        protected.POST("/users", controller.CreateUser)
        protected.PUT("/users/:id", controller.UpdateUser)
        protected.DELETE("/users/:id",controller.DeleteUser)
    }
}

we define a function named UserRoutes.this function will be responsible for defining all the API endpoints related to the users. this function take a pointer to a gin .Engine as an argument. the gin.Engin is the main instance of the Gin router.

protected := router.Group("/") : this line creates a new route group using the router.Group("/") method.The / shows that all routes defined within this group will have a common base path.
protected.Use(middleware.AuthMiddleware()) : This means that for any request made to the routes defined within this group, the AuthMiddleware() function will be executed first.

4. go-crud-api/model/user.go

Model structures in this file are designed for three purposes: storing data in MongoDB (User), securely responding to clients (UserResponse and AuthResponse), and receiving input from clients for registration, login, or editing.

package model

import "go.mongodb.org/mongo-driver/bson/primitive"

type User struct {
    ID       primitive.ObjectID `json:"id,omitempty" bson:"_id,omitempty"`
    Name     string             `json:"name" bson:"name" validate:"required,min=2,max=50"`
    Email    string             `json:"email" bson:"email" validate:"required,email"`
    Password string             `json:"password,omitempty" bson:"password,omitempty" validate:"required,min=6"`
}

type UserResponse struct {
    ID    primitive.ObjectID `json:"id"`
    Name  string             `json:"name"`
    Email string             `json:"email"`
}

type AuthResponse struct {
    Token string       `json:"token"`
    User  UserResponse `json:"user"`
}

type SignupInput struct {
    Name     string `json:"name" validate:"required"`
    Email    string `json:"email" validate:"required,email"`
    Password string `json:"password" validate:"required"`
}

type LoginInput struct {
    Email    string `json:"email" validate:"required,email"`
    Password string `json:"password" validate:"required"`
}

type CreateUserInput struct {
    Name     string `json:"name" validate:"required"`
    Email    string `json:"email" validate:"required,email"`
    Password string `json:"password" validate:"required"`
}

type UpdateUserInput struct {
    Name  string `json:"name" validate:"required,min=2,max=50"`
    Email string `json:"email" validate:"required,email"`
}

5. go-crud-api/controller/user.go

In this file we have 5 main controller functions for CRUD operations on users, all written using Gin and connected to the MongoDB database. We utilize input validation, and all requests, except for signup and login, require JWT authentication.

First of all we import packages , these packages are for interacting with the MongoDB database, managing time, performing validation, and the Gin framework for handling HTTP requests, config for database access and model for defining data structures.
Helper Function and Validation

func getUserCollection() *mongo.Collection {
    return config.DB.Collection("users")
}

This function retrieves the MongoDB collection named users from the existing DB connection in the config package.

var validate = validator.New()

We use the 'validator' package to check user inputs (e.g., whether fields are required or the email structure is correct).

GetUsers : The GetUsers function retrieves a list of users from the database and responds in JSON format.
GetUserByID : Retrieving a specific user from the database by ID and responding in JSON format.
CreateUser : Creating a new user and saving it to MongoDB.
UpdateUser : Updating user information in the database based on the ID.
DeleteUser : Deleting a user from the database based on the ID.

package controller

import (
    "context"
    "crud-api-go/config"
    "crud-api-go/model"
    "net/http"
    "time"

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

func getUserCollection() *mongo.Collection {
    return config.DB.Collection("users")
}

var validate = validator.New()

func GetUsers(c *gin.Context) {
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    cursur, err := getUserCollection().Find(ctx, bson.M{})
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": "error fetching users"})
        return
    }
    defer cursur.Close(ctx)

    var users []model.User
    if err := cursur.All(ctx, &users); err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": "error parsing users"})
        return
    }

    var userslist []model.UserResponse
    for _, u := range users {
        userslist = append(userslist, model.UserResponse{
            ID:    u.ID,
            Name:  u.Name,
            Email: u.Email,
        })
    }
    c.JSON(http.StatusOK, userslist)

}

func GetUserByID(c *gin.Context) {
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    idParam := c.Param("id")
    objectId, err := primitive.ObjectIDFromHex(idParam)

    if err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid ID Format"})
        return
    }

    var user model.User
    err = getUserCollection().FindOne(ctx, bson.M{"_id": objectId}).Decode(&user)
    if err != nil {
        c.JSON(http.StatusNotFound, gin.H{"error": "user not found"})
        return
    }
    c.JSON(http.StatusOK, user)
}

func CreateUser(c *gin.Context) {
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    var input model.CreateUserInput
    if err := c.BindJSON(&input); err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid input"})
        return
    }

    if err := validate.Struct(input); err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
        return
    }

    newUser := model.User{
        ID:       primitive.NewObjectID(),
        Name:     input.Name,
        Email:    input.Email,
        Password: input.Password, 
    }

    _, err := getUserCollection().InsertOne(ctx, newUser)
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": "failed to create user"})
        return
    }

    c.JSON(http.StatusCreated, model.UserResponse{
        ID:    newUser.ID,
        Name:  newUser.Name,
        Email: newUser.Email,
    })
}

func UpdateUser(c *gin.Context) {
    idParam := c.Param("id")

    objectId, err := primitive.ObjectIDFromHex(idParam)
    if err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid user ID"})
        return
    }

    var updatedUser model.UpdateUserInput
    if err := c.BindJSON(&updatedUser); err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid JSON"})
        return
    }

    if err := validate.Struct(updatedUser); err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
        return
    }

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

    update := bson.M{
        "$set": bson.M{
            "name":  updatedUser.Name,
            "email": updatedUser.Email,
        },
    }

    res, err := getUserCollection().UpdateOne(ctx, bson.M{"_id": objectId}, update)
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to update user"})
        return
    }

    if res.MatchedCount == 0 {
        c.JSON(http.StatusNotFound, gin.H{"error": "User not found"})
        return
    }

    c.JSON(http.StatusOK, gin.H{"message": "User updated successfully"})
}

func DeleteUser(c *gin.Context) {
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    idParam := c.Param("id")
    objectId, err := primitive.ObjectIDFromHex(idParam)
    if err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid ID format"})
        return
    }

    res, err := getUserCollection().DeleteOne(ctx, bson.M{"_id": objectId})
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": "failed to delete user"})
        return
    }

    if res.DeletedCount == 0 {
        c.JSON(http.StatusNotFound, gin.H{"error": "User not found"})
        return
    }

    c.JSON(http.StatusOK, gin.H{"message": "User deleted"})
}

6. go-crud-api/controller/auth.go

In this file, we have two functions: Signup and Login. Signup registers a new user, hashes their password, and generates a JWT. Login verifies the user's email and password and, upon successful authentication, sends back a JWT. This token is subsequently used by the middleware for authentication.

Signup: This function handles new user registration. It takes user information, checks if the email is not already taken, hashes the password, and saves the user to the database. Finally, it returns a JWT token.

Login: This function is used for user login. It receives the email and password, and if they are valid, it generates a JWT token.

package controller

import (
    "context"
    "crud-api-go/model"
    "crud-api-go/utils"
    "net/http"
    "strings"
    "time"

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

func Signup(c *gin.Context) {
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    var input model.SignupInput
    if err := c.ShouldBindJSON(&input); err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid input"})
        return
    }

    var existingUser model.User
    err := getUserCollection().FindOne(ctx, bson.M{"email": input.Email}).Decode(&existingUser)
    if err == nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": "User already exists"})
        return
    }

    hashedPassword, err := bcrypt.GenerateFromPassword([]byte(input.Password), bcrypt.DefaultCost)
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to hash password"})
        return
    }

    newUser := model.User{
        ID:       primitive.NewObjectID(),
        Name:     input.Name,
        Email:    strings.ToLower(input.Email),
        Password: string(hashedPassword),
    }

    _, err = getUserCollection().InsertOne(ctx, newUser)
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to create user"})
        return
    }

    token, err := utils.GenerateJWT(newUser.Email)
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to create token"})
        return
    }

    c.JSON(http.StatusCreated, model.AuthResponse{
        Token: token,
        User: model.UserResponse{
            ID:    newUser.ID,
            Name:  newUser.Name,
            Email: newUser.Email,
        },
    })
}


func Login(c *gin.Context) {
    ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
    defer cancel()

    var input model.LoginInput
    if err := c.ShouldBindJSON(&input); err != nil {
        c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid input"})
        return
    }

    var foundUser model.User
    err := getUserCollection().FindOne(ctx, bson.M{"email": input.Email}).Decode(&foundUser)
    if err != nil {
        c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid email or password"})
        return
    }

    err = bcrypt.CompareHashAndPassword([]byte(foundUser.Password), []byte(input.Password))
    if err != nil {
        c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid credentials. Please check your email and password"})
        return
    }

    token, err := utils.GenerateJWT(foundUser.Email)
    if err != nil {
        c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to create token"})
        return
    }

    c.JSON(http.StatusOK, model.AuthResponse{
        Token: token,
        User: model.UserResponse{
            ID:    foundUser.ID,
            Name:  foundUser.Name,
            Email: foundUser.Email,
        },
    })
}

7. go-crud-api/middleware/authMiddleware.go

Here we createa middleware to protect sensitive routes that require authentication, using JWT tokens.
This middleware (AuthMiddleware()) checks the Authorization header. If it's in the Bearer <token> format, it extracts the token, validates it using the JWT secret, and if valid, adds the user's email to the context for subsequent use. If there's an issue, the request is aborted.

package middleware

import (
    "crud-api-go/utils"
    "net/http"
    "strings"
    "github.com/gin-gonic/gin"
)

func AuthMiddleware() gin.HandlerFunc {
    return func(c *gin.Context) {
        authHeader := c.GetHeader("Authorization")
        if authHeader == "" {
            c.JSON(http.StatusUnauthorized, gin.H{"error": "Authorization header missing"})
            c.Abort()
            return
        }
        const bearerPrefix = "Bearer "
        if !strings.HasPrefix(authHeader, bearerPrefix) {
            c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid Authorization header format"})
            c.Abort()
            return
        }
        tokenString := strings.TrimPrefix(authHeader, bearerPrefix)
        claims, err := utils.ValidateToken(tokenString)
        if err != nil {
            c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid token"})
            c.Abort()
            return
        }
        c.Set("userEmail", claims.Email)
        c.Next()
    }
}

8. ‍‍go-crud-api/utils/jwt.go

This file contains two key functions for working with JWT tokens.

GenerateJWT is used to create a token with the user's email and a 24-hour expiration time. ‍
ValidateToken is used to verify the token's validity and retrieve the information it contains. The HS256 algorithm and an environment variable are used for signing to enhance security.

package utils

import (
    "os"
    "time"

    "github.com/golang-jwt/jwt/v5"
)

var jwtKey = []byte(os.Getenv("JWT_SECRET"))

type Claims struct {
    Email string `json:"email"`
    jwt.RegisteredClaims
}

// Generate token
func GenerateJWT(email string) (string, error) {
    expirationTime := time.Now().Add(24 * time.Hour)

    claims := &Claims{
        Email: email,
        RegisteredClaims: jwt.RegisteredClaims{
            ExpiresAt: jwt.NewNumericDate(expirationTime),
        },
    }

    token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
    tokenString, err := token.SignedString(jwtKey)
    if err != nil {
        return "", err
    }

    return tokenString, nil
}

// validate Token
func ValidateToken(tokenString string) (*Claims, error) {
    claims := &Claims{}

    token, err := jwt.ParseWithClaims(tokenString, claims, func(token *jwt.Token) (interface{}, error) {
        return jwtKey, nil
    })

    if err != nil {
        return nil, err
    }

    if !token.Valid {
        return nil, jwt.ErrTokenInvalidClaims
    }

    return claims, nil
}

Now We've reached the end of this tutorial! I hope this guide has been helpful for you in building a simple and secure API with Go, Gin, MongoDB, and JWT.
go-crud-api

Thank you for reading! 🍀

Vue3 crud app with json-server and axios

Negin Saljooghi — Tue, 12 Sep 2023 14:28:47 +0000

Hi, here we want to make a simple crud app with Vue.js by using json-server, axios and Tailwind CSS for styling.
In this app we have two fields: name, username with three default values that we can edit, delete them or add a new one.
You can find source code here: source code

let's start this project together step by step:

1. Setup project

Run vue create vue-crud-app to create a new app. Open the project and run npm run serve to see the project in your browser and then open a new terminal and run this command to start json-server :npx json-server --watch data/data.json --port 8000.

2. Files & Folder

we just need App.vue file and delete other files. Then create two folders: components & data.

Components :

In the src folder, create a components folder to put all of our files inside it. We have five components inside this folder :

AddUser.vue: to add a user.

EditUser.vue: to edit a user.

UserList.vue: to show all users.

Home.vue: it is our homepage,where we show UserList.vue & AddUser.vue components.

UserDetail.vue: to show user detail.

data:

It is in the root folder. Inside this folder create a file and called it data.json and put all of our data inside it.

{
  "users":[
    {
      "name":"Negin",
      "username":"negin007",
      "id":1
    },
    {
      "name":"Craig",
      "username":"benisphere",
      "id":2
    },
    {
      "name":"Ben",
      "username":"siliconeidolon",
      "id":3
    }
  ]
}

3.Code

router.js

src/router.js .
It is used to define and configure the router for our application & allowing you to navigate between different pages or components based on the URL.

const routes = [
  {
    path: "/",
    name: "users",
    component: () => import("./components/Home")
  },
  {
    path: "/user/:id",
    name: "editUser",
    component: () => import("./components/EditUser")
    // props: true
  },
  {
    path: "/addUser",
    name: "addUser",
    component: () => import("./components/AddUser")
  },
  {
    path: "/users/:id",
    name: "userDetail",
    component: () => import("./components/UserDetail")
  }
];

App.vue

src/App.vue.
It has blockquote tag and <router-view/> to display the content of your different pages.

<template>
  <blockquote class="text-2xl font-semibold italic text-center text-blue-500 my-10">
    <span
      class="mx-2 before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-400 relative inline-block">
      <span class="relative text-white "> CRUD App </span>
    </span>
    with Vue.js
  </blockquote>
  <router-view />
</template>

<script>
export default {};
</script>

Home.vue

src/components/Home.vue.
It contains UserList and AddUser components.we fetch users here and then pass it as props to these components.

<template>
  <div class="max-w-xl pb-8 mx-auto px-5 bg-slate-100">
    <UserList :users="users" @userDeleted="handleUserDeleted" />
    <AddUser :users="users" />
  </div>
</template>

<script>
import UserList from "./UserList.vue";
import AddUser from "./AddUser.vue";
import axios from 'axios';

export default {
  components: {
    UserList,
    AddUser,
  },
  data() {
    return {
      users: []
    }
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    fetchUsers() {
      axios
        .get('http://localhost:8000/users')
        .then((res) => { this.users = res.data })
        .catch(err => console.log(err))
    },
    handleUserDeleted(userId) {
      this.users = this.users.filter((user) => user.id !== userId);
    }
  }
};
</script>

UserList

src/components/UserList.vue.
It shows list of users with two buttons for edit and delete each user.By click on name you can see user detail.
we have two methods:

deleteUser : for delete each user.
updateUser : for navigate to edit page and then edit name & username.

<template>
  <div v-if="users.length" class='py-5'>
    <div v-for="user in  users " :key="user.id" class='flex justify-between border-b-4'>
      <div class="flex ">
        <router-link :to="'/users/' + user.id">
          <p class='my-3 px-3'>{{ user.name }}</p>
        </router-link>
        <p class='my-3 px-3'>{{ user.username }}</p>
      </div>
      <div class="flex ">
        <p @click="updateUser(user.id)" class='mx-2 my-3 px-2 py-1 text-green-800
     hover:bg-green-400 hover:rounded-md hover:border hover:border-green-800'>EDIT</p>
        <p @click="deleteUser(user.id)" class='my-3 px-2 py-1 text-red-800 
     hover:bg-red-400 hover:rounded-md hover:border hover:border-red-800'>DELETE</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import UserDetail from './UserDetail.vue';

export default {
  components: {
    UserDetail,
  },

  props: ['users'],
  methods: {
    deleteUser(id) {
      axios
        .delete(`http://localhost:8000/users/${id}`)
        .then(() => {
          this.$emit('userDeleted', id)
        })
        .catch((error) => { console.log(error) })
    },
    updateUser(id) {
      this.$router.push(`/user/${id}`)
    }
  }
}
</script>

EditUser

src/components/EditUser.vue.
We have two input fields for showing name & username.
Two methods for updating user and cancel editing and back to home page.

<template>
  <div class="flex items-center justify-center">
    <form @submit.prevent="handleSubmit">
      <div class='flex flex-col justify-center items-center bg-slate-100 p-10 mt-10 rounded-md'>
        <input v-model="name" class='my-2 px-5 py-1 rounded-full border border-gray-600' />
        <input v-model="username" class='my-2 px-5 py-1 rounded-full border border-gray-600' />
      </div>
      <div class="flex my-2 mx-20">
        <button class='text-white mx-1 px-5 py-1 rounded-full bg-blue-500 hover:bg-blue-700'>Update User</button>
        <button class='text-white mx-1 px-5 py-1 rounded-full bg-blue-500 hover:bg-blue-700'
          @click="backToHome">Cancel</button>
      </div>

    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      id: this.$route.params.id,
      name: "",
      username: ""
    }
  },
  mounted() {
    axios
      .get('http://localhost:8000/users/' + this.id)
      .then((user) => {
        this.name = user.data.name;
        this.username = user.data.username;
      })
  },
  methods: {
    handleSubmit() {
      axios
        .put('http://localhost:8000/users/' + this.id, {
          name: this.name,
          username: this.username,
        })
        .then(() => {
          this.$router.push("/");
        })
    },
    backToHome() {
      this.$router.push('/')
    }
  },
}

UserDetail

src/components/UserDetail.vue.
To see user detail,here: name & username.

<template>
  <div class="max-w-xl pb-8 mx-auto px-5 bg-slate-100">
    <div class="flex flex-col text-center py-5 ">
      <p class='px-3 py-3 border-b-4'>Name : {{ user ? user.name : '' }}</p>
      <p class='px-3 py-3'>UserName : {{ user ? user.username : '' }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      user: null,
      id: this.$route.params.id
    }
  },
  mounted() {
    this.fetchUser();
  },
  methods: {
    fetchUser() {
      axios
        .get('http://localhost:8000/users/' + this.id)
        .then((res) => { this.user = res.data })
        .catch(err => console.log(err))
    }
  }
}
</script>

AddUser

src/components/AddUser.vue.
It has two fields for add name and username & a handleSubmit method to add user to list of users.

<template>
  <form @submit.prevent="handleSubmit">
    <div class='flex flex-col justify-center items-center '>
      <div class='mb-2'>
        <input class='px-3 py-1 rounded-full border border-gray-600' v-model="name" placeholder="Name" />
      </div>
      <div class='mb-2'>
        <input class='px-3 py-1 rounded-full border border-gray-600' v-model="username" placeholder="UserName" />
      </div>
      <div class='mb-2'>
        <button class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-3 rounded-full">
          Add
        </button>
      </div>
    </div>
  </form>
</template>

<script>
import axios from 'axios';

export default {
  props: ['users'],
  data() {
    return {
      name: '',
      username: ''
    }
  },
  methods: {
    handleSubmit() {
      axios
        .post("http://localhost:8000/users", {
          name: this.name,
          username: this.username,
        })
        .then((response) => {
          const data = response.data;
          this.users.push(data);
          this.name = "";
          this.username = "";
        });
    },
  }
}
</script>

Now here we go! We created a simple crud app with Vue.js, json-server, axios and Tailwind CSS.

Thank you for reading! 🍀

React + GraphQL CRUD

Negin Saljooghi — Mon, 28 Aug 2023 12:26:54 +0000

Here we want to create a simple CRUD app with react, GraphQL, Node.js and MongoDB- part 1, let's go:
You can find source code here: source code

Project Overview

This project has two folders, server and client. In this post we just work on the server(Backend) and for the next post we will work on the client(Frontend).

Backend:

We make a GraphQL server on node.js by using Express. This is where we describe how our Graph looks like, different types of data on our Graph, relationship between these data types, setting up different entry points (where we can query and retrieve information) to our Graph. And then we use MongoDB to store our data.

Frontend:

For the client side we use React, and also we use
Apollo, it allows us to use GraphQL on the frontend and inside react.

Also, we have GraphiQL it is like a frontend application that allows us to make a request to GraphQL and retrieve data back.

Start working on project

1. Initialize a node project : npm init
Inside the project folder, run this command, and it is going to create a package.json file for us.

2. Inside project folder we should create a folder and call it to server, all of our server side code will be inside this folder.

3. Create an express application: npm install express

4. Create index.js file

Inside this file we:

Set up our express app and listen to a specific port(5000).
Set up our GraphQL.we need to install two package: npm install graphql express-graphql.first one is the main graphql package which is a JavaScript implantation of GraphQL, the second one is a package that help our express app to interact with GraphQL becauseexpress doesn't understand GraphQL(require express-graphql module(grapqlHTTP)).
Setup some middleware. The way that we do that in express is by using app.use(). Like this one :

app.use('/graphql', graphqlHTTP({
   schema,
  graphiql: true
}));

Here we say the route that we gonna use on this middleware is /graphql and then fire a function. when a request to/graphql comes in and this function going to handle our GraphQL requests, and it takes some options inside an object. We have to pass schema and graphiql: true as a property to this middleware.
Schema, going to tell express graphql about our data and how graph will looks like.it says what data types are in the graph and relationship between them.

5. Create Schema.js file

schema has three responsibility:
define Object Type, define relationship between Object Type, define rootQuery.

Create a Schema to describe how the data in our graph will looks like, inside this file we're going to define our schema.
Schema describe the object type and the relations between these object types, how we can read data and interact with them.
Require the GraphQL. We install this package before.
We define ObjectType and define what this ObjectType is about (define name & fields)

Here, we just define one object type:TodoType.

const TodoType = new GraphQLObjectType({
  name: 'Todo',
  fields: () => ({
    id: { type: GraphQLID },
    title: { type: GraphQLString }
  })
});

The GraphQLObjectType is a function and takes in an object and this object going to define what this TodoType is all about.
name: a name for our object type.
fields:it is a function that returns an object, it's define the fields on this TodoType and then say what type is our fields.

6. Create RootQuery

RootQeury:it is our entry point to the graph. How we describe, a user can initially jump to the graph and grab data.
We define fields of this Root Queryand each of this fields going to be a type of RootQuery.first one is going to be a query for list of todos and the second is for one todo and the argument that we expected to get along with this query is id.
Also, we have type and resolve function for each field.
resolve function : how to get data when someone requested.it is for grabbing data and return what is needed.
this resolve function takes two parameters :parent & args. parent coming to play when we start relationship between data.

const RootQuery = new GraphQLObjectType({
  name: 'RootQueryType',
  fields: () => ({
    todos: {
      type: new GraphQLList(TodoType),
      resolve(parent, args) {
        return Todo.find();
      }
    },
    todo: {
      type: TodoType,
      args: { id: { type: GraphQLID } },
      resolve(parent, args) {
        return Todo.findById(args.id);
      }
    }
  })
});

7. Connect to database

To connect to the database, create a folder called config and then create db.js file inside it: server/config/db.js.
inside db.js file, first we bring mongoose to connect:

const mongoose = require('mongoose');

Second we have an async function called connectDB (because mongoose functions return promises) and then on the connect we pass our mongoose URL.

const connectDB = async () => {
const conn = await mongoose.connect('');
console.log(`mongoDB connected : ${conn.connection.host}`);
};

After that, we call this connectDB function inside index.js:

//connect to database
connectDB();

8. Mongoose Model

Create a models folder and then inside it createTodo.js file :server/models/Todo.js.
Here we're going to store our mongoose models.
This model represents different types of collection in our MongoDB instance.Mongoose schema, going to define the data that actually being stored in MongoDB and this is going to take an object with the fields that we want.
In our code, we use Todo model.this Todo model means how we interact with the todo collection then we use a method on it:

return Todo.find();
return Todo.findById(args.id);

9. Mutations

It allows us to change or mutate data like add, delete, edit data. We define our mutation in schema.js file.
Setting-up a mutation is like setting-up our RootQuery. We pass throw an object to GraphQLObjectType and this is going to have two property: name, fields.
This fields property let us store different kind of mutations that we want to make like addTodo, editTodo, deleteTodo, ....

    // Add todo
    addTodo: {
      type: TodoType,
      args: {
        title: { type: GraphQLNonNull(GraphQLString) },
      },
      resolve(parent, args) {
        const todo = new Todo({
          title: args.title
        });
        return todo.save();
      }
    },

For example: this addTodo property is going to be an object and takes these properties:type and args.

args: when a user makes a mutation from the frontend, then we expect them to send some kind of data or arguments.
Here, if a user wants to add a todo they're going to need send the todo title.(the fields that we want to add)

resolve: this function is where we take the argument that they send along the query. By using Todo model that, we import it before We make a new instance of todo and save it to the database.

Code:

index.js - server/index.js

const { graphqlHTTP } = require('express-graphql');
const express = require('express');
const schema = require('./schema/schema');
const app = express();
const connectDB = require('./config/db');
const cors = require('cors');

//connect to database
connectDB();

app.use(cors());

app.use('/graphql', graphqlHTTP({
  schema,
  graphiql: true
}));

app.listen(5000, () => {
  console.log('now listening for requests on port 5000');
});

schema.js - server/schema/schema.js

const {
  GraphQLObjectType,
  GraphQLID,
  GraphQLString,
  GraphQLSchema,
  GraphQLList,
  GraphQLNonNull
} = require('graphql');

//Mongoose models
const Todo = require('../models/Todo.js')

//todos Typeo
const TodoType = new GraphQLObjectType({
  name: 'Todo',
  fields: () => ({
    id: { type: GraphQLID },
    title: { type: GraphQLString }
  })
});

const RootQuery = new GraphQLObjectType({
  name: 'RootQueryType',
  fields: () => ({
    todos: {
      type: new GraphQLList(TodoType),
      resolve(parent, args) {
        return Todo.find();
      }
    },
    todo: {
      type: TodoType,
      args: { id: { type: GraphQLID } },
      resolve(parent, args) {
        return Todo.findById(args.id);
      }
    }
  })
});

// Mutations
const mutation = new GraphQLObjectType({
  name: 'Mutation',
  fields: {
    // Add todo
    addTodo: {
      type: TodoType,
      args: {
        title: { type: GraphQLNonNull(GraphQLString) },
      },
      resolve(parent, args) {
        const todo = new Todo({
          title: args.title
        });
        return todo.save();
      }
    },
    // Delete Todo
    deleteTodo: {
      type: TodoType,
      args: {
        id: { type: GraphQLNonNull(GraphQLID) },
      },
      resolve(parent, args) {
        return Todo.findByIdAndRemove(args.id)
      }
    },
    // Edit Todo
    editTodo: {
      type: TodoType,
      args: {
        id: { type: GraphQLNonNull(GraphQLID) },
        title: { type: GraphQLString },
      },
      resolve(parent, args) {
        return Todo.findByIdAndUpdate(
          args.id,
          {
            $set: {
              title: args.title,
            },
          },
          { new: true }
        );
      },
    },
  }
})

module.exports = new GraphQLSchema({
  query: RootQuery,
  mutation
})

Todo.js- server/models/Todo.js

const mongoose = require('mongoose');

const TodoSchema = new mongoose.Schema({
  title: {
    type: String,
  }
});

module.exports = mongoose.model('Todo', TodoSchema);

db.js - server/config/db.js

const mongoose = require('mongoose');

const connectDB = async () => {
const conn = await mongoose.connect('');
console.log(`mongoDB connected : ${conn.connection.host}`);
};

module.exports = connectDB;

Now here we go! We created a simple CRUD app with react, GraphQL, Node.js and MongoDB. In the below I put links that are helpful for me to create this project:
By the way The link to the front end section will be posted here soon!

The GraphQL tutorial playlist on The Net Ninja YouTube channel.

Full stack GraphQL, Express & React app - Traversy Media

Thank you for reading! 🍀

Crud-react-app with json-server and axios

Negin Saljooghi — Sat, 12 Aug 2023 14:02:29 +0000

Hi, here we want to make a simple crud app with react hooks by using json-server, axios and Tailwind CSS for styling.
In this app we have two fields: name, username with three default values that we can edit, delete them or add a new one.
You can find source code here: source code

let's start this project together step by step:

1. Setup project

Run npx create-react-app react-crud-app to create a new app. Open the project and run npm start to see the project in your browser and then open a new terminal and run this command to start json-server :npx json-server --watch data/data.json --port 8000

2. Files & Folder
we just need App.js file and delete other files. Then create two folders: components & data.

Components :

In the src folder, create a components folder to put all of our files inside it. We have four components inside this folder :

AddUser.js: to add a user

EditUser.js: to edit a user

UserList.js: to show all users

Home.js: it is our homepage

data:

It is in the root folder. Inside this folder create a file and called it data.json and put all of our data inside it.

{
  "users":[
    {
      "name":"Negin",
      "username":"negin007",
      "id":1
    },
    {
      "name":"Craig",
      "username":"benisphere",
      "id":2
    },
    {
      "name":"Ben",
      "username":"siliconeidolon",
      "id":3
    }
  ]
}

3. Code

App.js:

add path for components by using react-router-dom:

import React from 'react';
import { Routes, Route } from "react-router-dom";
import Home from './components/Home';
import EditUser from './components/EditUser';
import AddUser from './components/AddUser';

const App = () => {
  return (
    <>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/edit/:id' element={<EditUser />} />
        <Route path='/create' element={< AddUser />} />
      </Routes>
    </>
  );
}

export default App;

Home.js:

This is your home component, where you can see a list of users (UserList.js) and add a new user(AddUser).
Also, here we have a useEffect to fetch all users and a function(deleteUser) for deleting a user.

import axios from "axios";
import { useEffect, useState } from "react";
import UserList from "./UserList";
import AddUser from "./AddUser";

const Home = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true)
    axios.get("http://localhost:8000/users")
      .then(response => {
        setUsers(response.data)
      })
    setLoading(false)
  }, [])

  const deleteUser = (id) => {
    axios.delete(`http://localhost:8000/users/${id}`).then((response) => {
      const newUser = users.filter((user) => user.id !== id);
      console.log(response)
      setUsers(newUser);
    }).catch(error => {
      console.log(error)
    });
  }

  return (
    <div className="max-w-xl pb-8 mx-auto px-5 bg-slate-100">
      <UserList
        users={users}
        loading={loading}
        deleteUser={deleteUser}
      />
      <AddUser
        users={users}
        setUsers={setUsers}
      />
    </div>
  );
}

export default Home;

UserList.js:

A component for showing list of users.

Here we're passing users, loading, deleteUser as props to this component: users: list of users, loading: for the time before user loaded on the page and deleteUser function for deleting a user.

Another important thing in this component is edit button:
we wrap it inside a Link component and then when user click on this button it navigates to EditUser component.

import { Link } from "react-router-dom";

const UserList = ({ users, loading, deleteUser }) => {

  return (
    <div className='py-5'>
      {loading && <p>loading ...</p>}
      {users &&
        <ul>
          {(users.map((user) =>
            <li className='flex justify-between border-b-4' key={user.id}>
              <div className="flex ">
                <p className='my-3 px-3'>{user.name}</p>
                <p className='my-3 px-3'>{user.username}</p>
              </div>
              <div>
                <Link to={`/edit/${user.id}`}>
                  <button
                    className='mx-2 my-3 px-2 py-1 text-green-800
                       hover:bg-green-400 hover:rounded-md hover:border hover:border-green-800'
                  >EDIT</button>
                </Link>
                <button
                  className='my-3 px-2 py-1 text-red-800 
                        hover:bg-red-400 hover:rounded-md hover:border hover:border-red-800'
                  onClick={() => deleteUser(user.id)}
                >Delete</button>
              </div>
            </li>
          ))}
        </ul >
      }
    </div >
  )
}

export default UserList;

AddUser.js:

It is a form with two input fields (name & username) and a button to submit a new user. Here we pass setUsers, users as props to this component.

For submitting a new user we have handleSubmit function and inside this function we make a post request to post new name and username and the pass it to setUsers and then make the fields empty.

import React, { useState } from 'react';
import axios from "axios";

const AddUser = ({ setUsers, users }) => {
    const [name, setName] = useState("")
    const [username, setUserName] = useState("")

    const handleSubmit = (e) => {
        e.preventDefault();
        axios
            .post(`http://localhost:8000/users`, { name, username })
            .then((res) => {
                setUsers([...users, res.data])
                setName('');
                setUserName('');
            });
    };

    return (
            <form onSubmit={handleSubmit}>
                <div className='flex flex-col justify-center items-center sm:flex-row sm:justify-evenly'>
                    <div className='mb-2'>
                        <input
                            className='px-3 py-1 rounded-full border border-gray-600'
                            value={name} onChange={(e) => setName(e.target.value)} required
                            type="text" placeholder="Name" />
                    </div>
                    <div className='mb-2'>
                        <input
                            className='px-3 py-1 rounded-full border border-gray-600'
                            value={username} onChange={(e) => setUserName(e.target.value)} required
                            type="text" placeholder="UserName" />
                    </div>
                    <div className='mb-2'>
                        <button className="bg-blue-500 hover:bg-blue-700 text-white py-1 px-3 rounded-full">
                            Add
                        </button>
                    </div>
                </div>
            </form>
    );
}

export default AddUser;

EditUser.js:

This component is for editing each user, after click on edit button then we navigate to this component. Here we have a useEffect for loading the data that we want to edit and then a handleSubmit function for submitting the edited item.

import axios from "axios";
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router";

const EditUser = () => {
  const [data, setData] = useState([])
  const [name, setName] = useState('');
  const [username, setUserName] = useState('');

  const { id } = useParams();
  const navigate = useNavigate()

  useEffect(() => {
    axios.get("http://localhost:8000/users/" + id)
      .then(response => {
        const data = response.data;
        setName(data.name);
        setUserName(data.username);
      })
      .catch(error => console.log(error))
  }, [id])

  const handleSubmit = (e) => {
    e.preventDefault()
    axios.put("http://localhost:8000/users/" + id, {
      name,
      username
    })
      .then(response => {
        setData(response.data);
        navigate('/')
      })
  }

  const goHome = () => {
    navigate('/')
  }

  return (
    <div className="flex items-center justify-center">
      <form onSubmit={handleSubmit}>
        <div className='flex flex-col justify-center items-center bg-slate-100 p-10 mt-10 rounded-md'>
          <input
            className='my-2 px-5 py-1 rounded-full border border-gray-600'
            type="text" placeholder="Name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
          <input
            className='my-2 px-5 py-1 rounded-full border border-gray-600'
            type="text" placeholder="UserName"
            value={username}
            onChange={(e) => setUserName(e.target.value)}
          />
          <div className="flex my-2">
            <button
              className='text-white mx-1 px-5 py-1 rounded-full bg-blue-500 hover:bg-blue-700'>
              EDIT
            </button>
            <button
              onClick={goHome}
              className='text-white mx-1 px-5 py-1 rounded-full bg-blue-500 hover:bg-blue-700'
            >
              CANCEL
            </button>
          </div>
        </div>
      </form>
    </div>

  );
}

export default EditUser;

Now here we go! We created a simple crud app with react-hook, json-server, Axios and Tailwind CSS. In the below I put links that are helpful for me to create this project:

Build a CRUD App in React with Hooks

Thank you for reading! 🍀