Image for post
Image for post

The problem

If you are a developer and work with Windows, it is very likely that at somepoint in time, you faced with an annoying little issue: typing a backtick and/or a tide in your code.

Maybe you use the new ES6 syntax and needed the backtick to interpolate your variables inside a string. Or maybe, you were trying to set up a CSS sibling selector.

In any case, typing these characters on Windows is quite uncomfortable. …


WordPress
WordPress

A common scenario

The idea for a new blog or a website comes to your mind and you find yourself driven by the typical enthusiasm of this new project. You want to get started as soon as possible, but you have no experience with domains, hostings and websites in general, so what to do? The solution is a free version of WordPress hosted on wordpress.org: no installation, no complicated stuff, no payments or subscriptions, in other words the perfect deal!

Yes, but… your website address has that /wordpress.org suffix that doesn’t sound very professional.. …


Image for post
Image for post

There we go again, talking about WordPress, the most used CMS in the web! Everyone knows how reliable a WordPress website is and how many possbilities it has to offer thanks to the huge number of third-party plugins out there. It is easy to use, simply to mantain and very fast when it comes to add content!

WordPress is so widespread that nowadays most of the hosting solutions companies also offer a “WordPress package” providing a pre-installed version of WordPress together with hosting and domain services.

However, these offers are defintely more expensive than a plain hosting+domain solution, and it is not uncommon that the difference in price is not worthy at all if you know how to manually install a WordPress website by yourself, especially if you think that WordPress itself is totally free. …


Image for post
Image for post

Hey guys, this is the second part of my tutorial about Fastify and React Admin. In this second part we are going to build the frontend of our CRUD todo list application with React admin and connect it to the Fastify backend we developend previously! If you missed part 1, you can find it here. If you want to skip reading and go straight to the code, you can find all the frontend source code here, and the complete backend code here!

Small Recap

So as a small recap for the previous part of the tutorial: we put together a Fastify app, connected it to our MongoDB and created a collection of notes. We also created a Note Model to be able to perform classical CRUD operations on our collection and set up the endpoints following REST conventions. Finally, we added a preHandler Hook that manipulates our responses, adding a Content-Range header that contains the name of our resource (notes), information about the pagination and the total number of notes in our database, as required by React Admin documentation. We will not have to worry about thiese headers on the frontend side since React admin is going to take care of them automatically. …


Image for post
Image for post

Have you ever realized how repetitive and somehow boring it is to make up the frontend for backoffice CRUD operations over and over in all your projects? Well, a few days ago I randomly ran across this interesting package named React Admin by marblelab, which promises to definitely boost the whole process on the frontend side! I therefore decided to give it a try and make a small, fullstack CRUD application, using Fastify and MongoDB / Mongoose for my backend stack.

In this tutorial, we are going to build a todo list-like application in 2 parts, in the first one, we will build the backend with fastify and set up the endpoints to handle all the CRUD operations over our notes. In the second one, we will implement React Admin to build the frontend facade of our app. You can find the complete source code for the backend here, and the complete source code for the frontend here! …

About

Marco Lancellotti

Passionate Coder. Currently Front End Team Leader @ uDroppy Inc.

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