DEV Community: Smruti Ranjan Rana

Simplify Angular Local State Management with Component Store

Smruti Ranjan Rana — Wed, 25 Oct 2023 09:18:36 +0000

Hey there! Just so you know, handling states in a front-end app is super important for making sure everything works smoothly and gives users a fantastic experience. The state is all about the up-to-date data and settings of the user interface, and it can change based on how users interact with the app or even due to outside events. By managing the state like a pro, you'll be able to steer the app's behaviour and make sure it responds just right to user input.

When it comes to managing the state of a front-end application, there are a bunch of cool techniques you can try out. Some popular options include using state management libraries like Redux or NGRX, working with component-based state management in frameworks like React or Angular and applying the Flux architecture. Plus, you can also take advantage of global state objects, local storage or session storage, and create your custom state management solutions to keep your app's behaviour and user experience in check.

Let's have some fun exploring state management together in Angular. 😄

Prerequisites

A basic understanding of Angular
A basic grasp of RxJs

Now, let's jump in and get started! 🚀

Service + Subject = ❤️

Service and Subject in Angular are well-liked for state management as they're simple and easy to put into action. Services help share data and methods across components, while Subjects, a kind of RxJS observable, let you use reactive programming to manage asynchronous data streams. Together, they offer a hassle-free way to handle the state without extra libraries or tricky setups.

That being said, this method does have some downsides, like struggling with scalability in big applications, making it tough to track state changes, and not having built-in tools for dealing with side effects. These challenges might encourage developers to look for stronger state management solutions that have the right architecture for managing states and ensuring a more predictable data flow.

Libraries from NGRX

The @ngrx/store and @ngrx/component-store libraries provide powerful state management solutions for Angular applications.

The Store library is perfect for managing the global state, making your data flow predictable and handling side effects like a breeze. Meanwhile, the ComponentStore library is all about managing local component states, giving you a lightweight and adaptable way to manage states within individual components. Plus, both libraries use the Redux pattern and RxJS observables to build efficient, reactive apps with a rock-solid architecture.

In this article, we'll mainly focus on how to use @ngrx/component-store for managing local states like pros. 😊

Component Store

This nifty little library is incredibly lightweight, with just one file containing all 524 lines of code (as of now) needed to manage your states. But don't let its size fool you - it's a powerful, high-performance, and thoroughly tested library that's sure to impress!

It's not that different from the Service with Subject approach, but the ComponentStore does the heavy lifting for you to manage observable streams and also provides a well-defined architecture to follow.

It is more structured than Service with Subject but it's not quite complex like the full @ngrx/store approach. It's a nice middle ground.

Just like any state management library, in this library also, we have methods to read, write and side-effects.

Read states

select()

The select() method is like a friendly helper that creates and gives you an observable representation of a piece of your local component state. It makes it super easy for you to access and respond to specific parts of the state.

readonly #cart$ = this.select((state) => state.cart);

What's more? You can use it to combine multiple selectors too! By doing so, you can craft more intricate and derived state slices from what's already there. This comes in handy when you need to access various parts of the state and mix them meaningfully.

 readonly #cart$ = this.select((state) => state.cart);
 readonly #cartValue$ = this.select(this.#cart$,
    (cart) => cart.reduce((acc, item) => acc + item.product.price * item.quantity, 0)
 );

get()

The get() method is super useful when you need to access the state imperatively, especially within effects. It's designed to be used only within the ComponentStore, so it's kept private.

Although, frequent imperative reads might lead to some not-so-great architectural choices. Just remember, a selector is a go-to way to read the state reactively via Observable.

Write states

updater()

It's kind of like a reducer in Redux! The updater() method helps you create state update functions that change the component's local state in a friendly manner. It needs two things:

A callback function that takes the current state and a payload and then returns the updated state.
A default value for the payload.

The cool thing about updater() is that it makes sure state updates are done in an immutable and reactive way.

 readonly addProduct = this.updater((state: CartState, product: ProductInterface) => {
    return {
        ...state,
        cart: [...state.cart, { id: uuid4(), product, quantity: 1 }],
    };
 });

setState()

Just like updater(), setState() is a handy way to update the states in the ComponentStore. Usually, we use setState() for lazy initialization. To use it, all you need to do is provide the state object, and the whole state will be reset to the value you give. Keep in mind that, unlike updater(), setState() doesn't return any function - it simply returns void.

addProduct(product: ProductInterface) {
    this.setState((state) => ({
        ...state,
        cart: [...state.cart, { id: uuid4(), product, quantity: 1 }],
    }));
}

patchState()

patchState() is quite similar to setState(), but with a little twist! Instead of providing the entire state object, you can update states partially.

addProduct(product: ProductInterface) {
    this.patchState((state) => ({
        cart: [...state.cart, { id: uuid4(), product, quantity: 1 }],
    }));
}

Side effects

effect()

The effect() method is a super useful tool for handling side effects and both synchronous and asynchronous operations. It lets you do tasks that are set off by specific actions, without directly changing the state. This nifty method helps you manage things like API calls in a reactive and tidy manner, and it's pretty great at giving you control over race operators too!

Just a quick note: You can send either observable or regular values as parameters when using the effect() method. No worries, it'll always automatically convert the parameters to observable for you. Pretty cool, right?

readonly #fetchProducts = this.effect(
    (params$: Observable<ProductListParams>) =>
        params$.pipe(
            tap(() => {
                this.setLoading(true);
            }),
            switchMap(({ size, page, query }) => {
                return this.#productService.getProducts(size, page, query).pipe(
                tapResponse(
                    (response) => {
                        this.setProducts(response.products);
                        this.setError(null);
                },
                (error: HttpErrorResponse) => {
                    this.setError(error.error?.message ?? error.message);
                },
                () => {
                    this.setLoading(false);
                }
            ));
        })
     )
);

Map operators

Let's have a chat about some awesome higher-order map operators that you can use in effects. They're super handy!

mergeMap()

This operator is pretty cool. It subscribes right away and doesn't cancel or discard anything. It's usually handy when you're deleting items.

Example: Imagine you have a table filled with data, and each row has a button to delete it. When users click on multiple delete buttons for different rows, they'll call the same method but with different IDs to delete. In this case, mergeMap() is super helpful because it calls all the APIs simultaneously without waiting for any of them. So, every time a user hits the delete button, the API is called in parallel.

concatMap()

This one subscribes after the last one finishes, and it's typically used when updating or creating items.

Example: Imagine you have a form, and when you click the submit button, it calls the API to save the value. Now, let's say the user clicks the submit button multiple times. No worries! concatMap() will call the APIs one after another, only after the last one finishes.

exhaustMap()

This operator helps you out by discarding extra calls until the last one is done. It's perfect for situations where you don't need to change any parameters.

Example: Picture this - you have a refresh button to update your table data. When you click the refresh button, the query parameters stay the same. In this case, you can use exhaustMap() to make sure it calls the API just once and ignores any extra clicks while the first one is still pending. No stress!

switchMap()

Now, this little buddy cancels the previous one if it hasn't finished yet. It's usually a great choice for queries with specific parameters.

Example: Imagine you've got a paginator and you're clicking the next button a bunch of times. This means the API will be called for every page, but it's uncertain which page's API will finish first. You might end up with previous data in the table because the earlier API was completed last. No worries, though! You can use switchMap() to help out. It cancels any previous APIs that are still pending and waits for the latest one's result. That way, you can be sure you'll have the right data to display in the table.

concatMap() is the safest operator!

concatMap() is a pretty safe operator since it makes sure everything stays in order by subscribing to the next observable only after the previous one finishes. This helps avoid any mix-ups and ensures that the results are processed just as they should be.

If you're ever unsure about which operator to pick, concatMap() is a solid choice. Just keep in mind that it might cause some performance hiccups in certain situations, like when you have a bunch of API calls waiting in line.

How to start?

Ready to begin? Simply run the following command to add the ComponentStore to your Angular app:

ng add @ngrx/component-store@latest

Initialization

Now, let's talk about initialization!

Using the constructor method

When you initialize through the constructor, the state becomes instantly accessible to the ComponentStore users.

export interface MoviesState {
    movies: Movie[];
}

@Injectable()
export class MoviesStore extends ComponentStore<MoviesState> {
    constructor() {
        super({ movies: [] });
    }
}

Lazy initialization

Sometimes, you might not want selectors to show any state until there's some useful data in the ComponentStore. No worries, you can initialize the state lazily! Just call setState() and pass the full state to it. You can use the same method to reset the state too.

Just a heads-up, make sure to initialize before updating the state, or else you might run into an error.

export interface MoviesState {
    movies: Movie[];
}

@Injectable()
export class MoviesStore extends ComponentStore<MoviesState> {
    constructor() {
        this.init(); // you can call it from your component as well
    }

    init() {
        this.setState({ movies: [] })
    }
}

Component Store use cases

Let's explore some fantastic use cases for leveraging ComponentStore!

Singleton state

You can use the ComponentStore as a global store too! When you're creating the component file, simply include provideIn: 'root' within injectable(). This will set up the ComponentStore file as a singleton.

Common component state

The ComponentStore is super versatile and can be used in shared components too. To manage the states of a shared component, just attach a store file to the component itself. This way, whenever you use the component in various places, it'll create a unique instance of the ComponentStore for that shared component.

Local component state

Just so you know, you can easily handle the local states of your component by simply linking a ComponentStore file with the component itself. This creates an isolated data flow, making everything neat!

Component "branch" state

If you've got a parent component with several child components and you'd like to share some common states among them, no worries! Just create a ComponentStore file with those shared states and link it up with all the child components. This way, they can all access the same info, making your life a whole lot easier!

Conclusion

In a nutshell, we can make ComponentStore our go-to buddy for handling local states. If we're faced with more complex states or need to juggle multiple global states, Store is here to help!

A cool plan could be: for local state management, let's team up with ComponentStore and for global state management, we'll count on Store.

Just keep in mind that the perfect approach might be different for each project, so stay flexible and have fun!

Hopefully, when you will think about managing states in your application, you will choose ComponentStore over Service with Subject. It provides a simpler and more reactive way to handle state management, leading to better performance and a smoother user experience. Give it a try and enjoy the benefits!

Feel free to ask if you have any more questions or give feedback. Happy coding!

Demo app - https://github.com/devsmranjan/slipkart

Learn more - https://ngrx.io/guide/component-store

Web Push Notification with web-push | Angular & Node JS

Smruti Ranjan Rana — Sun, 06 Feb 2022 16:16:13 +0000

Push notifications are a compelling way to engage users.

Push technology, or server push, is a style of Internet-based communication where the request for a given transaction is initiated by the publisher or central server. - Wikipedia

In this article, we will learn how to quickly add push notification in our Angular application with Service Worker.

Service Worker 👷‍♂️

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction.
Angular Service Worker

Prerequisites 📝

Basic knowledge of Angular & Node JS

So, If you are ready, Let's get started 🚀🚀🚀

Let’s Begin 🏁

Step 1 : Create a server

Let's create a server directory inside our root directory.



.
└───server

Inside /server, run below command to initialize npm.



npm init -y

A package.json file will be generated for you.



{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now let's install web-push by running following command.



npm i web-push

Updated package.json



{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "web-push": "^3.4.5"
  }
}

Amazing 👏👏👏

Let's create our server file server/index.js



server
    └───index.js
    └───package-lock.json
    └───package.json
    └───node_modules

Import web-push as below



const webpush = require('web-push'); // new

To subscribe push messages, we need to pass VAPID keys.
We can generate VAPID keys as below.



const webpush = require('web-push');

console.log(webpush.generateVAPIDKeys()); // new

Learn more about web push protocol here.

Let's run our server. It will print our keys in the console.



node .

Output



{
  publicKey: '<YOUR_PUBLIC_KEY>',
  privateKey: '<YOUR_PRIVATE_KEY>'
}

Now copy and put these keys in a variable. And remove console.log for generating keys.



const webpush = require('web-push');

const vapidKeys = { // new
  publicKey: '<YOUR_PUBLIC_KEY>', // new
  privateKey: '<YOUR_PRIVATE_KEY>' // new
}; // new

Then create a variable called subscription as below.



// get client subscription config from db
const subscription = {
    endpoint: '',
    expirationTime: null,
    keys: {
        auth: '',
        p256dh: '',
    },
};

endpoint: This contains a unique URL to a messaging server endpoint. This url is a public but unguessable endpoint to the Browser Push Service used by the application server to send push notifications to this subscription.

expirationTime: Some messages are time sensitive and don't need to be sent if a certain time interval has passed. This is useful in certain cases. For example, a message might contain an authentication code that expires after 1 minute.

p256dh: This is an encryption key that our server will use to encrypt the message, before sending it to the Push Service.

auth: This is an authentication secret, which is one of the inputs of the message content encryption process.

We'll get the subscription details from client. You can store that subscription config in DB and fetch the details here.

Now let's create payload for the notification.



const payload = {
    notification: {
        title: 'Title',
        body: 'This is my body',
        icon: 'assets/icons/icon-384x384.png',
        actions: [
            { action: 'bar', title: 'Focus last' },
            { action: 'baz', title: 'Navigate last' },
        ],
        data: {
            onActionClick: {
                default: { operation: 'openWindow' },
                bar: {
                    operation: 'focusLastFocusedOrOpen',
                    url: '/signin',
                },
                baz: {
                    operation: 'navigateLastFocusedOrOpen',
                    url: '/signin',
                },
            },
        },
    },
};

The Angular service worker supports the following operations:

openWindow : Opens a new tab at the specified URL, which is resolved relative to the service worker scope.

focusLastFocusedOrOpen : Focuses the last focused client. If there is no client open, then it opens a new tab at the specified URL, which is resolved relative to the service worker scope.

navigateLastFocusedOrOpen : Focuses the last focused client and navigates it to the specified URL, which is resolved relative to the service worker scope. If there is no client open, then it opens a new tab at the specified URL.

Check different payloads here.
You can play with different types of notification here.

Now add our third variable options.



const options = {
    vapidDetails: {
        subject: 'mailto:example_email@example.com',
        publicKey: vapidKeys.publicKey,
        privateKey: vapidKeys.privateKey,
    },
    TTL: 60,
};

At last call sendNotification() method to send notification as below.



// send notification
webpush.sendNotification(subscription, JSON.stringify(payload), options)
    .then((_) => {
        console.log('SENT!!!');
        console.log(_);
    })
    .catch((_) => {
        console.log(_);
    });

Here is our final code looks like.



const webpush = require('web-push');

const vapidKeys = {
  publicKey: '<YOUR_PUBLIC_KEY>',
  privateKey: '<YOUR_PRIVATE_KEY>'
};

// get client subscription config from db
const subscription = {
    endpoint: '',
    expirationTime: null,
    keys: {
        auth: '',
        p256dh: '',
    },
};

const payload = {
    notification: {
        title: 'Title',
        body: 'This is my body',
        icon: 'assets/icons/icon-384x384.png',
        actions: [
            { action: 'bar', title: 'Focus last' },
            { action: 'baz', title: 'Navigate last' },
        ],
        data: {
            onActionClick: {
                default: { operation: 'openWindow' },
                bar: {
                    operation: 'focusLastFocusedOrOpen',
                    url: '/signin',
                },
                baz: {
                    operation: 'navigateLastFocusedOrOpen',
                    url: '/signin',
                },
            },
        },
    },
};

const options = {
    vapidDetails: {
        subject: 'mailto:example_email@example.com',
        publicKey: vapidKeys.publicKey,
        privateKey: vapidKeys.privateKey,
    },
    TTL: 60,
};

// send notification
webpush.sendNotification(subscription, JSON.stringify(payload), options)
    .then((_) => {
        console.log('SENT!!!');
        console.log(_);
    })
    .catch((_) => {
        console.log(_);
    });

Great work so far 💪💪💪

Keep this server code as it is for now.
Let's create our fronted.

Step 2 : Create the client

Let's come back to our root directory and run below command to create an angular project client.



ng new client

Now inside client, run the below command to add all the necessary configurations for PWA in our app.



ng add @angular/pwa

Go to app.component.ts and add ngOnInit() method as below.



export class AppComponent implements OnInit {
  title = 'client';

  ngOnInit() {}
}

Import SwPush from @angular/service-worker and add to the constructor.



import { SwPush } from "@angular/service-worker";

export class AppComponent implements OnInit{
  title = 'client';

  constructor(private _swPush: SwPush) {}

  ngOnInit() {}
}

Then create a method requestSubscription() which will request for notification permission and will give us the subscription object.



 requestSubscription = () => {
    if (!this._swPush.isEnabled) {
      console.log("Notification is not enabled.");
      return;
    }

    this._swPush.requestSubscription({
      serverPublicKey: '<VAPID_PUBLIC_KEY_FROM_BACKEND>'
    }).then((_) => {
      console.log(JSON.stringify(_));
    }).catch((_) => console.log);
  };

Call requestSubscription() method in ngOnInit()



  ngOnInit() {
    this.requestSubscription();
  }

Let's build our app to run our application with the Service Worker.



ng build

After build complete, go to dist/client, you will find a file named ngsw-worker.js. That's our service worker.

Now install http-server globally in your machine.



npm i -g http-server

After that go to dist/client in your terminal and run



http-server -p 8000

Now our project is running at localhost:8000.

When we'll open our app, it will ask us for the notification permission.

Isn't this amazing? 🤩🤩🤩

And if we allow, then in console we will get the subscription object.

Now you can call your own api to save this details in DB.

But here we will copy the subscription object generated in our client, and replace the subscription value in our server.



const subscription = {
    endpoint:
        '<CLIENT_ENDPOINT>',
    expirationTime: null,
    keys: {
        p256dh: '<CLIENT_P256DH>',
        auth: '<CLIENT_AUTH>',
    },
};

Now in separate terminal go to /server directory and run



node .

You will immediately get your notification.

Now you can play with the click events by clicking the action buttons and the notification itself.

Conclusion 📋

Checkout web-push implementation for different backend technologies -
https://github.com/web-push-libs

Here is my GitHub link for this project - https://github.com/devsmranjan/web-push-notification-demo

Thank you for reading my article 🙂 . I hope you have learned something here.

Happy coding 👨‍💻👩‍💻

Thanks! Don't forget to give a ♥️ and follow :)

Golang for Web (Part-II): Gofiber REST API + Mongo DB Atlas

Smruti Ranjan Rana — Sun, 21 Mar 2021 07:50:47 +0000

Here is our second part of the Golang for Web series. In this article, we will see how we can add database to our app to store our todos.
Before that if you didn't follow the first part of this series, check that here.

If you've done that, let's dive into our code.

What will we build? 🤔

We will continue our Todo application from our first part of this series. Here we will add Mongo DB as our database to store our todos.

Prerequisites 📝

A basic knowledge of Golang syntax.
Go version 1.14 or above installed on your machine. Install from here
Postman or any other related app installed on your machine. Download Postman
Part-I of this project. Clone the project from here

If you have these, Let's get started 🚀

Let’s Begin 🏁

1. Setup our Project

First, Let's open our previous project in our VS Code (or any other Code Editor/ IDE).

Now, run the below command to install all the dependencies.

go get

Let's install mongo-driver for Mongo DB and godotenv to manage environment variables.

go get -u go.mongodb.org/mongo-driver github.com/joho/godotenv

Now, create models, config directories, and .env file in our root directory.

Our root directory will look like this:

.
|____config
|____controllers
| |____todo.go
|____models
|____routes
| |____todo.go
|____.env
|____go.mod
|____go.sum
|____main.go

2. Setup Mongo DB

Let's create an account at https://www.mongodb.com/ or you can sign in to your existing account.

Now create a new project, named gofiber-todo-api (or anything you want) and build a cluster.

Wait some time, while mongo db is creating a cluster for you.

Now click on connect
Then, add a database user and choose Allow Acess from Anywhere under Add a connection IP address and click on Add IP Address

Then choose Connect your application under connection method. Choose Go from the driver dropdown and 1.4 or later from the version dropdown.

Now copy that connection string. and paste it in .env file like below.

MONGO_URI=mongodb+srv://<dbUser>:<password>@cluster0.oynlp.mongodb.net/<dbname>?retryWrites=true&w=majority

Here replace <dbUser> with your database username, <password> with your user password, and <dbname> with a database name.

Additionally, add another two variables in .env file as below.

DATABASE_NAME=<dbname>
TODO_COLLECTION=todos

Here DATABASE_NAME is same as <dbname> in the MONGO_URI.

3. Configure Mongo DB

Let's create a db.go file inside config directory.

Now declare the package and import our required imports as below.

config/db.go will look like :

package config

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

    "go.mongodb.org/mongo-driver/mongo"
    "go.mongodb.org/mongo-driver/mongo/options"
    "go.mongodb.org/mongo-driver/mongo/readpref"
)

Then add MongoInstance as below.

// MongoInstance : MongoInstance Struct
type MongoInstance struct {
    Client *mongo.Client
    DB     *mongo.Database
}

// MI : An instance of MongoInstance Struct
var MI MongoInstance

config/db.go will look like :

package config

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

    "go.mongodb.org/mongo-driver/mongo"
    "go.mongodb.org/mongo-driver/mongo/options"
    "go.mongodb.org/mongo-driver/mongo/readpref"
)

// MongoInstance : MongoInstance Struct
type MongoInstance struct {
    Client *mongo.Client
    DB     *mongo.Database
}

// MI : An instance of MongoInstance Struct
var MI MongoInstance

Now let's create a ConnectDB() method with all the connection configuration.

// ConnectDB - database connection
func ConnectDB() {
    client, err := mongo.NewClient(options.Client().ApplyURI(os.Getenv("MONGO_URI")))
    if err != nil {
        log.Fatal(err)
    }

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

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

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

    fmt.Println("Database connected!")

    MI = MongoInstance{
        Client: client,
        DB:     client.Database(os.Getenv("DATABASE_NAME")),
    }
}

Let's go to main.go and import the following packages

import (
    "log" // new

    "github.com/devsmranjan/golang-fiber-basic-todo-app/config" // new
    "github.com/devsmranjan/golang-fiber-basic-todo-app/routes"
    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/fiber/v2/middleware/logger"
    "github.com/joho/godotenv" // new
)

Inside the main() initiate dotenv like below.

// dotenv
err := godotenv.Load()
if err != nil {
    log.Fatal("Error loading .env file")
}

and call the db configuration method ConnectDB()

// config db
config.ConnectDB()

Now our main() will look like :

func main() {
    app := fiber.New()
    app.Use(logger.New())

    // dotenv
    err := godotenv.Load()
    if err != nil {
        log.Fatal("Error loading .env file")
    }

    // config db
    config.ConnectDB()

    // setup routes
    setupRoutes(app)

    // Listen on server 8000 and catch error if any
    err = app.Listen(":8000")

    // handle error
    if err != nil {
        panic(err)
    }
}

Now let's run our app

go run main.go

You will get output like below

Database connected!

 ┌───────────────────────────────────────────────────┐
 │                    Fiber v2.2.0                   │
 │               http://127.0.0.1:8000               │
 │                                                   │
 │ Handlers ............ 12  Threads ............. 4 │
 │ Prefork ....... Disabled  PID ............. 55680 │
 └───────────────────────────────────────────────────┘

It means our database successfully connected.

Additional: To reload the server automatically, you can install air globally in your machine.

Now to run our app, in your root directory run

air

or for debug mode, you can run

air -d

4. Create Model

Now create a file named todo.go inside models directory.
And create our Todo like below

package models

import (
    "time"
)

// Todo - todo model
type Todo struct {
    ID        *string   `json:"id,omitempty" bson:"_id,omitempty"`
    Title     *string   `json:"title"`
    Completed *bool     `json:"completed"`
    CreatedAt time.Time `json:"createdAt"`
    UpdatedAt time.Time `json:"updatedAt"`
}

5. Connect Database with Controllers

Now go to controllers/todo.go and remove the following code first.

- // Todo : todo model
- type Todo struct {
-   ID        int    `json:"id"`
-   Title     string `json:"title"`
-   Completed bool   `json:"completed"`
- }
-
- var todos = []*Todo{
-   {
-       ID:        1,
-       Title:     "Walk the dog 🦮",
-       Completed: false,
-   },
-   {
-       ID:        2,
-       Title:     "Walk the cat 🐈",
-       Completed: false,
-   },
- }

And let's import required packages

import (
    "os" // new
    "strconv"

    "github.com/devsmranjan/golang-fiber-basic-todo-app/config" // new
    "github.com/devsmranjan/golang-fiber-basic-todo-app/models" // new
    "github.com/gofiber/fiber/v2"
    "go.mongodb.org/mongo-driver/bson" // new
    "go.mongodb.org/mongo-driver/bson/primitive" // new
    "go.mongodb.org/mongo-driver/mongo" // new
)

5.1 - GetTodos()

+   todoCollection := config.MI.DB.Collection(os.Getenv("TODO_COLLECTION"))
+
+   // Query to filter
+   query := bson.D{{}}
+
+   cursor, err := todoCollection.Find(c.Context(), query)
+
+   if err != nil {
+       return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
+           "success": false,
+           "message": "Something went wrong",
+           "error":   err.Error(),
+       })
+   }
+
+   var todos []models.Todo = make([]models.Todo, 0)
+
+   // iterate the cursor and decode each item into a Todo
+   err = cursor.All(c.Context(), &todos)
+   if err != nil {
+       return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
+           "success": false,
+           "message": "Something went wrong",
+           "error":   err.Error(),
+       })
+   }

    return c.Status(fiber.StatusOK).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todos": todos,
        },
    })

Now the GetTodos() will look like:

// GetTodos : get all todos
func GetTodos(c *fiber.Ctx) error {
    todoCollection := config.MI.DB.Collection(os.Getenv("TODO_COLLECTION"))

    // Query to filter
    query := bson.D{{}}

    cursor, err := todoCollection.Find(c.Context(), query)

    if err != nil {
        return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
            "success": false,
            "message": "Something went wrong",
            "error":   err.Error(),
        })
    }

    var todos []models.Todo = make([]models.Todo, 0)

    // iterate the cursor and decode each item into a Todo
    err = cursor.All(c.Context(), &todos)
    if err != nil {
        return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{
            "success": false,
            "message": "Something went wrong",
            "error":   err.Error(),
        })
    }

    return c.Status(fiber.StatusOK).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todos": todos,
        },
    })
}

5.2 - CreateTodo()

+   todoCollection := config.MI.DB.Collection(os.Getenv("TODO_COLLECTION"))
+
-   type Request struct {
-       Title string `json:"title"`
-   }
-
-   var data Request
+
+   data := new(models.Todo)

    err := c.BodyParser(&body)

    // if error
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse JSON",
            "error":   err,
        })
    }
-
-   // create a todo variable
-   todo := &Todo{
-       ID:        len(todos) + 1,
-       Title:     body.Title,
-       Completed: false,
-   }
-
-   // append in todos
-   todos = append(todos, todo)
-
+   data.ID = nil
+   f := false
+   data.Completed = &f
+   data.CreatedAt = time.Now()
+   data.UpdatedAt = time.Now()
+
+   result, err := todoCollection.InsertOne(c.Context(), data)
+
+   if err != nil {
+       return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
+           "success": false,
+           "message": "Cannot insert todo",
+           "error":   err,
+       })
+   }
+
+   // get the inserted data
+   todo := &models.Todo{}
+   query := bson.D{{Key: "_id", Value: result.InsertedID}}
+
+   todoCollection.FindOne(c.Context(), query).Decode(todo)

    return c.Status(fiber.StatusCreated).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todo": todo,
        },
    })

Now CreateTodo() will look like:

// CreateTodo : Create a todo
func CreateTodo(c *fiber.Ctx) error {
    todoCollection := config.MI.DB.Collection(os.Getenv("TODO_COLLECTION"))

    data := new(models.Todo)

    err := c.BodyParser(&data)

    // if error
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse JSON",
            "error":   err,
        })
    }

    data.ID = nil
    f := false
    data.Completed = &f
    data.CreatedAt = time.Now()
    data.UpdatedAt = time.Now()

    result, err := todoCollection.InsertOne(c.Context(), data)

    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot insert todo",
            "error":   err,
        })
    }

    // get the inserted data
    todo := &models.Todo{}
    query := bson.D{{Key: "_id", Value: result.InsertedID}}

    todoCollection.FindOne(c.Context(), query).Decode(todo)

    return c.Status(fiber.StatusCreated).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todo": todo,
        },
    })
}

5.3 - GetTodo()

+   todoCollection := config.MI.DB.Collection(os.Getenv("TODO_COLLECTION"))

    // get parameter value
    paramID := c.Params("id")

    // convert parameter value string to int
-   id, err := strconv.Atoi(paramID)
+   id, err := primitive.ObjectIDFromHex(paramID)

    // if error in parsing string to int
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse Id",
            "error":   err,
        })
    }

    // find todo and return
-   for _, todo := range todos {
-       if todo.ID == id {
-           return c.Status(fiber.StatusOK).JSON(fiber.Map{
-               "success": true,
-               "data": fiber.Map{
-                   "todo": todo,
-               },
-           })
-       }
-   }
-
-   // if todo not available
-   return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
-       "success": false,
-       "message": "Todo not found",
-   })
+
+   todo := &models.Todo{}
+
+   query := bson.D{{Key: "_id", Value: id}}
+
+   err = todoCollection.FindOne(c.Context(), query).Decode(todo)
+
+   if err != nil {
+       return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
+           "success": false,
+           "message": "Todo Not found",
+           "error":   err,
+       })
+   }
+
+   return c.Status(fiber.StatusOK).JSON(fiber.Map{
+       "success": true,
+       "data": fiber.Map{
+           "todo": todo,
+       },
+   })

Now GetTodo() will look like:

// GetTodo : get a single todo
// PARAM: id
func GetTodo(c *fiber.Ctx) error {
    todoCollection := config.MI.DB.Collection(os.Getenv("TODO_COLLECTION"))

    // get parameter value
    paramID := c.Params("id")

    // convert parameterID to objectId
    id, err := primitive.ObjectIDFromHex(paramID)

    // if error while parsing paramID
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse Id",
            "error":   err,
        })
    }

    // find todo and return

    todo := &models.Todo{}

    query := bson.D{{Key: "_id", Value: id}}

    err = todoCollection.FindOne(c.Context(), query).Decode(todo)

    if err != nil {
        return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
            "success": false,
            "message": "Todo Not found",
            "error":   err,
        })
    }

    return c.Status(fiber.StatusOK).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todo": todo,
        },
    })
}

5.4 - UpdateTodo()

+   todoCollection := config.MI.DB.Collection(os.Getenv("TODO_COLLECTION"))

    // find parameter
    paramID := c.Params("id")

    // convert parameter string to int
-   id, err := strconv.Atoi(paramID)

    // if parameter cannot parse
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse id",
            "error":   err,
        })
    }
-
-   // request structure
-   type Request struct {
-       Title     *string `json:"title"`
-       Completed *bool   `json:"completed"`
-   }

    var data Request
    err = c.BodyParser(&data)

    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse JSON",
            "error":   err,
        })
    }
-
-   var todo *Todo
-
-   for _, t := range todos {
-       if t.ID == id {
-           todo = t
-           break
-       }
-   }
-
-   if todo.ID == 0 {
-       return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
-           "success": false,
-           "message": "Not found",
-       })
-   }
+
+   query := bson.D{{Key: "_id", Value: id}}
+
+   // updateData
+   var dataToUpdate bson.D

    if data.Title != nil {
-       todo.Title = *data.Title
+       dataToUpdate = append(dataToUpdate, bson.E{Key: "title", Value: data.Title})
    }

    if data.Completed != nil {
-       todo.Completed = *data.Completed
+       dataToUpdate = append(dataToUpdate, bson.E{Key: "completed", Value: data.Completed})
    }
+
+    dataToUpdate = append(dataToUpdate, bson.E{Key: "updatedAt", Value: time.Now()})
+
+   update := bson.D{
+       {Key: "$set", Value: dataToUpdate},
+   }
+
+   // update
+   err = todoCollection.FindOneAndUpdate(c.Context(), query, update).Err()
+
+   if err != nil {
+       if err == mongo.ErrNoDocuments {
+           return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
+               "success": false,
+               "message": "Todo Not found",
+               "error":   err,
+           })
+       }
+
+       return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
+           "success": false,
+           "message": "Cannot update todo",
+           "error":   err,
+       })
+   }
+
+   // get updated data
+   todo := &models.Todo{}
+
+   todoCollection.FindOne(c.Context(), query).Decode(todo)

    return c.Status(fiber.StatusOK).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todo": todo,
        },
    })

Now UpdateTodo() will look like:

// UpdateTodo : Update a todo
// PARAM: id
func UpdateTodo(c *fiber.Ctx) error {
    todoCollection := config.MI.DB.Collection(os.Getenv("TODO_COLLECTION"))

    // find parameter
    paramID := c.Params("id")

    // convert parameterID to objectId
    id, err := primitive.ObjectIDFromHex(paramID)

    // if parameter cannot parse
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse id",
            "error":   err,
        })
    }

    // var data Request
    data := new(models.Todo)
    err = c.BodyParser(&data)

    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse JSON",
            "error":   err,
        })
    }

    query := bson.D{{Key: "_id", Value: id}}

    // updateData
    var dataToUpdate bson.D

    if data.Title != nil {
        // todo.Title = *data.Title
        dataToUpdate = append(dataToUpdate, bson.E{Key: "title", Value: data.Title})
    }

    if data.Completed != nil {
        // todo.Completed = *data.Completed
        dataToUpdate = append(dataToUpdate, bson.E{Key: "completed", Value: data.Completed})
    }

    dataToUpdate = append(dataToUpdate, bson.E{Key: "updatedAt", Value: time.Now()})

    update := bson.D{
        {Key: "$set", Value: dataToUpdate},
    }

    // update
    err = todoCollection.FindOneAndUpdate(c.Context(), query, update).Err()

    if err != nil {
        if err == mongo.ErrNoDocuments {
            return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
                "success": false,
                "message": "Todo Not found",
                "error":   err,
            })
        }

        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot update todo",
            "error":   err,
        })
    }

    // get updated data
    todo := &models.Todo{}

    todoCollection.FindOne(c.Context(), query).Decode(todo)

    return c.Status(fiber.StatusOK).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todo": todo,
        },
    })
}

5.5 - DeleteTodo()

+   todoCollection := config.MI.DB.Collection(os.Getenv("TODO_COLLECTION"))

    // get param
    paramID := c.Params("id")
-
-   // convert param string to int
+   // convert parameter to object id
-   id, err := strconv.Atoi(paramID)
+   id, err := primitive.ObjectIDFromHex(paramID)

    // if parameter cannot parse
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse id",
            "error":   err,
        })
    }

    // find and delete todo
-   for i, todo := range todos {
-       if todo.ID == id {
-
-           todos = append(todos[:i], todos[i+1:]...)
-
-           return c.SendStatus(fiber.StatusNoContent)
-       }
-   }
+
+   query := bson.D{{Key: "_id", Value: id}}
+
+   err = todoCollection.FindOneAndDelete(c.Context(), query).Err()
+
+   if err != nil {
+       if err == mongo.ErrNoDocuments {
+           return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
+               "success": false,
+               "message": "Todo Not found",
+               "error":   err,
+           })
+       }
+
+       return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
+           "success": false,
+           "message": "Cannot delete todo",
+           "error":   err,
+       })
+   }
-
-   // if todo not found
-   return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
-       "success": false,
-       "message": "Todo not found",
-   })
+
+    return c.SendStatus(fiber.StatusNoContent)

Now DeleteTodo() will look like:

// DeleteTodo : Delete a todo
// PARAM: id
func DeleteTodo(c *fiber.Ctx) error {
    todoCollection := config.MI.DB.Collection(os.Getenv("TODO_COLLECTION"))

    // get param
    paramID := c.Params("id")

    // convert parameter to object id
    id, err := primitive.ObjectIDFromHex(paramID)

    // if parameter cannot parse
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse id",
            "error":   err,
        })
    }

    // find and delete todo
    query := bson.D{{Key: "_id", Value: id}}

    err = todoCollection.FindOneAndDelete(c.Context(), query).Err()

    if err != nil {
        if err == mongo.ErrNoDocuments {
            return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
                "success": false,
                "message": "Todo Not found",
                "error":   err,
            })
        }

        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot delete todo",
            "error":   err,
        })
    }

    return c.SendStatus(fiber.StatusNoContent)
}

Awesome !!! We did great so far. 🤝

6. Test our endpoints 🧪

Let's test our API in Postman. Before that don't forget to run the server.

To get all Todos, give a GET request to localhost:8000/api/todos

To create a new todo, give a POST request to localhost:8000/api/todos with a title: <String> in the request body.

Now, you can add more todos like:

Play Cricket 🏏
Watch WandaVision 🍿

Let's get all our todos again.

Yaaahooooo! Isn't this amazing? 🤩

Now, to get todo by id, give a GET request to localhost:8000/api/todos/:id
Here replace :id with a todo id.

Now, let's update a todo by giving a PUT request to localhost:8000/api/todos/:id with a title: <String> or completed: <Boolean> or both in the request body.
Here replace :id with a todo id.

To delete a todo, give a DELETE request to localhost:8000/api/todos/:id
Here replace :id with a todo id.

Congratulations 🥳 🥳 🥳 We did it 💪🏻

Conclusion 📋

For more information about gofiber, I suggest taking a deeper look at the documentation here https://docs.gofiber.io/

Mongo DB official documentation.

Here is my GitHub link to this project - https://github.com/devsmranjan/golang-fiber-basic-todo-app/

Thank you for reading my article 🙂 . I hope you have learned something here.

If you want to improve this project, fork the repo here.

Happy coding 👨‍💻👩‍💻 and stay tuned for my next post in this series!

Thanks! Don't forget to give a ♥️ and follow :)

Omega: The spreadsheet Manager (Final)

Smruti Ranjan Rana — Fri, 08 Jan 2021 16:45:18 +0000

What I built

A spreadsheet manager app, which will help you to manage your spreadsheets from different Google Accounts in one place.

Screenshots

Login Page
Signup Page
Dashboard Page (Without Data)
Subscriptions Page (Without Data)
Subscriptions Page (With Subscription)
Add Spreadsheet in Subscriptions Page
Dashboard Page (With Data)

Description

Tech Stack

Backend : Node JS & Express JS
Frontend : React JS, Redux
Database : Mongo DB

Features

Login with Username & Password
Add Google Accounts as Subscriptions
Add Spreadsheets from Subscribed Google Account
Get all subscribed spreadsheet in the Dashboard

Link to Source Code

Omega Server: https://github.com/devsmranjan/omega-server
Omega Client: https://github.com/devsmranjan/omega-client

Permissive License

MIT license

Background

I've different spreadsheets in different Google Accounts. But there is no way to manage these spreadsheets in one place from all the Accounts. This app will help you to manage your spreadsheets from different Google Account in one place.

How I built it

Here, In this project, we will mainly use,

JWT for Authentication with Username & Password
SendGrid to send Email Verification, Password Verification URLs.
Google OAuth2 to add Google Accounts
Google Drive API & Google Spreadsheet API to get all the spreadsheets.

Additional Resources/Info

If you want to run this project,

Server

Clone Omega Server Repo from here
Add .env file in the root directory
Inside .env add the following variables

* API_ENDPOINT=<API Endpoint ex: /api>
* SERVER_ROUTE=<Inital route of server after domain name. ex: /app>
* CLIENT_URL=<Client URL ex: http://localhost:3000>
* MONGO_URI=<MongoDB URI>
* JWT_SECRET=<Random String for JWT Secret>
* SENDGRID_API_KEY=<Sengrid API Key>
* SENDGRID_FROM_EMAIL=<Email of the sender>
* GOOGLE_CLIENT_ID=<Google Client ID>
* GOOGLE_CLIENT_SECRET=<Google Client Secret>

Run npm install to install all the dependencies.
Now run npm run dev to run the server on port 8000

Client

Clone Omega Client Repo from here
Add .env file in the root directory
Inside .env add the following variables

* REACT_APP_SERVER_ENDPOINT=<Server API Endpoint ex: /api>
* SERVER_URL=<Server URL ex: http://localhost:5000>

Run npm install to install all the dependencies.
Now run npm start to run the server on port 3000

Omega App : Client

Smruti Ranjan Rana — Fri, 08 Jan 2021 16:44:43 +0000

Packages we need.

"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/react-fontawesome": "^0.1.11",
"axios": "^0.20.0",
"bootstrap": "^4.5.2",
"query-string": "^6.13.5",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.4",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0"

Routes

/login : Login Page
/signup : Signup Page
/resetPassword/:token: Reset Password
/verifyEmail/:token : Verify Email
/dashboard : Dashboard Page
/subscriptions: Subscription Page

Environment variables

* REACT_APP_SERVER_ENDPOINT=<Server API Endpoint ex: /api>
* SERVER_URL=<Server URL ex: http://localhost:5000>

Reducers

authReducers.js : Handle Auth data
errorReducer.js : Handle Errors data
loadingReducer.js : Handle Loading
spreadsheetsReducer.js : Handle Spreadsheets data
subscriptionsReducer.js : Handle Subscriptions data
userReducer.js : Handle Users data

Actions

authActions.js : Handle Auth actions
errorActions.js : Handle Error actions
spreadsheetsActions.js : Handle Spreadsheet actions
subscriptionsAction.js : Handle Subscription actions
userAction.js : Handle User actions

Omega App: Server

Smruti Ranjan Rana — Fri, 08 Jan 2021 16:44:18 +0000

Packages we need.

"@sendgrid/mail": "^7.2.4",
"bcrypt": "^5.0.0",
"cookie-parser": "~1.4.4",
"cors": "^2.8.5",
"debug": "~2.6.9",
"dotenv": "^8.2.0",
"express": "~4.16.1",
"express-validator": "^6.6.1",
"googleapis": "^40.0.1",
"http-errors": "~1.6.3",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.10.2",
"morgan": "~1.9.1",
"passport": "^0.4.1",
"passport-jwt": "^4.0.0"

Our Endpoints

/api: API_ENDPOINT
/api/docs: API_DOCS
/api/auth: AUTH_ENDPOINT
/signup : AUTH_SIGNUP
/login : AUTH_LOGIN
/verify/:token : AUTH_VERIFY_EMAIL
/api/auth/verify/: AUTH_VERIFY_FULL
/resend : AUTH_VERIFY_EMAIL_RESEND
/recover : AUTH_RECOVER
/reset/:token : AUTH_CHECK_RESET_LINK
/reset/:token : AUTH_RESET
/api/auth/reset/ : AUTH_RESET_FULL
/api/user : USER_ENDPOINT
/update : USER_UPDATE
/updatePassword : USER_UPDATE_PASSWORD
/deleteAccount : USER_DELETE_ACCOUNT
/resetPassword : CLIENT_RESET_PASSWORD_PATH
/verifyEmail : CLIENT_EMAIL_VERIFICATION_PATH
/api/subscriptions : SUBSCRIPTIONS_ENDPOINT
/add/google : SUBSCRIPTIONS_ADD_GOOGLE
/add/google/callback : SUBSCRIPTIONS_ADD_GOOGLE_CALLBACK
/updateSubscription : SUBSCRIPTIONS_UPDATE_SUBSCRIPTION
/api/spreadsheets : SPREADSHEETS_ENDPOINT

Environment variables

* API_ENDPOINT=<API Endpoint ex: /api>
* SERVER_ROUTE=<Inital route of server after domain name. ex: /app>
* CLIENT_URL=<Client URL ex: http://localhost:3000>
* MONGO_URI=<MongoDB URI>
* JWT_SECRET=<Random String for JWT Secret>
* SENDGRID_API_KEY=<Sengrid API Key>
* SENDGRID_FROM_EMAIL=<Email of the sender>
* GOOGLE_CLIENT_ID=<Google Client ID>
* GOOGLE_CLIENT_SECRET=<Google Client Secret>

Models

EmailVerificationToken.model.js : Email verification token model
User.model.js : User model

Middlewares

We need the below middlewares.

jwt.js: Handle JWT Token
validate.js: Handle email, username, password validation
authenticated.js: Handle the authentication

Controllers

auth.js : Handle all authtication requests
user.js : Handle all User related requests
subscriptions.js : Handle all subscriptions (Google Accounts) related requests
spreadsheets.js : Handle all spreadsheets related requests.

Omega: The Spreadsheet Manager

Smruti Ranjan Rana — Fri, 08 Jan 2021 16:44:00 +0000

What I'm building

In this hackathon, I'm building an app to manage spreadsheets from different Google accounts in one place.

Here, In this project, we will mainly use,

JWT for Authentication with Username & Password
SendGrid to send Email Verification, Password Verification URLs.
Google OAuth2 to add Google Accounts
Google Drive API & Google Spreadsheet API to get all the spreadsheets.

Category Submission:

Built for Business

Styling React Components: styled-components + twin.macro (Tailwind CSS 2.0)

Smruti Ranjan Rana — Mon, 07 Dec 2020 18:02:17 +0000

There are lots of ways to style a react component. But there are two ways which are quite popular among React Developers.

One is the use of Utility-first CSS frameworks like Tailwind CSS and another one is the CSS-in-JS libraries like styled-components to style react components in a JS way.

But what if we will merge them both to make a powerful way to style our components? 🤔

Interesting, right? 🤩

So here, in this tutorial we will see, how we can use them both to style react components more efficiently.

Before we start... 💭

Tailwind is a utility-first CSS framework for rapidly building custom designs, directly in the markup. It helps in building complex components from a constrained set of primitive utilities.

twin.macro is a library that helps to combine Tailwind CSS with libraries like emotion and styled-components to give more power to style React components.

So if you are using styled-components and want to power your styling with Tailwind CSS or you are a React beginner and want to learn a magic to style your React Components, then this article is for you.

Note: This article is based on Tailwind CSS 2.0. It may not work with other versions of Tailwind CSS.

What will we build? 🤔

In this article, we will demonstrate a combination of twin.macro and styled-components to style our React Components. After this, you can easily style your React Components more efficiently for sure.

Prerequisites 📝

Basic knowledge of React JS.
Basic knowledge of CSS.
Node version v14.15.1 and npm version 6.14.8. It may not work properly in the lower version of Node.

If you have these, Let's get started 🚀

Let’s Begin 🏁

1. Setup our Project

Step - 1 : Create our app

First, Let's create our project with create-react-app by running:

npx create-react-app react-styling-tutorial

After project creation, let's open our project in VS Code (or any other Code Editor/ IDE).

Step - 2 : Install required dependencies

Now, let's install twin.macro, tailwindcss & styled-components in our project by running:

npm i --save twin.macro tailwindcss styled-components

Here all of my dependencies with their versions:

"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"styled-components": "^5.2.1",
"tailwindcss": "^2.0.1",
"twin.macro": "^2.0.6",

Note: Please make sure to have the same version of dependencies to avoid errors.

Step - 3 : Configure Tailwind

After installing all the above dependencies, let's create Tailwind config file named tailwind.config.js in our src directory by running:

npx tailwind init src/tailwind.config.js

The generated file will look like below:

module.exports = {
    purge: [],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

As you can see, the config file is "empty" since there is no configuration. If you want a full version of the tailwind config, then you can run:

npx tailwind init src/tailwind.config.js --full

Step - 4 : Configure Twin

Now let's go to our package.json and add the following twin configuration:

"babelMacros": {
    "twin": {
        "config": "./src/tailwind.config.js",
        "preset": "styled-components"
    }
},

This configuration will help to transform tailwind classes into CSS-in-JS code.

Great! Let's run our app to ensure everything is fine by running:

npm start

Here is what our app will look like in the browser (or similar).

2. Create Components

Okay. Let's first stop our web server.

Now remove App.css, logo.svg from the src directory to clean our project a little bit.

src directory will look like:

.
|____App.js
|____App.test.js
|____index.css
|____index.js
|____tailwind.config.js
|____reportWebVitals.js
|____setupTests.js

Now let's modify App.js as below:

import React from 'react';

const App = () => {
    return <h1>My App Component</h1>;
};

export default App;

Now if you will run the app again, it will work absolutely fine with no errors 😎

Great. Next, create a directory, named components inside the src directory.

And inside the components directory let's create another directory named Button.
Now inside our Button directory, create an index.js file.

src directory will look like:

.
|____components
| |____Button
| | |____index.js
|____App.js
|____App.test.js
|____index.css
|____index.js
|____tailwind.config.js
|____reportWebVitals.js
|____setupTests.js

Next, inside the src/components/Button/index.js let's write our button component as below:

import React from 'react';

const ButtonComponent = () => {
    return <button>Click Me!</button>;
};

export default ButtonComponent;

Now, let's come back to src/App.js and import our ButtonComponent

import React from 'react';
import ButtonComponent from './components/Button'; // new

const App = () => {
    return (
        // new
        <div> 
            <ButtonComponent />
        </div>
    );
};

export default App;

Here is what our app will look like in the browser.

You can see our button component is here 🤩

3. Setup Theme

Okay. We are doing great so far. Now let's set up our theme for our project.

Let's stop our server and goto /src/index.css and put the following css at the top:

:root {
    --color-primary: #4ff0c9;
    --color-secondary: #172a45;
    --color-white-alt: #ccd6f6;
}

Here we have created 3 variables to store colors, named --color-primary, --color-secondary, and --color-white-alt.

Now add our colors inside the theme in /src/tailwind.config.js like below:

module.exports = {
    purge: [],
    darkMode: false,
    theme: {
        extend: {
            colors: { // new
                primary: 'var(--color-primary)', // new
                secondary: 'var(--color-secondary)', // new
                whiteAlt: 'var(--color-white-alt)', // new
            }, // new
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

Great!!! Let's first run our app and check, everything is fine or not.

We got the same result as before 🤟

4. Style Components

Let's create a styles directory inside our src directory and create a file named StyledApp.js inside the styles directory for styling our App component.

Finally, our src directory will look like:

.
|____components
| |____Button
| | |____index.js
|____styles
| |____StyledApp.js
|____App.js
|____App.test.js
|____index.css
|____index.js
|____tailwind.config.js
|____reportWebVitals.js
|____setupTests.js

Now, open the StyledApp.js and let's write some styling for our App component.

import tw, { styled } from 'twin.macro';

export const StyledApp = styled.div`
    ${tw`flex justify-center items-center h-screen`}
`;

Next, come back to App.js and import our StyledApp as below:

import React from 'react';
import ButtonComponent from './components/Button';
import { StyledApp } from './styles/StyledApp'; // new

const App = () => {
    return (
        <StyledApp> {/* new */}
            <ButtonComponent />
        </StyledApp>
    );
};

export default App;

Now save and look at your browser, the button comes to the center of the screen.

Taddddda!!! As you can see, our styling for our App component is working perfectly 😎

We can also use GlobalStyles in our App component as below:

import React from 'react';
import ButtonComponent from './components/Button';
import { GlobalStyles } from 'twin.macro'; // new
import { StyledApp } from './styles/StyledApp';

const App = () => {
    return (
        <div>
            <GlobalStyles /> {/* new */}
            <StyledApp>
                <ButtonComponent />
            </StyledApp>
        </div>
    );
};

export default App;

Now our app will look like:

You can see, the style of our Button component is changed because of the GlobalStyles.

Amazing! Now let's style our ButtonComponent. Create another file named StyledButton.js inside /src/styles.

src/styles directory will look like:

.
|____StyledApp.js
|____StyledButton.js

Write some styling inside our StyledButton.js for our button component.

import tw, { styled } from 'twin.macro';

export const StyledButton = styled.button`
    ${tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary`}
`;

Next, go back to /src/components/Button/index.js and import our StyledButton as below:

import React from 'react';
import { StyledButton } from '../../styles/StyledButton'; // new

const ButtonComponent = () => {
    return <StyledButton>Click Me!</StyledButton>; // new
};

export default ButtonComponent;

Now you can see our Styled Button in our browser.

Now here if you want to add your custom CSS for ButtonComponent you can do that inside /src/styles/StyledButton.js as below :

import tw, { styled } from 'twin.macro';

export const StyledButton = styled.button`
    ${tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary duration-200`}; // added duration-200 (optional)

    & {
        background-color: yellow;
    }

    &:hover {
        font-size: 2rem;
    }
`;

We can also access theme data directly like below:

import tw, { styled, theme } from 'twin.macro'; // new

export const StyledButton = styled.button`
    ${tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary duration-200`}; // added duration-200 (optional)

    & {
        background-color: ${theme`colors.whiteAlt`}; // modified
    }

    &:hover {
        font-size: 2rem;
    }
`;

Now you can see the background color of the button is changed.

4. Conditional Styling

Let's change our styling with conditions.

To do that, let's change our StyledButton.js as below:

import tw, { styled, theme, css } from 'twin.macro'; // modified

export const StyledButton = styled.button(() => [
    tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary duration-200`,

    css`
        & {
            background-color: ${theme`colors.whiteAlt`};
        }

        &:hover {
            font-size: 2rem;
        }
    `,
]);

It will give us the same output as before 🤟

Okay. Let's add a condition.
We will style our button differently if isSecondary is true.

Here is our final code will look like:

import tw, { styled, theme, css } from 'twin.macro';

export const StyledButton = styled.button(({ isSecondary }) => [
    // updated
    tw`py-3 px-8 uppercase rounded border border-primary hover:bg-primary duration-200`,

    css`
        & {
            background-color: ${theme`colors.whiteAlt`};
        }

        &:hover {
            font-size: 2rem;
        }
    `,

    isSecondary && tw`border-secondary hover:bg-secondary hover:text-white`, // new
]);

Now let's go back to ButtonComponent in src/components/Button/index.js and pass the isSecondary parameter in StyledButton like below:

const ButtonComponent = () => {
    return <StyledButton isSecondary>Click Me!</StyledButton>; // modified
};

export default ButtonComponent;

Awwwwwesome! Isn't it? 😎

Conclusion 📋

Here is my Github repo for your reference - https://github.com/devsmranjan/react-tailwindcss-styledcomponents-template

You can use this as a template for your next project 🙂

Thank you for reading my article 🙂 . I hope you have learned something here.

Happy coding 👨‍💻👩‍💻 and stay tuned for my next post.

Thanks! Don't forget to give a ♥️ and follow :)

Golang for Web (Part-I): Build your first REST API with Golang & Fiber

Smruti Ranjan Rana — Wed, 25 Nov 2020 18:42:56 +0000

This is the first part of this series on Golang for Web. My goal is to show the newcomers how easily we can build REST APIs with Go by breaking down big apps into small ones. Here, we're going to build a simple TODO app webserver with Gofiber by separating all routes, controllers, etc.

Go: An open-source programming language

Go is an open-source programming language that makes it easy to build simple, reliable, and efficient software.

Go is a statically typed, compiled programming language designed at Google by Robert Griesemer, Rob Pike, and Ken Thompson. Go is syntactically similar to C, but with memory safety, garbage collection, structural typing, and CSP-style concurrency. (Source: Wikipedia)

Golang for Web 🌐

As a MERN stack developer, I found Fiber Web Framework is very similar to express as they are claiming and this is pretty easy for a JS developer to get started with Golang to build a nice and amazing REST API.

Fiber is an Express inspired web framework built on top of Fasthttp, the fastest HTTP engine for Go. Designed to ease things up for fast development with zero memory allocation and performance in mind.

Check their amazing benchmark performance here - https://docs.gofiber.io/extra/benchmarks

What will we build? 🤔

Okay enough talk 🤚 It's time to show some action with Fiber. Today we are going to build a basic TODO app with Fiber. I'm pretty sure after this, you can easily start building REST APIs with Golang 👨🏻‍💻

Prerequisites 📝

A basic knowledge of Golang syntax.
Go version 1.14 or above installed on your machine. Install from here
Postman or any other related app installed on your machine. Download from here

If you have these, Let's get started 🚀

Let’s Begin 🏁

1. Setup our Project

First, let’s create a new directory named fiber-todo and open this directory in VS Code (or any other Code Editor/ IDE)

Now at the root directory open your terminal and run the command :

go mod init github.com/<Your_Username>/<Repo_Name>

Example :

go mod init github.com/devsmranjan/golang-fiber-basic-todo-app

Let's install fiber in our project by running :

go get -u github.com/gofiber/fiber/v2

Now inside our root directory create a file named main.go and create two directories routes & controllers.

2. Create our first server

Now inside main.go write the following code :

package main

import (
    "github.com/gofiber/fiber/v2"
)

func main() {}

Okay, you will get some errors here but stay tuned with me 🤝

Now inside the main() method let's initiate fiber.

app := fiber.New()

Add our first route by :

app.Get("/", func(c *fiber.Ctx) error {
    return c.Status(fiber.StatusOK).JSON(fiber.Map{
        "success":  true,
        "message": "You are at the endpoint 😉",
    })
})

and finally, listen to the server at 8000 port and catch the error if any.

err := app.Listen(":8000")

if err != nil {
    panic(err)
}

Here is our final code :

package main

import (
    "github.com/gofiber/fiber/v2"
)

func main() {
    app := fiber.New()

    // give response when at /
    app.Get("/", func(c *fiber.Ctx) error {
        return c.Status(fiber.StatusOK).JSON(fiber.Map{
            "success":  true,
            "message": "You are at the endpoint 😉",
        })
    })

    // Listen on server 8000 and catch error if any
    err := app.Listen(":8000")

    // handle error
    if err != nil {
        panic(err)
    }
}

Now to run our server, open terminal and in our root directory run :

go run main.go

It will show something like this


 ┌───────────────────────────────────────────────────┐
 │                    Fiber v2.2.0                   │
 │               http://127.0.0.1:8000               │
 │                                                   │
 │ Handlers ............. 2  Threads ............. 4 │
 │ Prefork ....... Disabled  PID ............. 60983 │
 └───────────────────────────────────────────────────┘

Open your browser now, and goto localhost:8000. You will get the output like this

{
    "message": "You are at the endpoint 😉",
    "success": true
}

Hureeey!!! We did it 🤟

Additionally, if you want to add logger middleware, then run

go get -u github.com/gofiber/fiber/v2/middleware/logger

Import logger in our project

import (
    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/fiber/v2/middleware/logger" // new
)

and finally, connect this middleware with our app

app.Use(logger.New())

Here is our final code :

package main

import (
    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/fiber/v2/middleware/logger" // new
)

func main() {
    app := fiber.New()
    app.Use(logger.New()) // new

    // give response when at /
    app.Get("/", func(c *fiber.Ctx) error {
        return c.Status(fiber.StatusOK).JSON(fiber.Map{
            "success":  true,
            "message": "You are at the endpoint 😉",
        })
    })

    // Listen on server 8000 and catch error if any
    err := app.Listen(":8000")

    // handle error
    if err != nil {
        panic(err)
    }
}

Now after running our server again, goto localhost:8000 and you can see the terminal is showing the log of our request like below :

21:44:48 | 200 |      0s |       127.0.0.1 | GET     | /

3. Decide Endpoints for our TODO app 🔗

localhost:8000/api/todos

request: GET
description: To get all todos

localhost:8000/api/todos/:id

request: GET
description: Get todo by id

localhost:8000/api/todos

request: POST
input: {
    title : String
}
description: Create new todo

localhost:8000/api/todos/:id

request: PUT
input: {
    title : String,
    completed : Boolean
}
description: Update todo

localhost:8000/api/todos/:id

request: DELETE
description: Delete todo

4. Build our first API endpoint 🏗

Step 1 :

Let's write our first controller for our todo app.

Open controllers directory and create a file named todo.go

Now inside controllers/todo.go let's do our required imports.

package controllers

import (
    "github.com/gofiber/fiber/v2"
)

Add Todo structure

type Todo struct {
    Id        int    `json:"id"`
    Title     string `json:"title"`
    Completed bool   `json:"completed"`
}

Let's add some predefined todos

var todos = []*Todo{
    {
        Id:        1,
        Title:     "Walk the dog 🦮",
        Completed: false,
    },
    {
        Id:        2,
        Title:     "Walk the cat 🐈",
        Completed: false,
    },
}

and now finally let's create our controller to get all the todos

func GetTodos(c *fiber.Ctx) error {
    return c.Status(fiber.StatusOK).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todos": todos,
        },
    })
}

Here is our final code in controllers/todo.go :

package controllers

import (
    "github.com/gofiber/fiber/v2"
)

type Todo struct {
    Id        int    `json:"id"`
    Title     string `json:"title"`
    Completed bool   `json:"completed"`
}

var todos = []*Todo{
    {
        Id:        1,
        Title:     "Walk the dog 🦮",
        Completed: false,
    },
    {
        Id:        2,
        Title:     "Walk the cat 🐈",
        Completed: false,
    },
}

// get all todos
func GetTodos(c *fiber.Ctx) error {
    return c.Status(fiber.StatusOK).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todos": todos,
        },
    })
}

Step 2 :

Now let's write our first route for our todo app and connect our controllers.

Open the routes directory and create a file named todo.go

Now inside routes/todo.go let's do our required imports

package routes

import (
    "github.com/gofiber/fiber/v2"
    "github.com/devsmranjan/golang-fiber-basic-todo-app/controllers" // replace
)

Replace github.com/devsmranjan/golang-fiber-basic-todo-app/controllers with your github repo url like github.com/<Your_Username>/<Repo_Name>/controllers

Create our first route to get all todos

func TodoRoute(route fiber.Router) {
    route.Get("", controllers.GetTodos)
}

Here is our final code in routes/todo.go :

package routes

import (
    "github.com/gofiber/fiber/v2"
    "github.com/devsmranjan/golang-fiber-basic-todo-app/controllers" // replace
)

func TodoRoute(route fiber.Router) {
    route.Get("", controllers.GetTodos)
}

Step 3 :

Okay here is the final step.
Go back to main.go and import routes

import (
    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/fiber/v2/middleware/logger"
    "github.com/devsmranjan/golang-fiber-basic-todo-app/routes" // new // replace
)

Replace github.com/devsmranjan/golang-fiber-basic-todo-app/routes with your github repo url i.e github.com/<Your_Username>/<Repo_Name>/routes

Now let's create a separate function to handle all our routes.

func setupRoutes(app *fiber.App) {}

Move all routes from main() method to setupRoutes() method.

func setupRoutes(app *fiber.App) {

    // moved from main method
    app.Get("/", func(c *fiber.Ctx) error {
        return c.Status(fiber.StatusOK).JSON(fiber.Map{
            "success":  true,
            "message": "You are at the endpoint 😉",
        })
    })
}

Now call setupRoutes() method from main() method.

setupRoutes(app)

Here is our final main() looks like.

func main() {
    app := fiber.New()
    app.Use(logger.New())

    // setup routes
    setupRoutes(app) // new

    // Listen on server 8000 and catch error if any
    err := app.Listen(":8000")

    // handle error
    if err != nil {
        panic(err)
    }
}

Now let's make a routes group named api inside our setupRoutes() method

api := app.Group("/api")

Add response for /api route

api.Get("", func(c *fiber.Ctx) error {
    return c.Status(fiber.StatusOK).JSON(fiber.Map{
        "success": true,
        "message": "You are at the api endpoint 😉",
    })
})

Now finally, connect all the todo routes to our api route group

routes.TodoRoute(api.Group("/todos"))

Final setupRoutes() method looks like :

func setupRoutes(app *fiber.App) {
    // give response when at /
    app.Get("/", func(c *fiber.Ctx) error {
        return c.Status(fiber.StatusOK).JSON(fiber.Map{
            "success":  true,
            "message": "You are at the endpoint 😉",
        })
    })

    // api group
    api := app.Group("/api")

    // give response when at /api
    api.Get("", func(c *fiber.Ctx) error {
        return c.Status(fiber.StatusOK).JSON(fiber.Map{
            "success": true,
            "message": "You are at the api endpoint 😉",
        })
    })

    // connect todo routes
    routes.TodoRoute(api.Group("/todos"))
}

Now let's run our server and go to http://localhost:8000/api/todos. The output will be like below.

{
    "data": {
        "todos": [
            {
                "id": 1,
                "title": "Walk the dog 🦮",
                "completed": false
            },
            {
                "id": 2,
                "title": "Walk the cat 🐈",
                "completed": false
            }
        ]
    },
    "success": true
}

5. Let's create other controllers 🎛

I guess you got the idea, how all are working. Right??? 😎

Now let's create other controllers.
But before that let's add some required imports in controllers/todo.go :

import (
    "fmt" // new
    "strconv" // new

    "github.com/gofiber/fiber/v2"
)

Okay. Let's create a controller to create a todo

func CreateTodo(c *fiber.Ctx) error {
    type Request struct {
        Title string `json:"title"`
    }

    var body Request

    err := c.BodyParser(&body)

    // if error
    if err != nil {
        fmt.Println(err)
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success":  false,
            "message": "Cannot parse JSON",
        })
    }

    // create a todo variable
    todo := &Todo{
        Id:        len(todos) + 1,
        Title:     body.Title,
        Completed: false,
    }

    // append in todos
    todos = append(todos, todo)

    return c.Status(fiber.StatusCreated).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todo": todo,
        },
    })
}

A controller to get a single todo by id

func GetTodo(c *fiber.Ctx) error {
    // get parameter value
    paramId := c.Params("id")

    // convert parameter value string to int
    id, err := strconv.Atoi(paramId)

    // if error in parsing string to int
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success":  false,
            "message": "Cannot parse Id",
        })
    }

    // find todo and return
    for _, todo := range todos {
        if todo.Id == id {
            return c.Status(fiber.StatusOK).JSON(fiber.Map{
                "success": true,
                "data": fiber.Map{
                    "todo": todo,
                },
            })
        }
    }

    // if todo not available
    return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
        "success": false,
        "message": "Todo not found",
    })
}

A controller to update a todo

func UpdateTodo(c *fiber.Ctx) error {
    // find parameter
    paramId := c.Params("id")

    // convert parameter string to int
    id, err := strconv.Atoi(paramId)

    // if parameter cannot parse
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse id",
        })
    }

    // request structure
    type Request struct {
        Title     *string `json:"title"`
        Completed *bool   `json:"completed"`
    }

    var body Request
    err = c.BodyParser(&body)

    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse JSON",
        })
    }

    var todo *Todo

    for _, t := range todos {
        if t.Id == id {
            todo = t
            break
        }
    }

    if todo.Id == 0 {
        return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
            "success":  false,
            "message": "Not found",
        })
    }

    if body.Title != nil {
        todo.Title = *body.Title
    }

    if body.Completed != nil {
        todo.Completed = *body.Completed
    }

    return c.Status(fiber.StatusOK).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todo": todo,
        },
    })
}

A controller to delete a todo

func DeleteTodo(c *fiber.Ctx) error {
    // get param
    paramId := c.Params("id")

    // convert param string to int
    id, err := strconv.Atoi(paramId)

    // if parameter cannot parse
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse id",
        })
    }

    // find and delete todo
    for i, todo := range todos {
        if todo.Id == id {

            todos = append(todos[:i], todos[i+1:]...)

            return c.Status(fiber.StatusNoContent).JSON(fiber.Map{
                "success":  true,
                "message": "Deleted Succesfully",
            })
        }
    }

    // if todo not found
    return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
        "success": false,
        "message": "Todo not found",
    })
}

Here is our final code in controllers/todo.go :

package controllers

import (
    "fmt"
    "strconv"

    "github.com/gofiber/fiber/v2"
)

type Todo struct {
    Id        int    `json:"id"`
    Title     string `json:"title"`
    Completed bool   `json:"completed"`
}

var todos = []*Todo{
    {
        Id:        1,
        Title:     "Walk the dog 🦮",
        Completed: false,
    },
    {
        Id:        2,
        Title:     "Walk the cat 🐈",
        Completed: false,
    },
}

// get all todos
func GetTodos(c *fiber.Ctx) error {
    return c.Status(fiber.StatusOK).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todos": todos,
        },
    })
}

// Create a todo
func CreateTodo(c *fiber.Ctx) error {
    type Request struct {
        Title string `json:"title"`
    }

    var body Request

    err := c.BodyParser(&body)

    // if error
    if err != nil {
        fmt.Println(err)
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success":  false,
            "message": "Cannot parse JSON",
        })
    }

    // create a todo variable
    todo := &Todo{
        Id:        len(todos) + 1,
        Title:     body.Title,
        Completed: false,
    }

    // append in todos
    todos = append(todos, todo)

    return c.Status(fiber.StatusCreated).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todo": todo,
        },
    })
}

// get a single todo
// PARAM: id
func GetTodo(c *fiber.Ctx) error {
    // get parameter value
    paramId := c.Params("id")

    // convert parameter value string to int
    id, err := strconv.Atoi(paramId)

    // if error in parsing string to int
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success":  false,
            "message": "Cannot parse Id",
        })
    }

    // find todo and return
    for _, todo := range todos {
        if todo.Id == id {
            return c.Status(fiber.StatusOK).JSON(fiber.Map{
                "success": true,
                "data": fiber.Map{
                    "todo": todo,
                },
            })
        }
    }

    // if todo not available
    return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
        "success": false,
        "message": "Todo not found",
    })
}

// Update a todo
// PARAM: id
func UpdateTodo(c *fiber.Ctx) error {
    // find parameter
    paramId := c.Params("id")

    // convert parameter string to int
    id, err := strconv.Atoi(paramId)

    // if parameter cannot parse
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse id",
        })
    }

    // request structure
    type Request struct {
        Title     *string `json:"title"`
        Completed *bool   `json:"completed"`
    }

    var body Request
    err = c.BodyParser(&body)

    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse JSON",
        })
    }

    var todo *Todo

    for _, t := range todos {
        if t.Id == id {
            todo = t
            break
        }
    }

    if todo.Id == 0 {
        return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
            "success":  false,
            "message": "Not found",
        })
    }

    if body.Title != nil {
        todo.Title = *body.Title
    }

    if body.Completed != nil {
        todo.Completed = *body.Completed
    }

    return c.Status(fiber.StatusOK).JSON(fiber.Map{
        "success": true,
        "data": fiber.Map{
            "todo": todo,
        },
    })
}

// Delete a todo
// PARAM: id
func DeleteTodo(c *fiber.Ctx) error {
    // get param
    paramId := c.Params("id")

    // convert param string to int
    id, err := strconv.Atoi(paramId)

    // if parameter cannot parse
    if err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{
            "success": false,
            "message": "Cannot parse id",
        })
    }

    // find and delete todo
    for i, todo := range todos {
        if todo.Id == id {

            todos = append(todos[:i], todos[i+1:]...)

            return c.Status(fiber.StatusNoContent).JSON(fiber.Map{
                "success":  true,
                "message": "Deleted Succesfully",
            })
        }
    }

    // if todo not found
    return c.Status(fiber.StatusNotFound).JSON(fiber.Map{
        "success": false,
        "message": "Todo not found",
    })
}

6. Create other routes 🚏

Let's create other routes for our todo app.

Now, inside TodoRoute() add all below routes

route.Post("", controllers.CreateTodo)
route.Put("/:id", controllers.UpdateTodo)
route.Delete("/:id", controllers.DeleteTodo)
route.Get("/:id", controllers.GetTodo)

Finally, our final code looks like :

package routes

import (
    "github.com/gofiber/fiber/v2"
    "github.com/devsmranjan/golang-fiber-basic-todo-app/controllers" // replace
)

func TodoRoute(route fiber.Router) {
    route.Get("", controllers.GetTodos)
    route.Post("", controllers.CreateTodo) // new
    route.Put("/:id", controllers.UpdateTodo) // new
    route.Delete("/:id", controllers.DeleteTodo) // new
    route.Get("/:id", controllers.GetTodo) // new
}

Now we are all set to run our server 😎
And let's test our API in Postman.

7. Test our endpoints 🧪

To get all todos, give a GET request to localhost:8000/api/todos

To get todo by id, give a GET request to localhost:8000/api/todos/:id
Here replace :id with a todo id

To create a new todo, give a POST request to localhost:8000/api/todos with a title: <String> in the request body.

Okay. Let's check if our todo is successfully created or not.
Give a GET request to localhost:8000/api/todos to get all todos again.

Yeeeeeeeeah !!! 🤩

To delete a todo, give a DELETE request to localhost:8000/api/todos/:id
Here replace :id with a todo id

Congooooooo 🥳 🥳 🥳 We did it 💪🏻

Conclusion 📋

For more information, I suggest taking a deeper look at the documentation here https://docs.gofiber.io/

Here is my GitHub link for this project - https://github.com/devsmranjan/golang-fiber-basic-todo-app

Thank you for reading my article 🙂 . I hope you have learned something here.

Happy coding 👨‍💻👩‍💻 and stay tuned for my next post in this series!

Thanks! Don't forget to give a ♥️ and follow :)