Set up a Modern MERN Application in less than a minute.
Tags: webdev, react, node, mongodb
Published: 2023-09-30 21:50:54

### TL;DR -> [Installation](#installation)

#### Hello coders! 🧙‍♂️

Since I am now building many different project that often need a similar initial setup, I created **two modern templates** to accelerate my work.

I started downloading `pnpm`, a fast, disk space efficient package manager.

## Front-End

For the **Front-End** template, I created a Vite **React** app with **Typescript** 💙. **Vite** is a build tool used for faster and leaner development experience for modern web projects. Then I added support for most of the best modern technologies some might want to use in their project.

For example, I added **Docker** 🐋 support, with **convinient npm scripts** in the package.json to simplify build, run and development with it.

### CSS ⁉️

I also added **TailwindCSS**, a utility-first CSS framework for rapidly building custom user interfaces and I paired it with the **HeadlessUI** library, made of completely unstyled, fully accessible UI components that work perfectly with Tailwind 😍. I personally find Tailwind absolutely amazing, since it simplifies a front-end dev work at the point that CSS doesn't feel bad anymore! 😄

### Progressive Web App 😱

But **the most important thing** is probably the support for **PWA (Progressive Web App)**. As a developer, it often feels boring to manually set up a PWA, but with this template, everything is packed-up and production ready! 🤩🤩

## Back-end

For the **Back-End** template, I created a **Node.js app** and added basic features, like `express.js` and `cors`.

I also added support for `mongoose.js`, an elegant MongoDB object modeling library for Node.js.

Obviously, **Docker** 🐋 and the custom npm scripts are supported in the Back-End template too, so you will no longer be worrying about any initial Docker setup.

### Linters? ✨

In both template **EsLint** and **Prettier** are already configured, so that you just need to specify how you want your code to be formatted and linted in the `.prettierrc` and `.eslintrc.cjs` files. ✨✨

I completed publishing to `npm` two `npx` packages to easily scaffold your next projects 🧙‍♂️.

## Installation 🧙‍♂️

We finally got to the good part!
Here are the repositories for both the templates I created:
[Front-end](https://github.com/alessandrofoglia07/create-modern-react-pwa), [Back-end](https://github.com/alessandrofoglia07/create-modern-node-app)

You can run these commands in your terminal to set up everything in a minute!

```bash
# Front-end (2nd argument to specify the location)
$ pnpx create-modern-react-pwa my-app-frontend
```

```bash
# Back-end (2nd argument to specify the location)
$ pnpx create-modern-node-app my-app-backend
```

If you don't like using `pnpm`, here are the same commands with `npm`:

```bash
# Front-end (2nd argument to specify the location)
$ npx create-modern-react-pwa my-app-frontend
```

```bash
# Back-end (2nd argument to specify the location)
$ npx create-modern-node-app my-app-backend
```

### Who am I? 

I am an Italian high-school student who is interested in web-dev 🧙‍♂️. If you'd like to support me, you can follow me here and on my [GitHub](https://github.com/alessandrofoglia07), I would really appreciate it 💜