MEAN Stack Tutorial | Create a Full Stack MEAN App from Scratch

MEAN Stack Tutorial for Beginners - Full Course

The MEAN Stack Application tutorial will help you to create a Full Stack MEAN Application from scratch. Each section of code has been explained to provide a better understanding. You will learn about following technologies while going through this video: Angular, Node.js, Express.js and MongoDB

How to Use MEAN Stack: Build a Web Application from Scratch


Welcome to the MEAN stack tutorial! This tutorial will teach you how to build a full stack web application using the MEAN stack. The final project will be an employee management system. You can find the source code for this tutorial on Github.

What is the MEAN stack?

MEAN is a technology stack used for building full stack applications. It's a combination of the following technologies:

  • MongoDB—document database
  • Express—a Node.js framework for building APIs
  • Angular—front-end application framework
  • Node.js—server-side JavaScript runtime environment

Applications built with the MEAN stack follow the client-server architecture. The client, built with Angular, can be a web application, a native mobile application, or a desktop application. The client communicates with the server through an API, which is built with Express. The server then manages the requests with the MongoDB database.

Client-Server Architecture

Client-Server Architecture

What will this tutorial cover?

In this tutorial, we'll build a RESTful API that implements the CRUD (Create, Read, Update, Delete) operations for an employee. For data persistence, we'll be using a MongoDB Atlas cluster.

We'll be building an employee management web application. The interface will have the following pages:

  • View all employees
  • Add new employees
  • Update existing employees

Here's what our finished application looks like:

gif of angular app demonstration

Getting started

You'll need Node.js and a MongoDB Atlas cluster to follow this tutorial.

  • Visit to download and install the current version of Node.js. This tutorial is tested with Node.js version 16.13.0. To make sure you're using the correct Node.js version, execute the following command in your terminal:
 node --version
  • Follow the Get Started with Atlas guide to set up your free MongoDB Atlas cluster. Make sure you complete all the steps and locate your cluster's connection string. You'll need it later when we're connecting to the database.

Building the server-side Node.js and Express application

Let's start by creating a directory that will host our project and its files. We'll name it ‘mean-stack-example’.

mkdir mean-stack-example
cd mean-stack-example

We'll be using shell commands to create directories and files throughout the tutorial. However, you're more than welcome to use any other method.

Now, let's create the directories and files that will host our server-side application—‘server’ and ‘server/src’—and also initialize a ‘package.json’ file for it.

mkdir server && mkdir server/src
cd server
npm init -y

touch tsconfig.json .env
(cd src && touch database.ts employee.routes.ts employee.ts server.ts)

Installing dependencies

We'll need a few external packages to build the RESTful API and to connect to our MongoDB Atlas cluster. Let's install them using the npm install command.

npm install cors dotenv express mongodb

We'll also be using TypeScript for our server application. We'll install the TypeScript compiler and the supporting @types packages as development dependencies using the --save-dev flag. These packages are only used during development and shouldn't be included in the final production application.

npm install --save-dev typescript @types/cors @types/express @types/node ts-node

Finally, we'll paste the following into the tsconfig.json configuration file that TypeScript will use to compile our code.


   "compilerOptions": {
       "module": "commonjs",
       "esModuleInterop": true,
       "target": "es6",
       "noImplicitAny": true,
       "moduleResolution": "node",
       "sourceMap": true,
       "outDir": "dist",
       "baseUrl": ".",
       "allowJs": true,
       "paths": {
           "*": ["node_modules/*"]
   "include": ["src/**/*"]

Create an employee interface on the server side

Since we’re building an employee management app, the main data unit is the employee. Let's create an Employee interface that will be used to define the structure of the employee object.


import * as mongodb from "mongodb";
export interface Employee {
   name: string;
   position: string;
   level: "junior" | "mid" | "senior";
   _id?: mongodb.ObjectId;

Our employees should have a name, position, and level. The _id field is optional because it's generated by MongoDB. So, when we're creating a new employee, we don't need to specify it. However, when we get an employee object from the database, it will have the _id field populated.

Connect to the database

Let's implement the following function to connect to our database:


import * as mongodb from "mongodb";
import { Employee } from "./employee";
export const collections: {
   employees?: mongodb.Collection<Employee>;
} = {};
export async function connectToDatabase(uri: string) {
   const client = new mongodb.MongoClient(uri);
   await client.connect();
   const db = client.db("meanStackExample");
   await applySchemaValidation(db);
   const employeesCollection = db.collection<Employee>("employees");
   collections.employees = employeesCollection;
// Update our existing collection with JSON schema validation so we know our documents will always match the shape of our Employee model, even if added elsewhere.
// For more information about schema validation, see this blog series:
async function applySchemaValidation(db: mongodb.Db) {
   const jsonSchema = {
       $jsonSchema: {
           bsonType: "object",
           required: ["name", "position", "level"],
           additionalProperties: false,
           properties: {
               _id: {},
               name: {
                   bsonType: "string",
                   description: "'name' is required and is a string",
               position: {
                   bsonType: "string",
                   description: "'position' is required and is a string",
                   minLength: 5
               level: {
                   bsonType: "string",
                   description: "'level' is required and is one of 'junior', 'mid', or 'senior'",
                   enum: ["junior", "mid", "senior"],
   // Try applying the modification to the collection, if the collection doesn't exist, create it
  await db.command({
       collMod: "employees",
       validator: jsonSchema
   }).catch(async (error: mongodb.MongoServerError) => {
       if (error.codeName === 'NamespaceNotFound') {
           await db.createCollection("employees", {validator: jsonSchema});

We're using the MongoDB Node.js Driver distributed as the mongodb NPM package. First, we create a new MongoClient object with the provided connection string. Then, we connect to the database. We need to use await since connect is an asynchronous function. After that, we get the db object from the client object. We use this object to get the employees collection. Note that the variable employees is cast to the Employee interface. This will provide type checking to any query we send to the database. Finally, we assign the employees collection to the collections object which is exported from this file. That way, we can access the employees collection from other files such as the employee.routes.ts file which will implement our RESTful API.

We're also using JSON schema validation to ensure that all of our documents follow the shape of our Employee interface. This is a good practice to ensure that we don't accidentally store data that doesn't match the shape of our model.

We'll be persisting our data to a MongoDB Atlas cluster. To connect to our cluster, we'll need to set an ATLAS_URI environment variable that contains the connection string. Add it to the server/.env file. Make sure you replace the username and password placeholder with your credentials.



Now, we can load the environment variables using the dotenv package. We can do that in any file but it's a good practice to do it as early as possible. Since the server.ts file will be our entry point, let's load the environment variables from it, connect to the database, and start the server:


import * as dotenv from "dotenv";
import cors from "cors";
import express from "express";
import { connectToDatabase } from "./database";
// Load environment variables from the .env file, where the ATLAS_URI is configured
const { ATLAS_URI } = process.env;
if (!ATLAS_URI) {
   console.error("No ATLAS_URI environment variable has been defined in config.env");
   .then(() => {
       const app = express();
       // start the Express server
       app.listen(5200, () => {
           console.log(`Server running at http://localhost:5200...`);
   .catch(error => console.error(error));

Let's run the app and see if everything works:

npx ts-node src/server.ts

You should see the following output:

Server running at http://localhost:5200...

Good job! Now, we’re ready to build the RESTful API for our employees.

Build the RESTful API

In this section, we'll implement a ‘GET’, ‘POST’, ‘PUT’, and ‘DELETE’ endpoint for our employees. As you can notice, these HTTP methods correspond to the CRUD operations— Create, Read, Update, and Delete—we'll be performing on our employees in the database. The only caveat is that we'll have two ‘GET’ endpoints: one for getting all employees and one for getting a single employee by ID.

To implement the endpoints, we'll use the router provided by Express. The file we'll be working in is src/employee.routes.ts.

GET /employees

Let's start by implementing the ‘GET /employees’ endpoint which will allow us to get all the employees in the database.


import * as express from "express";
import * as mongodb from "mongodb";
import { collections } from "./database";
export const employeeRouter = express.Router();
employeeRouter.get("/", async (_req, res) => {
   try {
       const employees = await collections.employees.find({}).toArray();
   } catch (error) {

We're using the find() method. Because we're passing in an empty object—{}—we'll get all the employees in the database. We'll then use the toArray() method to convert the cursor to an array. Finally, we'll send the array of employees to the client.

You may notice that the route is ‘/’. This is because we'll register all endpoints from this file under the ‘/employees’ route.

GET /employees/:id

Next, we'll implement the ‘GET /employees/:id’ endpoint which will allow us to get a single employee by ID. Append the following to the bottom of employee.routes.ts:


employeeRouter.get("/:id", async (req, res) => {
   try {
       const id = req?.params?.id;
       const query = { _id: new mongodb.ObjectId(id) };
       const employee = await collections.employees.findOne(query);
       if (employee) {
       } else {
           res.status(404).send(`Failed to find an employee: ID ${id}`);
   } catch (error) {
       res.status(404).send(`Failed to find an employee: ID ${req?.params?.id}`);

The ID of the employee is provided as a parameter. We use the ObjectId method to convert the string ID to a MongoDB ObjectId object. We then use the findOne() method to find the employee with the given ID. If the employee is found, we'll send it to the client. Otherwise, we'll send a ‘404 Not Found’ error.

If you're wondering what the ‘?’ symbol represents in some of the expressions above, it's optional chaining operator. It enables you to read the value of a nested property without throwing an error if the property doesn't exist. Instead of throwing an error, the expression evaluates to undefined.

POST /employees

The ‘POST /employees’ endpoint will allow us to create a new employee. Append the following to the bottom of employee.routes.ts:

mean-stack-example/server/src/employee.routes.ts"/", async (req, res) => {
   try {
       const employee = req.body;
       const result = await collections.employees.insertOne(employee);
       if (result.acknowledged) {
           res.status(201).send(`Created a new employee: ID ${result.insertedId}.`);
       } else {
           res.status(500).send("Failed to create a new employee.");
   } catch (error) {

We receive the employee object from the client in the request body. We'll use the insertOne() method to insert the employee into the database. If the insertion is successful, we'll send a ‘201 Created’ response with the ID of the employee. Otherwise, we'll send a ‘500 Internal Server Error’ response.

PUT /employees/:id

The ‘PUT /employees/:id’ endpoint will allow us to update an existing employee. Append the following to the bottom of 'employee.routes.ts':


employeeRouter.put("/:id", async (req, res) => {
   try {
       const id = req?.params?.id;
       const employee = req.body;
       const query = { _id: new mongodb.ObjectId(id) };
       const result = await collections.employees.updateOne(query, { $set: employee });
       if (result && result.matchedCount) {
           res.status(200).send(`Updated an employee: ID ${id}.`);
       } else if (!result.matchedCount) {
           res.status(404).send(`Failed to find an employee: ID ${id}`);
       } else {
           res.status(304).send(`Failed to update an employee: ID ${id}`);
   } catch (error) {

Here, the ID of the employee is provided as a parameter whereas the employee object is provided in the request body. We use the ObjectId method to convert the string ID to a MongoDB ObjectId object. We then use the updateOne() method to update the employee with the given ID. If the update is successful, we'll send a ‘200 OK’ response. Otherwise, we'll send a ‘304 Not Modified’ response.

DELETE /employees/:id

Finally, the ‘DELETE /employees/:id’ endpoint will allow us to delete an existing employee. Append the following to the bottom of ‘employee.routes.ts’:


employeeRouter.delete("/:id", async (req, res) => {
   try {
       const id = req?.params?.id;
       const query = { _id: new mongodb.ObjectId(id) };
       const result = await collections.employees.deleteOne(query);
       if (result && result.deletedCount) {
           res.status(202).send(`Removed an employee: ID ${id}`);
       } else if (!result) {
           res.status(400).send(`Failed to remove an employee: ID ${id}`);
       } else if (!result.deletedCount) {
           res.status(404).send(`Failed to find an employee: ID ${id}`);
   } catch (error) {

Similar to the previous endpoints, we send a query to the database based on the ID passed as a parameter. We use the deleteOne() method to delete the employee. If the deletion is successful, we'll send a ‘202 Accepted’ response. Otherwise, we'll send a ‘400 Bad Request’ response. If the employee is not found (result.deletedCount is 0), we'll send a ‘404 Not Found’ response.

Register the routes

Now, we need to instruct the Express server to use the routes we've defined. First, import the employeesRouter at the beginning of ‘src/server.ts’:


import { employeeRouter } from "./employee.routes";

Then, add the following right before the app.listen() call:


app.use("/employees", employeeRouter);

Finally, restart the server by stopping the shell process with Ctrl-C, and running it again.

npx ts-node src/server.ts

You should see the same message as before in the console.

Server running at http://localhost:5200...

Well done! We've built a simple RESTful API for our employees. Now, let's build an Angular web application to interact with it!

Building the client-side Angular web application

The next step is to build a client-side Angular web application that will interact with our RESTful API. We'll use the Angular CLI to scaffold the application. To install it, open a new terminal tab and run the following command in the terminal from the root of your mean-stack-example folder:

npm install -g @angular/cli

It's important to keep the server running while you're working on the client-side application. To do this, you'll need to open a new tab in your terminal where you will execute commands for the client-side application. Also, make sure you navigate to the mean-stack-example directory.

After the installation is finished, navigate to the root directory of the project and run the following command to scaffold a new Angular application:

ng new client --routing --style=css --minimal

This will create a new Angular application in the ‘client’ directory. The --routing flag will generate a routing module. The --style=css flag will enable the CSS preprocessor. The --minimal flag will skip any testing configuration as we won't be covering that in the tutorial. Installing the dependencies may take a while. After the installation is finished, navigate to the new application and start it by running the following commands:

cd client
ng serve -o

After the application is built, you should see a new tab in your browser window with the application running.


Newly Created Angular Web Application


Finally, for styling we'll use Bootstrap. Add the following to <head> section in the ‘src/index.html’ file:


 <meta charset="utf-8">
 <base href="/">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
 <!-- Add the next 5 lines -->
 <link href="" rel="stylesheet"
   integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 <script src=""

Create an employee interface on the client-side

Similar to our server-side application, we'll create an Angular interface for our employees. We'll use the Employee interface to define the properties of our employee objects. Open a new terminal window and run the following command to scaffold the interface:

ng generate interface employee

Then, open the newly create ‘src/app/employee.ts’ file in your editor and add the following properties:


export interface Employee {
   name?: string;
   position?: string;
   level?: 'junior' | 'mid' | 'senior';
   _id?: string;

Creating an employee service

Angular recommends separating your business logic from your presentation logic. That's why we'll create a service that handles all communication with the ‘/employee’ endpoint of the API. The service will be used by the components in the application. To generate the service, run the following command:

ng generate service employee

The ‘ng generate service’ command creates a new service in the ‘src/app/employee.service.ts’ file. Replace the content of this file with the following:


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subject, tap } from 'rxjs';
import { Employee } from './employee';
 providedIn: 'root'
export class EmployeeService {
 private url = 'http://localhost:5200';
 private employees$: Subject<Employee[]> = new Subject();
 constructor(private httpClient: HttpClient) { }
 private refreshEmployees() {
     .subscribe(employees => {
 getEmployees(): Subject<Employee[]> {
   return this.employees$;
 getEmployee(id: string): Observable<Employee> {
   return this.httpClient.get<Employee>(`${this.url}/employees/${id}`);
 createEmployee(employee: Employee): Observable<string> {
   return`${this.url}/employees`, employee, { responseType: 'text' });
 updateEmployee(id: string, employee: Employee): Observable<string> {
   return this.httpClient.put(`${this.url}/employees/${id}`, employee, { responseType: 'text' });
 deleteEmployee(id: string): Observable<string> {
   return this.httpClient.delete(`${this.url}/employees/${id}`, { responseType: 'text' });

We're using the HttpClient service to make HTTP requests to our API. The refreshEmployees() method is used to fetch the full list of employees.

The HttpClient service is provided by Angular through the HttpClientModule. It's not part of the application by default—we need to import it in the ‘app.module.ts’ file. First, add the following import to the top of the ‘app.module.ts’ file:


import { HttpClientModule } from '@angular/common/http';

Then, add the module to the list of imports of the AppModule class:

 declarations: [
 imports: [
 providers: [],
 bootstrap: [AppComponent]
export class AppModule { }

Next, we'll create a new page that displays a table with our employees.

Create an employees list component

Let's create a new page for our table with employees. In Angular, a component is a reusable piece of code that can be used to display a view. We'll create a new component called EmployeesList and then also register it as the ‘/employees’ route in the application.

To generate the component, run the following command:

ng generate component employees-list

The Angular CLI generated a new component named EmployeesList in the ‘src/app/employees-list.component.ts’ file. It also declared the component in the ‘AppModule’ so we don’t have to do it manually. Replace the content of ‘src/app/employees-list.component.ts’ with the following:


import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Employee } from '../employee';
import { EmployeeService } from '../employee.service';
 selector: 'app-employees-list',
 template: `
   <h2 class="text-center m-5">Employees List</h2>
   <table class="table table-striped table-bordered">
           <tr *ngFor="let employee of employees$ | async">
                   <button class="btn btn-primary me-1" [routerLink]="['edit/', employee._id]">Edit</button>
                   <button class="btn btn-danger" (click)="deleteEmployee(employee._id || '')">Delete</button>
   <button class="btn btn-primary mt-3" [routerLink]="['new']">Add a New Employee</button>
export class EmployeesListComponent implements OnInit {
 employees$: Observable<Employee[]> = new Observable();
 constructor(private employeesService: EmployeeService) { }
 ngOnInit(): void {
 deleteEmployee(id: string): void {
     next: () => this.fetchEmployees()
 private fetchEmployees(): void {
   this.employees$ = this.employeesService.getEmployees();

As you can notice, EmployeesListComponent is a TypeScript class that is decorated with the @Component decorator. The @Component decorator is used to indicate that this class is a component. The selector property is used to specify the HTML tag that will be used to display this component. Spoiler alert: We won't use this selector at all. Instead, we'll register the component as a route. The template property is used to specify the HTML template that will be used to display this component.

The implementation of the class contains the logic for the component. The ngOnInit() method is called when the component is rendered on the page. It's a good place to fetch the list of employees. For that, we're using the EmployeeService we created earlier. The getEmployees() method returns an observable. We subscribe to it with the async pipe in the template. This will automatically render the list of employees as soon as the data is available. We're using a table to display the employees together with a few Bootstrap classes that make it look nicer.

There are also a few actions in the template—for editing, deleting, and adding new employees. The [routerLink] attribute is used to navigate to the ‘/employees/edit/:id’ route, which we'll implement later in the tutorial. The (click) event is used to call the deleteEmployee() method. This method, implemented in the class, uses the EmployeeService to delete an employee.

Now that we've created our component, we need to register it as a route in the ‘app.routing.module.ts’ file. Replace the contents of the file with the following:


import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EmployeesListComponent } from './employees-list/employees-list.component';
const routes: Routes = [
 { path: '', redirectTo: 'employees', pathMatch: 'full' },
 { path: 'employees', component: EmployeesListComponent },
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
export class AppRoutingModule { }

Then, go to the ‘src/app/app.component.ts’ file and remove the extraneous content from the template. Make sure you leave only the <router-outlet> tag, wrapped in a <div> tag.


import { Component } from '@angular/core';
 selector: 'app-root',
 template: `
 <div class="container-md">
export class AppComponent { }

Let's refresh the browser and see if everything is working.

Employees list table

We have a table but we don't see any employees yet. Let's create a new page for adding employees.

Creating a page for adding employees

We need a form for filling in name, position, and level, to create a new employee. For editing existing employees, we'll need a similar form. Let's create an EmployeeForm component and reuse it for both adding and editing.

ng generate component employee-form -m app

Let's start by importing the ReactiveFormsModule in our AppModule:


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeesListComponent } from './employees-list/employees-list.component';
import { EmployeeFormComponent } from './employee-form/employee-form.component';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms'; // <-- add this line
 declarations: [
 imports: [
   ReactiveFormsModule // <-- add this line
 providers: [],
 bootstrap: [AppComponent]
export class AppModule { }

Now, we can use Angular's FormBuilder to create a reactive form:


import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { BehaviorSubject } from 'rxjs';
import { Employee } from '../employee';
 selector: 'app-employee-form',
 template: `
   <form class="employee-form" autocomplete="off" [formGroup]="employeeForm" (ngSubmit)="submitForm()">
     <div class="form-floating mb-3">
       <input class="form-control" type="text" id="name" formControlName="name" placeholder="Name" required>
       <label for="name">Name</label>
     <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
       <div *ngIf="name.errors?.['required']">
         Name is required.
       <div *ngIf="name.errors?.['minlength']">
         Name must be at least 3 characters long.
     <div class="form-floating mb-3">
       <input class="form-control" type="text" formControlName="position" placeholder="Position" required>
       <label for="position">Position</label>
     <div *ngIf="position.invalid && (position.dirty || position.touched)" class="alert alert-danger">
       <div *ngIf="position.errors?.['required']">
         Position is required.
       <div *ngIf="position.errors?.['minlength']">
         Position must be at least 5 characters long.
     <div class="mb-3">
       <div class="form-check">
         <input class="form-check-input" type="radio" formControlName="level" name="level" id="level-junior" value="junior" required>
         <label class="form-check-label" for="level-junior">Junior</label>
       <div class="form-check">
         <input class="form-check-input" type="radio" formControlName="level" name="level" id="level-mid" value="mid">
         <label class="form-check-label" for="level-mid">Mid</label>
       <div class="form-check">
         <input class="form-check-input" type="radio" formControlName="level" name="level" id="level-senior"
         <label class="form-check-label" for="level-senior">Senior</label>
     <button class="btn btn-primary" type="submit" [disabled]="employeeForm.invalid">Add</button>
 styles: [
   `.employee-form {
     max-width: 560px;
     margin-left: auto;
     margin-right: auto;
export class EmployeeFormComponent implements OnInit {
 initialState: BehaviorSubject<Employee> = new BehaviorSubject({});
 formValuesChanged = new EventEmitter<Employee>();
 formSubmitted = new EventEmitter<Employee>();
 employeeForm: FormGroup = new FormGroup({});
 constructor(private fb: FormBuilder) { }
 get name() { return this.employeeForm.get('name')!; }
 get position() { return this.employeeForm.get('position')!; }
 get level() { return this.employeeForm.get('level')!; }
 ngOnInit() {
   this.initialState.subscribe(employee => {
     this.employeeForm ={
       name: [, [Validators.required] ],
       position: [ employee.position, [ Validators.required, Validators.minLength(5) ] ],
       level: [ employee.level, [Validators.required] ]
   this.employeeForm.valueChanges.subscribe((val) => { this.formValuesChanged.emit(val); });
 submitForm() {

There's a lot of code here but there isn't anything groundbreaking to it. We're just using the FormBuilder to create a reactive form with three fields and we're also adding validation to the form. The template is displaying the error messages in case there's a validation error. We're using an @Input() to pass in the initial state of the form from the parent component. The type of the @Input() is BehaviorSubject<Employee> because we might pass async data into the form.

For example, the parent component might fetch the employee data from an API and pass it into the form. The child component will get notified when new data is available. The @Output() is an event emitter that will emit the form values whenever the form is submitted. The parent will handle the submission and send an API call.

The next step is to implement the AddEmployeeComponent:

ng generate component add-employee -m app

Replace the content of the newly created file with the following:


import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Employee } from '../employee';
import { EmployeeService } from '../employee.service';
 selector: 'app-add-employee',
 template: `
   <h2 class="text-center m-5">Add a New Employee</h2>
   <app-employee-form (formSubmitted)="addEmployee($event)"></app-employee-form>
export class AddEmployeeComponent {
   private router: Router,
   private employeeService: EmployeeService
 ) { }
 addEmployee(employee: Employee) {
       next: () => {
       error: (error) => {
         alert("Failed to create employee");

We're using the EmployeeForm, and whenever the AddEmployeeComponent receives a form submission, it will call the EmployeeService to create the employee. The EmployeeService will emit an event when the employee is created and the AddEmployeeComponent will navigate back to the table of employees.

While we're at it, let's implement the component for editing an employee:

ng generate component edit-employee -m app

Replace the content of the newly created file with the following:


import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { Employee } from '../employee';
import { EmployeeService } from '../employee.service';
 selector: 'app-edit-employee.component.ts',
 template: `
   <h2 class="text-center m-5">Edit an Employee</h2>
   <app-employee-form [initialState]="employee" (formSubmitted)="editEmployee($event)"></app-employee-form>
export class EditEmployeeComponent implements OnInit {
 employee: BehaviorSubject<Employee> = new BehaviorSubject({});
   private router: Router,
   private route: ActivatedRoute,
   private employeeService: EmployeeService,
 ) { }
 ngOnInit() {
   const id = this.route.snapshot.paramMap.get('id');
   if (!id) {
     alert('No id provided');
   this.employeeService.getEmployee(id !).subscribe((employee) => {;
 editEmployee(employee: Employee) {
   this.employeeService.updateEmployee(this.employee.value._id || '', employee)
       next: () => {
       error: (error) => {
         alert('Failed to update employee');

The only notable difference from the AddEmployeeComponent is that we're getting the employee ID from the URL, fetching the employee from the API, and then passing it to the form in the ngOnInit() method.

Finally, let's add navigation to our new pages:


import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EmployeesListComponent } from './employees-list/employees-list.component';
import { AddEmployeeComponent } from './add-employee/add-employee.component'; // <-- add this line
import { EditEmployeeComponent } from './edit-employee/edit-employee.component'; // <-- add this line
const routes: Routes = [
 { path: '', redirectTo: 'employees', pathMatch: 'full' },
 { path: 'employees', component: EmployeesListComponent },
 { path: 'employees/new', component: AddEmployeeComponent }, // <-- add this line
 { path: 'employees/edit/:id', component: EditEmployeeComponent }]; // <-- add this line
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
export class AppRoutingModule { }

Alright! Let's test it out! Go ahead and try to create a new employee. After filling in the details, click the Submit button. You should see the new employee on the list. Then, you can try editing it by clicking the Edit button. You should see the form filled with the employee's details. When you submit the form, the employee will be updated in the table. Finally, you can delete it by clicking the Delete button.


gif of angular app demonstration

If something doesn't add up, you can check out the finished project in the mean-stack-example repository.


Thank you for joining me on this journey and following along! I hope you enjoyed it and learned a lot. The MEAN stack makes it easy to get started and to build scalable applications. You're using the same language throughout the stack: JavaScript. Additionally, MongoDB's document model makes it natural to map data to objects and MongoDB Atlas's forever-free cluster makes it easy to host your data without worrying about costs.

#angular #mongodb #express #javascript #node #webdev 

What is GEEK

Buddha Community

MEAN Stack Tutorial | Create a Full Stack MEAN App from Scratch
Hertha  Mayer

Hertha Mayer


Authentication In MEAN Stack - A Quick Guide

I consider myself an active StackOverflow user, despite my activity tends to vary depending on my daily workload. I enjoy answering questions with angular tag and I always try to create some working example to prove correctness of my answers.

To create angular demo I usually use either plunker or stackblitz or even jsfiddle. I like all of them but when I run into some errors I want to have a little bit more usable tool to undestand what’s going on.

Many people who ask questions on stackoverflow don’t want to isolate the problem and prepare minimal reproduction so they usually post all code to their questions on SO. They also tend to be not accurate and make a lot of mistakes in template syntax. To not waste a lot of time investigating where the error comes from I tried to create a tool that will help me to quickly find what causes the problem.

Angular demo runner
Online angular editor for building demo.

Let me show what I mean…

Template parser errors#

There are template parser errors that can be easy catched by stackblitz

It gives me some information but I want the error to be highlighted

#mean stack #angular 6 passport authentication #authentication in mean stack #full stack authentication #mean stack example application #mean stack login and registration angular 8 #mean stack login and registration angular 9 #mean stack tutorial #mean stack tutorial 2019 #passport.js

Easter  Deckow

Easter Deckow


PyTumblr: A Python Tumblr API v2 Client



Install via pip:

$ pip install pytumblr

Install from source:

$ git clone
$ cd pytumblr
$ python install


Create a client

A pytumblr.TumblrRestClient is the object you'll make all of your calls to the Tumblr API through. Creating one is this easy:

client = pytumblr.TumblrRestClient(
) # Grabs the current user information

Two easy ways to get your credentials to are:

  1. The built-in tool (if you already have a consumer key & secret)
  2. The Tumblr API console at
  3. Get sample login code at

Supported Methods

User Methods # get information about the authenticating user
client.dashboard() # get the dashboard for the authenticating user
client.likes() # get the likes for the authenticating user
client.following() # get the blogs followed by the authenticating user

client.follow('') # follow a blog
client.unfollow('') # unfollow a blog, reblogkey) # like a post
client.unlike(id, reblogkey) # unlike a post

Blog Methods

client.blog_info(blogName) # get information about a blog
client.posts(blogName, **params) # get posts for a blog
client.avatar(blogName) # get the avatar for a blog
client.blog_likes(blogName) # get the likes on a blog
client.followers(blogName) # get the followers of a blog
client.blog_following(blogName) # get the publicly exposed blogs that [blogName] follows
client.queue(blogName) # get the queue for a given blog
client.submission(blogName) # get the submissions for a given blog

Post Methods

Creating posts

PyTumblr lets you create all of the various types that Tumblr supports. When using these types there are a few defaults that are able to be used with any post type.

The default supported types are described below.

  • state - a string, the state of the post. Supported types are published, draft, queue, private
  • tags - a list, a list of strings that you want tagged on the post. eg: ["testing", "magic", "1"]
  • tweet - a string, the string of the customized tweet you want. eg: "Man I love my mega awesome post!"
  • date - a string, the customized GMT that you want
  • format - a string, the format that your post is in. Support types are html or markdown
  • slug - a string, the slug for the url of the post you want

We'll show examples throughout of these default examples while showcasing all the specific post types.

Creating a photo post

Creating a photo post supports a bunch of different options plus the described default options * caption - a string, the user supplied caption * link - a string, the "click-through" url for the photo * source - a string, the url for the photo you want to use (use this or the data parameter) * data - a list or string, a list of filepaths or a single file path for multipart file upload

#Creates a photo post using a source URL
client.create_photo(blogName, state="published", tags=["testing", "ok"],

#Creates a photo post using a local filepath
client.create_photo(blogName, state="queue", tags=["testing", "ok"],
                    tweet="Woah this is an incredible sweet post [URL]",

#Creates a photoset post using several local filepaths
client.create_photo(blogName, state="draft", tags=["jb is cool"], format="markdown",
                    data=["/Users/johnb/path/to/my/image.jpg", "/Users/johnb/Pictures/kittens.jpg"],
                    caption="## Mega sweet kittens")

Creating a text post

Creating a text post supports the same options as default and just a two other parameters * title - a string, the optional title for the post. Supports markdown or html * body - a string, the body of the of the post. Supports markdown or html

#Creating a text post
client.create_text(blogName, state="published", slug="testing-text-posts", title="Testing", body="testing1 2 3 4")

Creating a quote post

Creating a quote post supports the same options as default and two other parameter * quote - a string, the full text of the qote. Supports markdown or html * source - a string, the cited source. HTML supported

#Creating a quote post
client.create_quote(blogName, state="queue", quote="I am the Walrus", source="Ringo")

Creating a link post

  • title - a string, the title of post that you want. Supports HTML entities.
  • url - a string, the url that you want to create a link post for.
  • description - a string, the desciption of the link that you have
#Create a link post
client.create_link(blogName, title="I like to search things, you should too.", url="",
                   description="Search is pretty cool when a duck does it.")

Creating a chat post

Creating a chat post supports the same options as default and two other parameters * title - a string, the title of the chat post * conversation - a string, the text of the conversation/chat, with diablog labels (no html)

#Create a chat post
chat = """John: Testing can be fun!
Renee: Testing is tedious and so are you.
John: Aw.
client.create_chat(blogName, title="Renee just doesn't understand.", conversation=chat, tags=["renee", "testing"])

Creating an audio post

Creating an audio post allows for all default options and a has 3 other parameters. The only thing to keep in mind while dealing with audio posts is to make sure that you use the external_url parameter or data. You cannot use both at the same time. * caption - a string, the caption for your post * external_url - a string, the url of the site that hosts the audio file * data - a string, the filepath of the audio file you want to upload to Tumblr

#Creating an audio file
client.create_audio(blogName, caption="Rock out.", data="/Users/johnb/Music/my/new/sweet/album.mp3")

#lets use soundcloud!
client.create_audio(blogName, caption="Mega rock out.", external_url="")

Creating a video post

Creating a video post allows for all default options and has three other options. Like the other post types, it has some restrictions. You cannot use the embed and data parameters at the same time. * caption - a string, the caption for your post * embed - a string, the HTML embed code for the video * data - a string, the path of the file you want to upload

#Creating an upload from YouTube
client.create_video(blogName, caption="Jon Snow. Mega ridiculous sword.",

#Creating a video post from local file
client.create_video(blogName, caption="testing", data="/Users/johnb/testing/ok/")

Editing a post

Updating a post requires you knowing what type a post you're updating. You'll be able to supply to the post any of the options given above for updates.

client.edit_post(blogName, id=post_id, type="text", title="Updated")
client.edit_post(blogName, id=post_id, type="photo", data="/Users/johnb/mega/awesome.jpg")

Reblogging a Post

Reblogging a post just requires knowing the post id and the reblog key, which is supplied in the JSON of any post object.

client.reblog(blogName, id=125356, reblog_key="reblog_key")

Deleting a post

Deleting just requires that you own the post and have the post id

client.delete_post(blogName, 123456) # Deletes your post :(

A note on tags: When passing tags, as params, please pass them as a list (not a comma-separated string):

client.create_text(blogName, tags=['hello', 'world'], ...)

Getting notes for a post

In order to get the notes for a post, you need to have the post id and the blog that it is on.

data = client.notes(blogName, id='123456')

The results include a timestamp you can use to make future calls.

data = client.notes(blogName, id='123456', before_timestamp=data["_links"]["next"]["query_params"]["before_timestamp"])

Tagged Methods

# get posts with a given tag
client.tagged(tag, **params)

Using the interactive console

This client comes with a nice interactive console to run you through the OAuth process, grab your tokens (and store them for future use).

You'll need pyyaml installed to run it, but then it's just:

$ python

and away you go! Tokens are stored in ~/.tumblr and are also shared by other Tumblr API clients like the Ruby client.

Running tests

The tests (and coverage reports) are run with nose, like this:

python test

Author: tumblr
Source Code:
License: Apache-2.0 license

#python #api 

Aria Barnes

Aria Barnes


Is Full-Stack Developer A Vaccine For Startups?

There's a wise old saying: "Working with a full stack developer can lead to better technology solutions." And in recent years, this saying has proven to be true for many startups.

In the last few years, we have heard a lot about full-stack developers.

We know that a full-stack developer is a person who has complete knowledge of the different layers involved in application development. Whether you are dealing with the front or back end or working in the business layer, they take care of everything with ease.

But did you wonder why a full-stack developer is so important for a startup? 

This blog will answer all such queries. So let's get started.

The Demand for Full-Stack Developers

As per a development report published recently, it was seen that there had been a 206% increase in demand for full-stack developers from 2018 to 2020. This is because more companies seek multifaceted skills. 

Full-stack developers or a full-stack development company are able to take care of all the development needs of your project. So whether it's front-end or back-end development or enterprise layer development, they are competent to work on everything. You can always hire full-stack developers for your business needs.

What can a Full-Stack Developer Do?

In terms of software development, there are front-end developers and back-end developers. Front-end developers create the interface, while backend developers design the software. 

A full-stack developer can do everything. They take care of application design, server-side scripting, client-side coding, coding, administration, database creation, and any other project development needs.

The following are the responsibilities of a full stack developer that you hire:

  • Manage web development

  • Code applications and programs

  • Solve problems

  • Coordinate with other team members and developers

  • Think about testing techniques for web applications

In short, a full-stack developer has a strong understanding of the technologies that determine how a website looks, functions, and functions. The said developer must have a working knowledge of HTML, JavaScript, CSS, PHP, Angular, Ruby, MySQL, Node, MongoDB, Apache, etc. The knowledge to work with animations and design will add a bonus point to a candidate's portfolio.

Over time, the skills required for full-stack development have expanded and evolved. Long ago, the LAMP stack included Linux, Apache, MySQL, and PHP. It is more than MEAN and beyond today. 

Currently, a typical mean stack development service provides developers who can perform front-end development using JavaScript, HTML, CSS, and other JS frameworks; for the backend, they use Express and Node, and for databases, they follow MySQL and MongoDB.

Top Reasons to Hire Full-Stack Developers

  • Effective troubleshooting

When hiring a full-stack developer, companies are always looking for candidates who are capable of solving a problem. Full-stack developers are competent to handle all aspects of the project. They prove to be a practical solution for startups that are not willing to spend more money on many developers.

  • Wide range of technology skills

The main reason companies choose full-stack developers for their projects is their potential rather than their knowledge. Over time, companies teach them the skills they want them to have. In this way, in a few years, they learn different technological skills as the company expands.

  • Executive and management skills

Companies like to have people with business experience on board. A full-stack developer has the knowledge and expertise to work on the front-end, backend, and media architecture layers. This means that they are capable of performing better than an individual front-end or backend developer.

  • Economic

As full-stack developers can develop all aspects of a project, it is not necessary to form a team of experts. They will easily handle the project without help from anyone. This will save the right amount of money for the recruiting team.

  • Faster development process

Full-stack developers know different technologies, tools, and techniques. This means that when they take the project, they will be able to complete it faster. They will spend less time discussing and collaborating with the team on the project.

Benefits of Full-Stack Developers for Startups and Small Businesses

  • Established developers

Full-stack developers have enough experience to create outstanding features for the final product, which will be able to excite the market. They have the ability to build a complete product from scratch. If you want to gain some benefits from your product, you will have to collaborate with these experts. Remember that not all developers are capable of handling the project from a 360-degree perspective.

  • Versatility

A full-stack developer is able to work equally well on the front-end and the backend of a website or application. Front-end developers write code using JavaScript, HTML, and CSS, which are able to control the appearance of the solution and how it interacts with the browser and users. Backend developers write code that connects the website or application with other content management systems. A full-stack developer is capable of handling both tasks. They are focused on meeting customer expectations and finding solutions on their own.


  • Vast experience

Full-stack developers take on different web projects. This has helped them gain in-depth knowledge of various technologies and the experience to find quick solutions in web and application development. Such understanding and knowledge improve the performance of the project and its reception in the market.

  • The largest photograph

The main advantage of choosing a full-stack developer for your project is that they will come up with the complete structure of the project and offer their valuable input to the project as needed. Their services go beyond project development to maintain and optimize existing solutions.

  • Upgrades

Web design plays a crucial role in whether most people love or reject a website. Full-stack developers will make sure that the website is pretty user-friendly. They keep up with trends and technological innovations. To make sure their clients get the best interactive and responsive website, the developers implement intelligent features in their projects.

  • Troubleshooting issues

Full-stack developers have complete knowledge and experience of the different stages and aspects of website development. They are skilled enough to identify problems that may arise during the development of the project. They will propose long-term solutions to ensure that the website or application works optimally based on their findings.

  • All-inclusive

In addition to leading your web project and enabling enhancements to it, full-stack developers move to the level of representing your product to stakeholders or your company at conferences. They can move quickly from one operation to another with ease, streamlining the development process.

  • Economic

If you are on a tight budget but want to create a fantastic website, then you should consider hiring full developers for the job. You can even think about having a remote full-stack developer for the project. As such, a developer is capable of handling all aspects of project development; you won't have to hire different people for the job. This will save you a lot of money.

  • Delivery time

It will be easy for developers to share responsibilities among the team and coordinate with each other for better project progress. This will result in faster delivery of the project.

  • Project ownership

When you hire full-stack developers for your project, you can be sure that they will take care of everything. Such a developer will be able to develop MVP from start to finish. If you hire a full-stack developer in the middle of the project, even then, you'll find a way to join the flow seamlessly. Such a developer will work towards quality control of the design project.



Summing Up

So these were the advantages of hiring a full-stack developer. I hope you have noted the changes that a full-stack developer can bring to the table and in your company. However, working with a full-stack developer is the best way to work with a top full-stack development company in India.

It is a good idea that full-stack development companies bring to your projects are phenomenal and groundbreaking due to the expertise and experience that full-stack development companies bring to your projects.

If you have any other queries or suggestions, feel free to comment below.

Original source

#full stack developers #hire full stack developers #full stack development #mean stack development service #hire full stack developer india #hire full stack developer

Harry Patel

Harry Patel


A Complete Process to Create an App in 2021

It’s 2021, everything is getting replaced by a technologically emerged ecosystem, and mobile apps are one of the best examples to convey this message.

Though bypassing times, the development structure of mobile app has also been changed, but if you still follow the same process to create a mobile app for your business, then you are losing a ton of opportunities by not giving top-notch mobile experience to your users, which your competitors are doing.

You are about to lose potential existing customers you have, so what’s the ideal solution to build a successful mobile app in 2021?

This article will discuss how to build a mobile app in 2021 to help out many small businesses, startups & entrepreneurs by simplifying the mobile app development process for their business.

The first thing is to EVALUATE your mobile app IDEA means how your mobile app will change your target audience’s life and why your mobile app only can be the solution to their problem.

Now you have proposed a solution to a specific audience group, now start to think about the mobile app functionalities, the features would be in it, and simple to understand user interface with impressive UI designs.

From designing to development, everything is covered at this point; now, focus on a prelaunch marketing plan to create hype for your mobile app’s targeted audience, which will help you score initial downloads.

Boom, you are about to cross a particular download to generate a specific revenue through your mobile app.

#create an app in 2021 #process to create an app in 2021 #a complete process to create an app in 2021 #complete process to create an app in 2021 #process to create an app #complete process to create an app

Ananya Gupta

Ananya Gupta


What Is MEAN STACK and Scope of MEAN STACK Developer ?

What is MEAN Stack Developer?
MEAN Stack Developer is a programmer who operates on the MEAN stack. He works on the backend plus the front end of the application. They are all JavaScript based and therefore a MEAN developer should have excellent JS knowledge, for which you can join MEAN Stack Online Training Program.

Skillets of MEAN Stack developer
• Knowledge of working on the Front-end and Back-end processes
• Work with HTML & CSS
• Understanding of programming templates and architecture design guidelines
• Knowledge of continuous integration, web development, and cloud technologies
• Excellent understanding of DB architecture
• Knowledge of SDLC and experience developing in an Agile environment
• Collaborate with the IT team to build robust systems to support business objectives
• Hands-on experience on Mongo, Angular, Express, Node.
Future of MEAN stack Developer

Being, a Mean stack developer is a highly desirable, challenging vocation. So, if you are ready to work on the diverse skill set and have the experience of working with various code languages and application, then you will become successful MEAN stack developer.

Scope of MEAN stack developer

MEAN Stack Development is the best career prospect today with unlimited growth and scope. The national Indian median salary was around 76K $ pa according to All you need to do is get cracking on your skill set by joining MEAN Stack course in Delhi, earn your certification and through your job experience and continued experiential learning keep pace with newer iterations in technology.
Developers are available in various process streams like Backend, Frontend, Database, Testing, and Mobile Apps. Older practices were that as you gain experience and expertise you would pursue specialization and progress your career in that direction.
How Can I Start Learning Mean Stack Course Step By Step? Modern best practices have changed the trend.
Skill upgrades and building proficiency in:
• JavaScript
• Ruby, PHP, or Python which are all-purpose languages.
• Postgres, Oracle, or MySQL, relational-database systems.
• Any web-server which includes Nginx or Apache
• FreeBSD, Ubuntu, or CentOS deployment OS.
• Any system for instance GIT for version-control

By mastering one software technology required for every stack-part you will be in a position to create your own software and use it to add business value at your job.

#mean stack #mean stack training #mean stack certification online #mean stack online course #mean stack online training