My first blog with MERN Stack
Tags: react, node, webdev, javascript
Published: 2020-05-03 23:29:36

# All about my blog: Why? What?

# Let's start

This "guide" is for people who want to create a blog from scratch and do not know how to start, it doesn´t contain code or at least for the most part. it´s for guidance only.

In the following lines I´ll give you the details of the content of this publication, feel comfortable reading it or just go only to the part that interests you, I´ll hope you enjoy it.

---
---

## Index

* Why
* What
  * Front-end
  * Back-end
  * Database
  * Utils
  * Styling

---
---

## Why?

I made a blog because I think it is the best way to practice. I used my knowledge of front-end and back-end.

A blog is a good quick-source in case you have to solve problems. it´s information in your own words. It´s like a notebook, but you can share that information with other people and learn together. Sharing information about programming with other people is what makes it a beautiful environment.

This blog was based on **Markdown**,because i love it and in think it´s simple elegant and very clear. it has a beautifull sintax.

More info about **markdown** [here](https://en.wikipedia.org/wiki/Markdown).

---

## What technologies you use for this blog ?

Just like most internet pages this blot it´s based on a front-end a back-end and a database. I dicided to use a stack called  MERN (MongoDB, Express, React, Node) in this particular case because it uses javascript on the client and server side.

---

### Front-end

The front-end is the part of a website with which users interact. all you can see when you browse the internet,from fonts and colors to drop-down menus and sliders. As much as simple it seems,you may have a lot of functionality and complex code.

For the **front-end** of the blog i prefer the following technologies.

* [react](https://reactjs.org/)
* [react-router-dom](https://www.npmjs.com/package/react-router-dom)
* [history](https://www.npmjs.com/package/history)
* [axios](https://www.npmjs.com/package/axios)
* [react-markdown](https://www.npmjs.com/package/react-markdown)
* [react-spring](https://www.npmjs.com/package/react-spring)
* [momentjs](https://momentjs.com/)
* [react-loading-skeleton](https://www.npmjs.com/package/react-loading-skeleton)

It seems a lot of things, but each of the dependencies are use on something in particular.

[Link to front-end: how?](https://blog.rhodlib.me/article/all-about-my-blog-front-end-how)

---

### Back-end

The **back-end** consist of a server an application and a database. . it´s the data access layer of a software or any other device, which is not directly accessible by users,also contains the logic of the application that handles said data.

For **the back-end** of the blog I choose the following technologies

* [NodeJS](https://nodejs.org/en/)
* [ExpressJS](https://expressjs.com/)
* [Mongoose](https://mongoosejs.com/)
* [dotenv](https://www.npmjs.com/package/dotenv)
* [cors](https://www.npmjs.com/package/cors)
* [validator](https://www.npmjs.com/package/validator)
* [bcryptjs](https://www.npmjs.com/package/bcryptjs)
* [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken)
* [slugify](https://www.npmjs.com/package/slugify)

### Database

The **database** is where we store all the data, in this case we storage users and articles.

I use **MongoDB** for my blog´s database.

* [MongoDB](https://www.mongodb.com/)

[Link to back-end: how?](https://blog.rhodlib.me/article/all-about-my-blog-back-end-how)

---

### Utils

The utils are the tools I use to develop, I don't need an article to explain them, because they all have their own documentation and are basic development tools.

* [VScode](https://code.visualstudio.com/)
    // Visual Studio Code
* [Chrome](https://www.google.com/intl/es-419/chrome/)
    // Web browser
* [Insomnia](https://insomnia.rest/)
    // Desktop API client for REST simil to Postman
* [nodemon](https://www.npmjs.com/package/nodemon)
    // npm package, it is used to keep the local server running

### Styling

* [prettier](https://prettier.io/)
    // Tool for styling the code in the code editor
* [water.css](https://kognise.github.io/water.css/)
    // Is a collection of styles to make simple website, this stylizes the html semantics, It's simple and beautiful.