Sign in

Alex Merced is a Full Stack Developer, learn more about his work at AlexMercedCoder.com

What are we going to build

We will be build a simple todo list using the following:

  • NextJS: A Full Stack framework built around React offering Client Side, Server Side and Static Rendering.
  • Typescript: A Javascript superset made by microsoft to write scalable code
  • Mongo: A Document Database

Getting Started

  • generate a new typescript next project with the following command: npx create-next-app --ts
  • cd into the new project folder and run dev server npm run dev checkout that site is visible on localhost:3000

Step 1 — Connect to your mongo database

We need to store our database URI in safe place. Create a file called .env.local (Next already knows to look for this file for environmental…


Conditionals in Javscript

In javascript you generally have on of two choices to test several conditions with different outcomes:

If Statements

For example if I want to test whether a variable has one of many strings as its value…

if (color === "red"){
console.log("it's red")
}
if (color === "blue"){
console.log("it's blue")
}
if (color === "red"){
console.log("it's red")
}

This can be simplified with one line ifs…

if (color === "red") console.log("it's red")if (color === "blue") console.log("it's blue")if (color === "green") console.log("it's green")

or ternary operators

color === "red" ? console.log("it's red") : nullcolor === "blue" ? console.log("it's blue") : null


This article is a walkthrough to creating a basic level of authentication with Express, Mongo and JSON Web Token. You can add more layers of complexity if you wish (user roles, refresh tokens, etc.).

Step 1 — Create the Application

  • create new folder
  • create a server.js file
  • create a new npm project npm init -y
  • install dependencies npm install express jsonwebtoken bcryptjs morgan dotenv mercedlogger mongoose cors

Overview of dependencies

  • express: the web framework
  • jsonwebtoken: library for signing/creating and verifying/validating JSON Web Tokens (JWT), often pronounced ‘JOT’ for some reason.
  • bcryptjs: library for hashing strings like password and then comparing the hash to strings for validation.
  • morgan: library for…

One of the biggest recent trends has been to have MORE javascript in your web applications whether that meant doing your backend web server in node/deno or shifting your entire stateful view logic into the client using frontend frameworks like React and Angular.

Recent I did a video a series where I build an API with express/mongo and consumed that api in the following:

  • React
  • Angular
  • Svelte
  • Vue
  • SolidJS
  • RiotJS
  • StencilJS
  • Native Web Components
  • AMPonent
  • Lit-Element
  • Plain Vanilla Javascript

If you want to checkout that video series start with the API build you can find HERE.

Don’t Call it a Comeback

There are a lot…


We all love Ruby on Rails and how easy it makes creating APIs and websites. In python, Django has generally been the main batteries included framework used for many projects. The problem is Django has a lot of quirks that make its patterns quite different than the more railsesque approach frameworks for other languages have taken. Masonite provides a much more rails like experience in the Python language, let’s try it out!

Pre-requisites

  • Python 3.6
  • pip

Setup

  • in an empty folder run python -m venv venv to create a new virtual environment then source ./venv/bin/activate to activate it.
  • pip install masonite to…


Using the below you can see the basics of 10 different languages. For most of these langauges you should be able to try them out by generating a REPL.

How to print text to the console

One of the first things you need to learn in any language is how to print text in the console. Being able to print text to console allows us to…

  • print the value of variables to check that they have the right values
  • print the return values of functions so we can make sure they return the right value
  • be used just to print text to confirm parts of our code…

Flask and FASTApi are two very popular Python frameworks for creating an API in python. In this tutorial, we will walk through making an API with both with full CRUD. We will not be using a database or ORM. Although using the patterns below you can adapt your preferred data layer into your API. So instead of a database we will define our model using a class and use a list to create, read, update and delete our data.

Before doing this tutorial make sure to have a recent version of Python 3 installed.

Summary of RESTful Convention

THe restful convention gives us a…


Ruby Sinatra is probably the second most popular web framework in the Ruby ecosystem, second to the behemoth of Ruby on Rails. Ruby is a more minimalist framework like Javascripts, Express or Pythons, Flask.

Before this tutorial make sure to have Ruby installed.

Summary of RESTful Convention

THe restful convention gives us a blueprint of making the basic routes for CRUD (Create, Read, Update, Delete) functionality in a uniform way.

API Restful Routes

Index GET/modelreturns list of all items

Show GET/model/:idreturns item with matching id

Create Post/modelcreates a new item, returns item or confirmation

Update Put/Patch/model/:id An updated item with matching ID

Destroy Delete/model/:idDeletes…


NodeJS is an amazing tool that allows us to bring Javascript to backend development. When it comes to creating web servers, there are dozens of frameworks in the Node ecosystem. The most popular minimalist unopinionated frameworks are Express, Koa and Fastify. In this tutorial we will build a basic API that follows RESTful conventions with each one. We will not be using a database but instead an array of objects to simulate data from a database so we can focus on the RESTful patterns.

Summary of the RESTful Convention

THe restful convention gives us a blueprint of making the basic routes for CRUD (Create, Read…


Using Typescript for development for frontend and backend development keep growing. Typescript allows for better IDE hints and less runtime errors due to type errors with its typing system. On top of that Typescript makes popular OOP patterns like dependency injection more applicable vs when typing doesn’t exist like in plain javascript. (In DI, you use typing in class constructor to instantiate and inject services throughout your application)

Two frameworks keep typescript close to their hearts when building a backend application in NodeJS, NestJS and FoalTS. …

Alex Merced Coder

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