
## Mongodb transactions
“In a database management system, a transaction is a single unit of logic or work, sometimes made up of multiple operations.”
In simple terms, transactions are used in situations when we need to perform multiple tasks in the database, and we want either all tasks to be successful or none. We expect transactions to have [ACID](https://www.geeksforgeeks.org/acid-properties-in-dbms/) properties.

### Transactions in MongoDB
Multi-document transactions in MongoDB enable us to tackle many complex and practical use cases where we want to update multiple documents by maintaining [atomicity](https://en.wikipedia.org/wiki/Atomicity_(database_systems)) across all collections in the database.

## Using MongoDB Transactions with Node.js

Here, I am using the [Mongoose](https://mongoosejs.com/) library to do this as it provides a very intuitive interface for transactions.

Let’s take the example of order creation for an e-commerce application. As an order is created, the stock of the corresponding products needs to be updated. 

```js
import mongoose from 'mongoose';

import catchAsync from '../utils/catchAsync.js';
import Order from '../models/orderModel.js';
import Product from '../models/productModel.js';

export const createOrder = catchAsync(async (req, res) => {
  const session = await mongoose.startSession();

  // Start the transaction
  session.startTransaction();

  try {
    // Make the order creation part of the transaction
    const orderDoc = await Order.create([req.body], { session });

    for (const item of orderDoc[0].orderItems) {
      const product = await Product.findById(item.product).session(session);

      if (product.stock - item.qty < 0) {
        throw new Error('Order quantity is more than stock');
      }

      const query = {
        $inc: { stock: -item.qty },
      };

      // Make the product update part of the transaction
      await Product.findByIdAndUpdate(item.product, query, {
        new: true,
        runValidators: true,
      }).session(session);
    }

    // If no error, commit the transaction and reflect changes in database
    await session.commitTransaction();

    res.status(201).json({
      status: 'success',
      data: orderDoc,
    });
  } catch (err) {
    // Abort the transaction if error occurred
    await session.abortTransaction();
    throw err;
  } finally {
    session.endSession();
  }
});

```

We first create an order document and make it a part of the transaction. Then we update each product in the order with the updated stock values. If an error occurs in any of the product updations, the transaction is aborted. This ensures none of the products are updated and the order is also not created. This is a very typical use case for transactions.

## Setting up replica set locally for transactions

If you try to execute the above code locally, it will give an error saying transactions are only available for replica sets. So what does this mean?

A catch with using transactions in MongoDB is that they can only be used with [replica sets](https://www.mongodb.com/docs/manual/replication/). If you are using a cloud-hosted database like MongoDB Atlas, it automatically sets up replica sets, so using transactions is not a problem. But in a local environment like your computer, this is not the case. You need to explicitly set up the MongoDB server a replica set for transactions to work.

### First shut down the current MongoDB server

Log into the mongo process in the terminal

```bash
mongo
```

Inside the mongo interface, switch to the admin and shut down the server

```bash
use admin
```

```bash
db.shutdownServer()
```

```bash
exit
```

### Now start a new mongod process with a replica set

This is for Mac systems. I haven't tried for Linux and Windows systems but I believe, if not the same, it is something very similar.

```bash
mongod --port 27017 --replSet rs0 --bind_ip localhost --config /usr/local/etc/mongod.conf --fork
```

Log into the mongo interface again and initiate the replica set

```bash
mongo
```

```bash
rs.initiate()
```

```bash
exit
```

With this, a replica set is set up locally on your computer and now you can perform MongoDB transactions.

### To switch to normal mongodb server without replica set 

Shut down the server same as above, then execute the command below.

```bash
mongod --config /usr/local/etc/mongod.conf --fork
```

## Conclusion

You can now create Node.js applications using MongoDB transactions and set up a replica set to develop your application locally. You can refer to this [github repo](https://github.com/shucoll/mongodb-transactions-node.js) I created for the blog. Transactions are a very vast topic in database management, and they have many use cases. I hope, with this, you now have a basic understanding of transactions in MongoDB and can get started with them.

MongoDB transactions in Node.js using Mongoose


As developers, resolving design problems via code is often our job but wouldn't it be cool if we could design in a way it aids our development process?

As a developer, when I first got started with UI/UX, I often wondered what was the best way to connect my designs with the code. Let me tell you this - there is no such thing( I figured that out the hard way struggling to be a perfectionist).

Every designer/developer has their way of doing things, their workflow, and tricks that make their lives easier as a developer and/or designer. So in this post, I will share some of mine. I am not going to talk about design or development in particular, rather how you connect those two. Things like how do you design and export your work in a way that it helps in the development.

This is more of a workflow(diverted towards developers) showing post so, I will assume you already have some design and development knowledge. Even if you don’t, thats alright, there isn’t anything super technical here, and I’m sure you will find something useful. Finally, I am a web designer/developer so, this post will be based around web development but the core concepts may be applied to any other type of dev. 

# Design Assets

I recently created my portfolio website, which you can check out [here](https://www.shucoll.com/). I will take my design for that as an example. Also, I will be working with Adobe XD here but the same principles apply to pretty much any other UI/UX design tool.

Without diving into much detail, I want to clarify some things. It is almost always a good idea to sketch out a basic layout of your application with pen and paper. Create wireframes(version with just the structure of application) if you have to, and finally get started with the high fidelity version( one with the right fonts and colors ).

Once you have decided on the fonts and colors, be very clear about things like font sizes and weights from the get-go. I like to decide everything early hand, put them in the design assets, and work on everything only from those assets. By doing that, if I want to change any particular font or color, I just have to change them in my assets, and everything in my design relating to those also changes. In development terms, it’s much like creating variables.

First, I like to define and keep them on the top of my main artboard. From there I add them to my assets. If you can’t decide everything from the get-go, don’t stress over it. Down the road, when you decide to use a particular combination, add it to this list first, then add it to your assets, only then use it in your design. It's some extra work but believe me, it will save you a lot of time and effort later.  

![Font and Color assets](font-and-color-assets.png)

In XD, adding to assets is quite easy, just select them, right-click and add them to assets. 

![Adding to design assets](adding-to-design-assets.png)

You can do the same with your color palette.

Once added, you can view these assets in the bottom left corner, under Libraries -> Document Assets. Here, you can rename or modify your assets. About renaming, be very creative and descriptive. For colors, I like to do, ‘Usage - Hex code’. For character styles, ‘Usage - font size - font family’. This especially helps me getting started in the development process. Usage for font or color can be more than one, but you want to be subtle here, and add only the most relevant usages in the names.

![Design Assets Panel](design-assets-panel.png)

# Design

Now, a bit about grids. Every UI/UX design tool allows you to work with grids and on the development side with the availability of CSS grid, it's a great time to be working with grid layouts. In XD you can use an overall grid for your design and align-items according to that grid. You might or might not want to base your design grid on how you want to implement your overall layout in code. What I mean by this is, say you want to use CSS grids for your overall layout and your layout elements are fairly simple, in that case, it might make sense to align the design grid with the development grid. But in most cases, the overall layout in development is not enough and you might have nested elements that have their complex layout with either flexbox or CSS grid. In those cases, what I have found most effective is, you do your own thing with the layout in design, align things up properly with or without grid and bring with you all the design specs, spacing, and alignment( will talk about this later) into development, and implement those specs with the technologies and options you have at hand. Of course, this also depends on the job at hand and personal/team preferences.

For the design process, there are multiple approaches you can take. Whether it be design or development, if I have a choice I like to go with the desktop-first approach( no particular reason, just a personal preference). For my portfolio website, I decided to only design the desktop version and worry about smaller screen sizes during development. I could do that as it was a personal project with only me involved, I had a clear picture of how I wanted the different pages to look on smaller screens, and this approach seemed quite time-efficient in my case.

![Overall design](overall-design.png)

But again this depends on your project. Like in a recent freelance project, I had to get approval for the design from the client before starting the development. Here, once again I started with the desktop version and once that was done, I worked on the tablet and mobile versions by creating different artboards for each and deriving the design for tablet and mobile, based on the desktop version that I created.

After the basic design is done, you can do things like prototyping and even animations, but all that is a little bit out of the scope of this post, and I will not talk about them here.

Like I said before, I am also not going to talk about the entire design process. So at this point, I assume you have made your decisions, designed your application, are happy with it, and are ready to start the development or pass on your work to your team.

# Exporting

Most of the things in our design like background, gradients, buttons will be done by code, but there will also almost always be items like images and SVGs that are to be passed on for development. The developers will also need design specs like spacing and alignment. There are multiple ways of doing this in XD. You can individually export necessary items and export artboards as jpegs or PDFs. This is alright if it serves your purpose but XD has another elegant way to solve this for you. 

If you are a designer, you might already know this next bit, but for me, when I found out about it, it blew my mind and has made my work tons easier since. It’s called ‘publishing design specs’. Once your design is done, decide on all the things that the developer will require and mark them as exports( don’t worry if you don’t get them all, you can update this later). Marking for export is again very simple.

![Mark as export](mark-as-export.png)

To view these marked items, from the bottom left corner, go to the Layers panel. Here you can view all your items on a particular artboard, and the items marked for export will have an arrow sign beside them. You can also mark for export by hovering over an element in this list and clicking the arrow sign.

![View exports](view-exports.png)

On the top left corner, you will find a Share option, which will allow you to create a link that you can share with other people. In the link settings, select the Development/Design Spec, check the downloadable asset option, and create your link. XD keeps changing things up so, if you are reading this way in the future, things might look quite different, but you can make all of this work for your XD version with a bit of looking around or the documentation on Adobe can also help you.

![Share link](share-link.png)

Now comes the fun part, copy the link and paste the URL into your browser. If you didn’t make your link public, you’ll have to log in with your Adobe account to get access.

All the colors and character styles that you defined are there, all the elements marked for export are available for download, all the design specs like spacing and alignment are there(click on an element and hover over other), and much more. You can even view the CSS code for particular elements like buttons and gradients. Explore it all for a while. See what you have and what you need from the design part, make those changes in your design, and update your link to see them reflected in the design spec. 

There are a lot more features like comments and reviews. If you are working with a team or with a client, these features can be quite useful. If you design and haven’t tried this feature in XD, I highly recommend that you at least give it a shot.

![Design Specs](design-specs.png)

# Conclusion

With this, it brings me to the conclusion of this post. We looked at starting a design project, designing with development in mind, and exporting in a way it aids our development process.

I would like to mention that the things I shared here are quite opinionated, and they come from a developer’s perspective who is learning to design. I suggest that you take some tips from here and try to build upon that, creating a workflow that serves you or your project best.

Also, like most of us here, I too am a constant learner so, if you think I am missing out on something or can do something better, feel free to correct me or add to the tips I have shared.

Thank you and happy designing!



Design workflow for developers


If you are within the React ecosystem, I am sure you have heard of [Next.js](https://nextjs.org/)( a production-ready framework for react), and on the other hand, [Editor.js](https://editorjs.io/) is a modern block-styled editor that has some exciting features.

Recently, I created a blogging platform as a personal project and used these technologies in the front-end. Even though both of these technologies are great, it took some tinkering in integrating them, as, as of now, Editor.js only works on the client-side, and the whole point of using Next.js was leveraging its server-side rendering feature. In this post, I will go through how I went about integrating them.

# Project Setup

First, let's start with an empty Next.js project.

```js
npx create-next-app next-editor-js-example
```

To make this work, firstly, we will need Editor.js. Other than that, we also have plugins that add to the editor to provide more features. Let’s install those.

```js
npm i @editorjs/editorjs @editorjs/delimiter @editorjs/embed @editorjs/header @editorjs/list @editorjs/marker @editorjs/paragraph
```

Finally, we have a wrapper react component for editor.js that makes our work so much simpler. It also supports all major editor.js plugins, so it is a great one to use. We will install that too.

```js
npm i react-editor-js
```

To start, let’s create a new route `/blog/create`. Doing this is fairly simple in Next.js as we just need to add this path in the pages folder in our project root. While we are here, let's also set up other files. We also want a dynamic page for blogs, as we will also look at how to server-side render data output by editor.js. So now we also have, `/blog/[slug]` in pages. Finally, create a `components` folder in root, in there add two files, `Editor/Editor.js`, `Editor/EditorConstants.js`. With this, the final folder structure of our project will look like this.

![Project folder structure](project-folder-structure.png)

# Setting up the Editor component

While I was thinking about structuring the code and creating the custom Editor component, one thing I noticed was that it needs to be reusable. Say I have a create page to create new blogs and an edit page to edit existing blogs. My editor component should be such that, I should be able to include it in either of these pages, and it should work perfectly. Now, react-editor-js is already a wrapper around editor.js and does a pretty good job, but since the create and edit pages were going to be so similar, I decided to take it one step further. We also need to take care of the fact that react-editor-js and the plugins won't work on server-side rendering, so, creating a custom component with react-editor-js might be a good idea here.

First, bring in the plugins in the `EditorConstants.js` file, import all the plugins you are using, and export them as one object.

```js
import Embed from '@editorjs/embed';
import Header from '@editorjs/header';
import Delimiter from '@editorjs/delimiter';
import List from '@editorjs/list';
import Marker from '@editorjs/marker';

const constants = {
  embed: Embed,
  list: List,
  marker: Marker,
  header: Header,
  delimiter: Delimiter,
};

export default constants;
```

Now let’s work on the `Editor.js` file(our custom editor component). Since editor.js doesn’t work with SSR, we need to find a workaround here which imports editor.js only once the code is running on the client-side. Next.js gives us an elegant way to solve this through dynamic imports and specifying the {ssr: false} option. Using this, we can dynamically import the `react-editor-js` package. But we also have the plugins, which are also to be included on the client-side. I tried to do this in many ways, but if we want to import all the plugins at once using the `EditorConstants.js` module that we created, I found the most effective way to do it is using a useEffect hook to dynamically import the plugins. The useEffect ensures that the module is imported only on the client-side.

Let’s also create a save button and an `onSaveHandler` which receives the editor instance and gives us the data that we added in the editor. We can then have an onSave prop passed down from the parent that triggers a function in the parent and provides the content of the blog. The example below will make this clear.

Finally, I also added two input fields for title and description as we might want such things in a real blog creator.

```js
import { useEffect, useState } from 'react';
import Head from 'next/head';
import dynamic from 'next/dynamic';
const EditorJs = dynamic(() => import('react-editor-js'), { ssr: false });

let editorInstance;

const Editor = (props) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [editorTools, setEditorTools] = useState();

  const onSaveHandler = async (editorInstance) => {
    try {
      const blogData = await editorInstance.save();
      if (!title || title === '')
        throw new Error('Title cannot be empty. Please enter title');
      if (!blogData.blocks[0])
        throw new Error('Blog cannot be empty. Please enter some data');
      props.onSave(blogData, title, description);
    } catch (err) {
      console.log(err);
    }
  };

  let editorComponent;
  if (!editorTools) editorComponent = 'Loading...';
  else {
    editorComponent = (
      <EditorJs
        instanceRef={(instance) => (editorInstance = instance)}
        tools={editorTools}
        placeholder={`Let's write an awesome blog!`}
      />
    );
  }

  useEffect(() => {
    const importConstants = async () => {
      const tools = (await import('../../components/Editor/EditorConstants'))
        .default;
      setEditorTools(tools);
    };

    importConstants();
  }, []);

  const inputStyle = {
    maxWidth: '500px',
    marginBottom: '20px',
    height: '30px',
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Head>
        <title>Create Blog</title>
        <meta name='description' content='Generated by create next app' />
      </Head>

      <input
        style={inputStyle}
        placeholder='Your Blog Title'
        value={title}
        onChange={(event) => setTitle(event.target.value)}
      />

      <input
        style={inputStyle}
        placeholder='Your Blog Description'
        value={description}
        onChange={(event) => setDescription(event.target.value)}
      />

      {editorComponent}

      <div style={{ textAlign: 'center' }}>
        <button onClick={() => onSaveHandler(editorInstance)}>Save</button>
      </div>
    </div>
  );
};

export default Editor;
```
## Using the editor in the app

Now let’s go to the create page and use our Editor component. We just need to import the custom Editor component and pass an onSave prop. The onSave prop will link to a function in the create page that will receive the data given by the custom Editor. Now, we can do anything with this data, like sending it to a server to store it in a database.

```js
import Head from 'next/head';
import Editor from '../../components/Editor/Editor';

const CreateBlog = (props) => {
  const onSaveHandler = async (blogData, title, description) => {
    const toSaveData = {
      title,
      blogData,
      description,
    };

    console.log(toSaveData);
    //make your ajax call to send the data to your server and save it in a database
  };

  return (
    <div style={{ width: '80%', margin: '0 auto' }}>
      <Head>
        <title>Create new blog</title>
      </Head>
      <h1>Create Blog</h1>
      <Editor
        onSave={(editorData, title, description) =>
          onSaveHandler(editorData, title, description)
        }
      />
    </div>
  );
};

export default CreateBlog;
```

With this, we are done with our editor. Similarly, we can also create an edit page to edit the existing blogs, here, first we fetch the required blog from the server and pass it into our custom editor. Now in the custom editor, we need to do some refactoring to accept this data and display it in the editor. In the onSave function on the edit page, we can do something like a patch request to the server to change existing blogs after receiving the data from the editor component.

# Displaying blogs through SSR

We created our blog, saved it, and that's great. But we also want to be able to display the blogs through SSR to be SEO friendly. Now, one can surely write custom renderers, which receive the data saved using Editor.js and render them with HTML and CSS. But there is again a great package that will do this for you and will serve most of your needs.

```js
npm i editorjs-react-renderer
```

We just need to import it into our dynamic blog page`/pages/blog/[slug]` and pass on the blog data created through editor.js.

```js
import Output from 'editorjs-react-renderer';

const BlogDetail = (props) => {
  const { data, error } = props;

  if (error) {
    console.log(error);
    return null;
  }

  return (
    <div style={{ width: '80%', margin: '0 auto' }}>
      <h1>{data.title}</h1>

      <div style={{ marginBottom: '3rem' }}>{data.description}</div>

      <div style={{ maxWidth: '800px', margin: '0 auto' }}>
        <Output data={data.blogData} />
      </div>
    </div>
  );
};

export default BlogDetail;

export async function getServerSideProps({ query }) {
  const { slug } = query;

  //make an ajax call to get your blog

  return {
    props: {
      data: {
        //return your blog data saved through editor.js
      },
    },
  };
}

export default BlogDetail;
```

# Conclusion

You can see an example of this in [this Github repo](https://github.com/shucoll/next-editor-js-example). If you want a more complete example, I also recently created a full-fledged blogging application with Node.js and MongoDB for backend and Next.js, Editor.js, and Material UI for frontend. You can check out the repo for that [here](https://github.com/shucoll/blog-app--webapp).

Hope you will create something great using these tools and technologies.  
Happy coding :)


MongoDB transactions in Node.js using Mongoose

Design workflow for developers

Developing a modern Blogging Application with Next.js and Editor.js