DEV Community: Tamas Szoke

New MERN Stack Boilerplate

Tamas Szoke — Wed, 30 Nov 2022 11:39:54 +0000

I'm introducing MERN-SEED, an advanced boilerplate using Node, React, and TypeScript inside Docker containers. It takes advantage of the latest technologies and best practices to make your development process as efficient as possible.

I released the original project in 2019 as MERN Boilerplate. Since then, there have been a lot of changes to the frameworks and packages it uses, so I decided to rewrite it to be more recent. In the following, I will discuss the features and benefits of the release.

Highlights

It is built with clean and consistent code, keeping scalability and performance in mind. The advanced structure allows you to build applications of any size.

JWT Authentication
TypeScript on both ends
Modern EcmaScript features
Clean, consistent code
Folder by Features structure
Simplified production builds
Docker containers
Automated setup
End-to-end tests

Features

The project has been written in TypeScript, a superset of JavaScript that adds static type checking and other features that can be useful in large-scale applications and make the code more maintainable.

The Folder-by-Features structure increases scalability and ease of collaboration. It has complete End-to-End testing, which will help to ensure that the application is fully functional before release.

It uses Docker containers to be portable and simple to set up all the tools needed for development and production.

Backend

The backend includes global error handling with internal error codes and custom errors, as well as standardized request responses to maintain consistency. JWT is used for authentication and authorization to reduce the workload on the server. It uses Node v18 LTS, so the code is more stable and reliable.

Frontend

The frontend uses hooks rather than class components. This approach is more efficient and will make the code easier to understand and maintain. It has light and dark themes prepared to use and extend. In addition, it uses React v18 and Redux Toolkit to make the application more modern.

Setup

I have included a bash script to simplify the process of setting up and running the project in under 5 minutes by automating the process of installing the dependencies and setting up the configurations.

Summary

Thank you for taking the time to read about my project. Any feedback or support is appreciated. I hope you find it useful!

Read the detailed documentation for more.
GitHub repo: https://github.com/tamasszoke/mern-seed

Boilerplate for MERN stack development

Tamas Szoke — Tue, 02 Apr 2019 19:09:56 +0000

Welcome, this is my newest boilerplate module, it helps to start MERN stack development faster and uses features like:

Docker containers
Clear separation of concerns (client, server, build)
Folder by Feature structure
Clean code with JavaScript Standard Style
PM2 (cluster mode) for production
Built-in local authentication with Passport
Built-in Socket.IO connection
Detailed description

Thanks for stopping by,
Have a nice day!

Check out on GitHub

Update 2022

There is a new TypeScript version, check the article!

Neat-RTC: WebRTC wrapper for React and Vue

Tamas Szoke — Tue, 02 Apr 2019 11:53:42 +0000

Welcome, this is my recently created module, it makes WebRTC easier to use with features like:

Built-in signaling
Simplified mediastream, datachannel usage
Ready to use React, Vue examples
Detailed description

Try the package at NPM
Check browser compatibility

What is WebRTC?

WebRTC is an HTML5 specification that you can use to add encrypted, real-time media/data communications directly between browsers or devices.

Have a nice day!

tamasszoke / neat-rtc

WebRTC wrapper for peer-to-peer (P2P) communication with built-in signaling for React and Vue.

Neat-RTC

WebRTC wrapper with built-in signaling for React and Vue.

Support the project

Roadmap

These are the planned updates of the project.

Choose device option
File sharing example

Overview

1. Install the package
2. Import, configure, create an instance
3. Wire up signaling on client-side
4. Setup signaling on server-side
5. Using mediastream, datachannel

Install

npm install neat-rtc

Usage

Import

import NeatRTC from 'neat-rtc';

Configure

const config = {
  devMode: true,
  videoIdLocal: 'localVideo',
  videoIdRemote: 'remoteVideo',
  connected: connected,
  mediaStreamConnected: mediaStreamConnected,
  mediaStreamRemoved: mediaStreamRemoved,
  mediaStreamRemoteRemoved: mediaStreamRemoteRemoved,
  datachannels: [
    {
      name: 'text',
      callbacks: {
        open: datachannelOpen,
        message: datachannelMessage,
        error: datachannelError,
        close: datachannelClose
      }
    }
  ]
};

Important: you have to set up all of the callback functions above.

RTCPeerConnection configuration (optional)

Add the following properties to the above config object.

connectionConfig: set the STUN/TURN servers and other connection options, for more information check the RTCConfiguration dictionary. Default value:

{
  iceServers: [
    {

…

View on GitHub