Sign in

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

In this article we will talk about capabilities, tip and features of JetBrains IDEs like Webstorm and Intellij that you get out of the box but 90% chance that you don’t use it.

For our examples, I will use a simple Typescript React project created by create-react-app script and simple TS files for tests like 2 + 2 = 4.

1. Presentation plugin

Before we will begin our journey I will install a Presentation plugin…


React DnD is a set of React utilities to help you build complex drag and drop interfaces . We will take a look on it’s basic capabilities with implementing our own kanban board.

What will be covered in this article:

  • Prerequisites
  • Installation
  • Implementing draggable item
  • Implementing droppable item
  • Creatin kanban board
  • Adding multiple draggable items
  • Make items sortable in the column
  • Mobile version of drag and drop
  • Refactor before adding drop restrictions
  • Adding drop restrictions

Before we will start our journey, let’s see what we will get at the end (gif):


In this article we will take a look at how we can send a video as a stream (in chunks), and as a segmented video (m3u8). Additionaly we will create a React.js app with “vime-js” (not vimeo) player.

What we will be implementing

This is how our React.js page will look like fetching data from our Node.js server:


Let’s take a look at how we can handle data upload using React app. For demo purposes, Express.js server will be created too so you could check back-end data yourself and modify it as you like.

Prerequisites

This is how our start project will look like, no additional files will be added…


Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

What will be covered in this article

  • Prerequisites;
  • Static pages;
  • Adding bootstrap;
  • Adding Express API server;
  • Dynamic Pages and Routes;
  • Fetching data from a server;
  • Server-side rendering;
  • Adding Posts page;

Prerequisites

Before we begin we will need to create an empty Next.js project (if you didn’t do it already), otherwise, you can skip this section.

Inside your empty project’s folder run script:

npx create-next-app --typescript


Mockoon is the easiest and quickest way to run mock API servers locally.
No remote deployment, no account required, free, open source and cross-platform.

What will be covered in this article

  • Why should you use Mockoon
  • Starting your local server
  • An array of thousands of users
  • 8000 users with image URL
  • Query params
  • If/else response
  • Using Rules
  • Logs

Why should you use Mockoon

What if you need to mock a specific API that is not available at the moment?


A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators to augment your stories with extra rendering or gather details about how your story is rendered.

When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.

What will be covered in this article:

  • Prerequisites;
  • Decorators;
  • Context;
  • Adding theme globals;

Prerequisites

If you are not familiar with the Storybook or next “prerequisites” steps should be described in more detail, you can check this story (prerequisites section is the same):

We will be using React project created in the simplest way, by using create-react-app with the Typescript…


Storybook is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

What will be covered in this article?

  • Prerequisites;
  • Storybook installation;
  • Stories;
  • Controls/Arguments;
  • Documentation;

Prerequisites

We will be using React project created in the simplest way, by using create-react-app with the Typescript template:

npx create-react-app my-app --template typescript

👉 NOTE: Storybook needs to be installed into a project that is already setup with a framework. It will not work on an empty project.

Next, we will need to clean up our project from the CSS and SVG files, so it will be as simple as possible.


Let’s take a look at the HTTP client that can execute HTTP Requests directly in the JetBrains IDEs.

Creating HTTP/REST file

You can create HTTP/REST files inside your project. Those files will be shared between your teammates, so they could make your pre-defined requests.

Or even BE guys could create and test those files for you 🙂


Let’s take a look at fundamentals of a Spring Framework with some basic Spring annotations. This artile will guide you through the basic steps of how you can create an application with use of a Spring Framework.

If you don’t want to create a new project from scratch, you can use this repository as a reference (It is a finished project. This story will guide you step-by-step at how it was created):

Create a new maven project

Before we begin our journey, let’s create a maven project. I will use JDK 1.8:

Artem Diashkin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store