How to build a CRUD App with Python, Flask, and Angular?

#python #flask #angular

What is GEEK

Buddha Community

Dylan Iqbal


You will learn how to build a CRUD App with Python, Flask, and Angular

Developers all have their favorite GitHub repositories. They have software projects that they love and watch closely for the latest changes. In this tutorial, you’ll create a simple CRUD application to save and to display your favorite Github open source projects. You will use Angular to implement the user interface features and Python for the backend.

These days it is not uncommon to have an API that is responsible not only for persisting data to the database, but also dealing with business requirements like permissions, data flow, data visibility, and so on. Python is a natural choice for the API because of its simplicity and power. For the same reasons, Angular is a great choice on the client side. Angular’s use of TypeScript makes it easy to get started with and still powerful enough to handle your most advanced scenarios.

Let’s dig in!

To complete this tutorial, there are a few things you will need:

  • Python 3 installed
  • MongoDB up and running
  • A free-forever Okta account

You will start by creating the backend in Python.

Set Up Your Python + Angular Environment

For this tutorial, you’re going to use Python 3.6.4. You can check your current Python version by running the following command:

python --version

If needed, use pyenv to install Python 3.6.

If you’re using macOS, install pyenv by running the following command:

brew update && brew install pyenv

On a Linux system use the bash shell:

curl -L | bash

Once installed, you can run the following commands to install Python 3.

pyenv install 3.6.4
pyenv global 3.6.4

Ensure you are using the correct Python version by adding the pyenv shims path to your $PATH.

export PATH="$(pyenv root)/shims:$PATH"

Even though Python offers a rich standard library making it possible to develop the backend without third-party libraries, we’re going to use well-known Python libraries to help you focus on the features requirements instead of spending time reinventing the wheel.

You will use pipenv to manage the project’s dependencies.

pip install --user pipenv

Your environment is prepared to run Python code, and you are now ready to work on the backend.

Bootstrap Your Angular App’s Python API

Create a directory in which your code will sit, by running the following command:

mkdir favorite_github_projects && cd favorite_github_projects

Pipenv can create a virtual environment for your project this way you can isolate the project’s dependencies. You can create a virtual environment by running the following command:

pipenv --three --python=$(pyenv root)/shims/python

Notice that a file called Pipfile was created and it should look like this:

name = "pypi"
url = ""
verify_ssl = true



python_version = "3.6"

Pipfile will be used as a manifest of the project’s dependencies.

You’ll use absolute_import and print_function packages introduced in Python 3. To import them run the following commands:


And copy and paste the following content into the file:

from __future__ import absolute_import, print_function

In the next section you will implement the endpoints needed to list, favorite, and unfavorite a GitHub project.

Create Your Angular Client’s API in Python

Your API should be capable of listing all favorited GitHub repositories for a given user. It should also be able to favorite and unfavorite a GitHub repository. You are going to expose the following endpoints:

# For the authenticated user fetches all favorited GitHub projects
GET /kudos

# Favorite a GitHub project for the authenticated user
POST /kudos

# Unfavorite a favorited GitHub project
DELETE /kudos/:id

Favoriting a GitHub project basically means a client makes HTTP POST calls to your Python server, which has some expectation of the calls: The request body or payload must be JSON The payload should have four properties, the GitHub project id, full_name , description, and html_url. Only the GitHub project id is a required property. Which means, for any POST /kudos where the id is not given the server must reject the call All requests must be authenticated

Your Python backend will have to represent two data schemas, one being the incoming request payload and the other, the document your server will persist on the database. They will be called GithubRepoSchema and KudoSchema respectively.

The client will send a payload like the one below when favoriting a GitHub project:

  "description": "okta-oidc-js",
  "full_name": "okta/okta-oidc-js",
  "html_url": "",
  "id": 97974659

Start by creating the necessary files, running the following commands:

mkdir -p app/kudo
touch app/kudo/
touch app/kudo/
touch app/kudo/

The commands you’ve just run created the app directory as well as another directory within it called kudo which now has three files:,, and

The schema will have two responsibilities: represent the data and serve as reference to validate incoming request payload. There’s a very useful package called [marshmallow] (, which is an ORM/ODM/framework-agnostic library for serializing/deserializing complex data types, such as objects, to and from native Python data types.

Install marshmallow by running the following command:

pipenv install marshmallow==2.16.3

Then, Copy and paste the following classes into the

from marshmallow import Schema, fields

class GithubRepoSchema(Schema):
  id = fields.Int(required=True)
  repo_name = fields.Str()
  full_name = fields.Str()
  description = fields.Str()

class KudoSchema(GithubRepoSchema):
  user_id = fields.Email(required=True)

Since what your application requires to display the user’s favorited GitHub projects, in other words, what it has to persist in the database is pretty much similar to the incoming request payload, all you had to do for KudoSchema was make it inherits from GithubRepoSchema and specialized it by adding a new required field user_id which will be used to filter the data in the database by user.

Persist Your Python REST API with MongoDB

With the data representation implemented, your next step is to prepare your application to persist data in MongoDB. To connect and to run queries against the database, you are going to use a library created and maintained by MongoDB itself called pymongo.

The pymongo library can be installed by running the following commands:

pipenv install pymongo==3.7.2

Start by creating the MongoRepository class. It is always a good idea to have a class with just a single responsibility, so the only point in your backend application MongoDB is going to explicitly deal with is in the MongoRepository.

Start by creating a directory where all persistence-related files should sit, a suggestion would be: repository.

mkdir -p app/repository

Then, create the file for MongoRepository class:

touch app/repository/
touch app/repository/

Now paste the following content into the app/repository/ file.

import os
from pymongo import MongoClient


class MongoRepository(object):
 def __init__(self):
   mongo_url = os.environ.get('MONGO_URL')
   self.db = MongoClient(mongo_url).kudos

 def find_all(self, selector):
   return self.db.kudos.find(selector)

 def find(self, selector):
   return self.db.kudos.find_one(selector)

 def create(self, kudo):
   return self.db.kudos.insert_one(kudo)

 def update(self, selector, kudo):
   return self.db.kudos.replace_one(selector, kudo).modified_count

 def delete(self, selector):
   return self.db.kudos.delete_one(selector).deleted_count

As you can see, the MongoRepository class is quite simple, it creates a database connection on its initialization then saves it to an instance variable to be used later by the methods: find_all, find, create, update, and delete. Notice that all methods explicitly use the pymongo API.

For the sake of simplicity MongoRepository is reading environment variable MONGO_URL to obtain the MongoDB string connection. Feel free to change it with a hard-coded string or even better you could use python-dotenv to keep all your environment variables in one place.

Since you might want to use other databases in the future, it is a good idea to decouple your application from MongoDB. SOLID principles tell us that is better to rely on abstract classes instead of concrete classes.

Go ahead and create a repository abstraction. Paste the following content into the app/repository/ file:

class Repository(object):
 def __init__(self, adapter=None):
   if not adapter:
     raise ValueError("Invalid repository implementation")
   self.client = adapter()

 def find_all(self, selector):
   return self.client.find_all(selector)

 def find(self, selector):
   return self.client.find(selector)

 def create(self, kudo):
   return self.client.create(kudo)

 def update(self, selector, kudo):
   return self.client.update(selector, kudo)

 def delete(self, selector):
   return self.client.delete(selector)

Great! You now have an abstract class to represent a generic repository and a concrete class that fulfills the abstract class contract.

You will soon implement the endpoints of your REST API. To keep your endpoints clean and only responsible for dispatching requests and outputting data, you will use the service pattern and create a class to validate the incoming requests, and to deal with the database persisting and fetching data from it.

Paste the content below to the app/kudo/ file:

from ..repository import Repository
from ..repository.mongo import MongoRepository
from .schema import KudoSchema

class Service(object):
 def __init__(self, user_id, repo_client=Repository(adapter=MongoRepository)):
   self.repo_client = repo_client
   self.user_id = user_id

   if not user_id:
     raise Exception("user id not provided")

 def find_all_kudos(self):
   kudos  = self.repo_client.find_all({'user_id': self.user_id})
   return [self.dump(kudo) for kudo in kudos]

 def find_kudo(self, repo_id):
   kudo = self.repo_client.find({'user_id': self.user_id, 'repo_id': repo_id})
   return self.dump(kudo)

 def create_kudo_for(self, githubRepo):
   return self.dump(

 def update_kudo_with(self, repo_id, githubRepo):
   records_affected = self.repo_client.update({'user_id': self.user_id, 'repo_id': repo_id}, self.prepare_kudo(githubRepo))
   return records_affected > 0

 def delete_kudo_for(self, repo_id):
   records_affected = self.repo_client.delete({'user_id': self.user_id, 'repo_id': repo_id})
   return records_affected > 0

 def dump(self, data):
   return KudoSchema(exclude=['_id']).dump(data).data

 def prepare_kudo(self, githubRepo):
   data =
   data['user_id'] = self.user_id
   return data

There are two things to notice here, first, all operations causing side effects are using the user_id. This is because you want to make sure that actions like favoriting, unfavoriting, or listing the GitHub projects are done for the correct user. The last is the service object is not interacting directly with the MongoRepository class it is “adapting” the Repository abstract class with the concrete class MongoRepository, which will be used to persist data to MongoDB.

Define Your Python API Middleware

The requests made to your REST API use JSON Web Token (JWT) to let the backend know the request is authorized. How does it work?

  1. On the front-end, the user signs in using her/his Okta’s account
  2. The client then will be granted with a JSON Web Token
  3. JSON Web Token should be sent in every request to the server as a value for the HTTP Authorization Header
  4. The server then will verify whether the JSON Web Token is valid or not halting the request with a 401 HTTP Status when the credentials/JWT are invalid.

The JWT validation will be implemented in a Middleware. You will need to install flask and pyjwt to perform the JWT validation and to store the user in the session.

To install them run the following commands:

pipenv install pyjwt==1.7.1
pipenv install flask==1.0.2

Then, go ahead and create the necessary files:

touch app/http/api/
touch app/http/api/
touch app/http/api/

Here’s how your JWT middleware should look:

from functools import wraps
from flask import request, g, abort
from jwt import decode, exceptions
import json

def login_required(f):
   def wrap(*args, **kwargs):
       authorization = request.headers.get("authorization", None)
       if not authorization:
           return json.dumps({'error': 'no authorization token provied'}), 401, {'Content-type': 'application/json'}

           token = authorization.split(' ')[1]
           resp = decode(token, None, verify=False, algorithms=['HS256'])
           g.user = resp['sub']
       except exceptions.DecodeError as identifier:
           return json.dumps({'error': 'invalid authorization token'}), 401, {'Content-type': 'application/json'}

       return f(*args, **kwargs)

   return wrap

If you’re happy with the code above, paste it into the file.

You are using a module called g provided by Flask, which is a global context shared across the request life cycle. The middleware is checking whether or not the request is valid and if it is valid, the middleware will extract the authenticated user details and persist them in the global context.

Define Your Python API Endpoints

Your end goal is to implement a web application using Angular, which will run on browsers like Chrome and Firefox and will use AJAX to communicate with the REST API. Your first concern in this scenario is to make sure your backend supports browser’s Cross-Origin Resource Sharing (CORS) Preflight requests. It’s not in the scope of this tutorial to go through on how CORS works, so we’ll use a Python library to handle it for you.

pipenv install flask_cors==3.0.7

The HTTP handlers should be easy now since you have already done the important pieces of the backend, it’s just a matter of putting everything together. Go ahead and paste the content below into the app/http/api/ file

from .middlewares import login_required
from flask import Flask, json, g, request
from app.kudo.service import Service as Kudo
from app.kudo.schema import GithubRepoSchema
from flask_cors import CORS

app = Flask(__name__)

@app.route("/kudos", methods=["GET"])
def index():
 return json_response(Kudo(g.user).find_all_kudos())

@app.route("/kudos", methods=["POST"])
def create():
   github_repo = GithubRepoSchema().load(json.loads(

   if github_repo.errors:
     return json_response({'error': github_repo.errors}, 422)

   kudo = Kudo(g.user).create_kudo_for(github_repo)
   return json_response(kudo)

@app.route("/kudo/<int:repo_id>", methods=["DELETE"])
def delete(repo_id):
 kudo_service = Kudo(g.user)
 if kudo_service.delete_kudo_for(repo_id):
   return json_response({})
   return json_response({'error': 'kudo not found'}, 404)

def json_response(payload, status=200):
 return (json.dumps(payload), status, {'content-type': 'application/json'})

You have created three endpoints, all of them are being decorated with login_required with makes sure the request is authorized before going any further.

You should be able to run the REST API with the command below:

FLASK_APP=$PWD/app/http/api/ FLASK_ENV=development pipenv run python -m flask run --port 4433

Create Your Angular App

To create your Angular Client-Side App, you will use Angular’s awesome [ng-cli]( "ng-cli") tool to bypass all the JavaScript build process hassle.

Installing [ng-cli]( "ng-cli") is quite simple. You’ll use [npm]( "npm"), make sure you either have it installed or use the dependency manager of your preference.

To install ng-cli, run the command above. For more install options check this Angular quickstart out.

npm install -g @angular/cli@7.3.5

Navigate to the app/http directory and use ng-cli to create an Angular application:

cd app/http
ng new web-app

Angular CLI will prompt you with two questions before creating all the files you need to start coding your front-end application. The first question is whether you want routing or not, you can type y to let the Angular CLI set up your application with routing enabled. The second question is which CSS flavor you will want, and you’ll pick SCSS.

Once Angular CLI finishes creating the files, you can now navigate to the newly created directory and spin up a web server.

cd web-app
ng serve --open --port 8080

Running ng server --open will start a web server listening to the port 8080. Open this URL in your browser: [http://localhost:8080/](http://localhost:8080/ "http://localhost:8080/") Your browser should load an Angular app and render the AppComponent created automatically by ng-cli.

Your goal now is to use Material Design to create a simple and beautiful UI. Thankfully, Angular has a mature library to help you in this journey, Angular Material has translated Material Design concepts into Angular components.

Run the following command to install what you will need:

npm install --save @angular/material@7.3.5 @angular/cdk@7.3.5 @angular/animations@7.2.10

Now configure your project to use it:

ng add @angular/material

And the last step, remove all content in the src/app/app.component.html and paste the following content in:


Now you have components like MatToolbarModule, MatButtonModule, MatIconModule, MatCardModule, MatTabsModule, MatGridListModule and many more ready to be imported and used. You will use them soon. Let’s talk about protected routes.

Add Authentication to Your Angular App

Writing secure user authentication and building login pages is easy to get wrong and can be the downfall of a new project. Okta makes it simple to implement all the user management functionality quickly and securely. Get started by signing up for a free developer account and creating an OpenID Connect application in Okta.

Once logged in, create a new application by clicking Add Application.

Select the Single-Page App platform option.

The default application settings should be the same as those pictured.

With your token OpenID Connect application in place, you can now move forward and secure the routes that require authentication.

Create Your Routes in Angular

You’ll use @angular/router, a library for routing URLs to Angular components.

Your Angular application will have two routes:

/ The root route does not require the user to be logged in, it actually is the landing page of your application. An user should be able to access this page in order to log in. You will use Okta Angular SDK to integrate your routes with Okta’s OpenID Connect API.

/home The Home route will render most of the components your application will have. It should implement the following user stories.

  • Python 3 installed
  • MongoDB up and running
  • A free-forever Okta account

To install [@okta/okta-angular]( "@okta/okta-angular") run the command:

npm install --save @okta/okta-angular

Now go ahead and paste the following content into the src/app/app-routing.module.ts file.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';

import { OktaAuthModule, OktaCallbackComponent, OktaAuthGuard } from '@okta/okta-angular';

const routes: Routes = [
 { path: '', component: LoginComponent },
   path: 'home',
   component: HomeComponent,
   canActivate: [OktaAuthGuard],
 { path: 'implicit/callback', component: OktaCallbackComponent },

 imports: [
     issuer: {yourOktaDomain},
     clientId: {yourClientId},
     redirectUri: 'http://localhost:8080/implicit/callback',
     scope: 'openid profile email'
 exports: [RouterModule]
export class AppRoutingModule { }

For the moment, don’t worry about the Login and Home components being imported. You will work on them soon. Focus on the OktaAuthModule, OktaCallbackComponent, and OktaAuthGuard components.

To guard a route with authentication anywhere in the application, you need to configure the route with canActivate: [OktaAuthGuard] component provided by Okta.

The OktaCallbackComponent is the route/URI destination to which the user will be redirected after Okta finishes the sign-in process, whereas OktaAuthModule will inject a service which exposes useful methods to access the authenticated user.

Add the Login Angular Component

You are now ready to create the Login component. This component will be accessible to all users (not only authenticated users). The main goal of the Login component is to authenticate the user.

Angular CLI has a useful generator to speed up component creation. Within the directory app/htpp/web-app, run the command below:

ng generate component login

The ng generate component will not just create the component files, it will also configure your Angular application to properly inject the newly created component.

Go ahead and paste the following content into the src/app/login/login.component.ts file:

import { Component, OnInit } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';
import { Router } from '@angular/router';

  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
export class LoginComponent implements OnInit {

  constructor(private oktaAuth: OktaAuthService, private router: Router) {

  async ngOnInit() {
    const isAuthenticated = await this.oktaAuth.isAuthenticated();
    if (isAuthenticated) {
      this.router.navigate(['/home'], {replaceUrl: true})

  async login(event) {
    await this.oktaAuth.loginRedirect('/home');

Then paste the following content into the src/app/login/login.component.html file:

    <button mat-button (click)="login($event)" color="primary">Login</button>

Here’s how the login process will work:

The user navigates to the landing page.

In the Login component you are using the Okta Angular SDK to check whether the user has already signed in or not. If the user has already signed in, they should be redirected to the /home route otherwise, he or she could click Login to then be redirected to Okta, authenticate, and be redirected to the home page.

You will work on the Home component soon. After the sign in process finishes you should see:

Add Your Angular Home Component

Home is the main component of your application. It needs to list all favorited open source projects as well as the GitHub search results, which is done using Tabs.

Here’s how it works:

When the Home component is rendered, you should make an HTTP call to your Python REST API to get all the user’s favorite open-source repositories. @angular/core provides a module OnInit that a component can implement in order to have the ngOnInit method fired whenever the component is rendered. You will use ngOnInit to make the HTTP call to your Python REST API.

Users can type keywords into the text input on the top of the screen. The method onSearch will be called on the keyPress event of the input. Whenever the user types Return/Enter the method will perform a query against GitHub API.

Once GitHub responds with the list of open-source repositories, you are going to render all the repositories in the “SEARCH” tab. Then the user can favorite any of the repositories. Favoriting a repository will make an HTTP call to your REST API, persisting it to the database.

The Home component also takes care of logging the user out when the user clicks Logout. When this happens, all data related to the session will be wiped out and the user will be redirected to the landing page.

/home is an authenticated route, So if the user tries to access it without authenticating first they should be redirected to Okta’s login page.

ng generate component home

Paste the following content into the src/app/home/home.component.ts.

import { Component, OnInit } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';
import { GithubClientService } from '../gb-client.service';
import { ApiClientService } from '../api-client.service';

 selector: 'app-home',
 templateUrl: './home.component.html',
 styleUrls: ['./home.component.scss']
export class HomeComponent implements OnInit {

 selectedTab: Number;
 repos: Array<any>;
 kudos: Array<any>;

   private oktaAuth: OktaAuthService,
   private githubClient: GithubClientService,
   private apiClient: ApiClientService
 ) {
   this.selectedTab = 0;
   this.repos = [];
   this.kudos = [];

 async ngOnInit() {
   this.apiClient.getKudos().then( (kudos) => {
     this.kudos = kudos;
   } )

 async logout(event) {
   await this.oktaAuth.logout('/');

 onSearch = (event) => {
   const target =;
   if (!target.value || target.length < 3) { return; }
   if (event.which !== 13) { return; }

     .then((response) => {
       this.selectedTab = 1;
       this.repos = response.items;

 onKudo(event, repo) {

 updateState(repo) {
   if (this.isKudo(repo)) {
     this.kudos = this.kudos.filter( r => r['id'] !== );
   } else {
     this.kudos = [repo, ...this.kudos];

 isKudo(repo) {
   return this.kudos.find( r => r['id'] === );

 updateBackend = (repo) => {
   if (this.isKudo(repo)) {
   } else {

Then paste the following content into the src/app/home/home.component.html.

<mat-toolbar color="primary">
 <input matInput (keyup)="onSearch($event)" placeholder="Search for your OOS project on Github + Press Enter">
 <button mat-button (click)="logout($event)">LOGOUT</button>

<mat-tab-group mat-align-tabs="center" [selectedIndex]="selectedTab" dynamicHeight>
   <mat-tab label="KUDO">
     <mat-grid-list cols="4">
         <mat-grid-tile *ngFor="let repo of kudos" rowHeight='200px' >
             <mat-card class="card">
               <mat-card-header class="title">
                 <button mat-icon-button [color]="isKudo(repo) ? 'accent' : 'primary'" (click)="onKudo($event, repo)">
                   <mat-icon >favorite</mat-icon>
   <mat-tab label="SEARCH">
     <mat-grid-list cols="4">
         <mat-grid-tile *ngFor="let repo of repos" rowHeight='200px' >
             <mat-card class="card">
               <mat-card-header class="title">
                 <button mat-icon-button [color]="isKudo(repo) ? 'accent' : 'primary'" (click)="onKudo($event, repo)">
                   <mat-icon >favorite</mat-icon>

Call the Python API From Angular

Great! Now you will need to make HTTP calls to your Python REST API as well as to the GitHub REST API. The GitHub HTTP client will need to have a function to make a request to this URL: []( ""). You are going to use the q query string to pass the term the user wants to query against Github’s repositories.

Angular CLI offers a nice generator for services. To create a GitHub client, run the following command:

ng generate service gbClient

Then, paste the following content into the src/app/gb-client.service.ts file:

import { Injectable } from '@angular/core';

 providedIn: 'root'
export class GithubClientService {

 constructor() { }

 getJSONRepos(query) {
   return fetch('' + query).then(response => response.json());

 getJSONRepo(id) {
   return fetch('' + id).then(response => response.json());

Now, you need to create an HTTP client to make HTTP calls to the Python REST API you’ve already implemented. Since all the requests made to your Python REST API require the user to be authenticated, you will need to set the Authorization HTTP Header with the acessToken provided by Okta.

ng generate service apiClient

Then, paste the following content into the src/app/api-client.service.ts file.

import { Injectable } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';
import { HttpClient, HttpHeaders } from '@angular/common/http';

 providedIn: 'root'
export class ApiClientService {
 constructor(private oktaAuth: OktaAuthService, private http: HttpClient) {

 createKudo(repo) {
   return this.perform('post', '/kudos', repo);

 deleteKudo(repo) {
   return this.perform('delete', `/kudo/${}`);

 updateKudo(repo) {
   return this.perform('put', `/kudos/${}`, repo);

 getKudos() {
   return this.perform('get', '/kudos');

 getKudo(repo) {
   return this.perform('get', `/kudo/${}`);

 async perform (method, resource, data = {}) {
   const accessToken = await this.oktaAuth.getAccessToken();
   const url = `http://localhost:4433${resource}`;

   const httpOptions = {
     headers: new HttpHeaders({
       'Content-Type':  'application/json',
       'Authorization': `Bearer ${accessToken}`

   switch (method) {
     case 'delete':
       return this.http.delete(url, httpOptions).toPromise();
     case 'get':
       return this.http.get(url, httpOptions).toPromise();
       return this.http[method](url, data, httpOptions).toPromise();

Lastly, you will need to make sure your Angular application is properly importing all modules. In order to do so, make sure your src/app/app.module.ts file looks like this:

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import {
} from '@angular/material';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
 declarations: [
 imports: [
 providers: [],
 bootstrap: [AppComponent]
export class AppModule { }

Now you can run both the Angular frontend and Python backend together to see the final result:

To start the Python REST API run:

cd kudos_oss &&
FLASK_APP=$PWD/app/http/api/ FLASK_ENV=development pipenv run python -m flask run --port 4433

Then start the Angular application:

cd app/http/web-app && ng serve --open --port 8080

As you might have noticed, your Python REST API is listening to the port 4433 while the Angular application is being served by a process on port 8080. All you need to do is to open this URL [http://localhost:8080](http://localhost:8080 "http://localhost:8080") in your browser.

Learn More About Angular, Python, and Flask

Complete Python Bootcamp: Go from zero to hero in Python 3

Machine Learning A-Z™: Hands-On Python & R In Data Science

Angular 7 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

An A-Z of useful Python tricks

A Complete Machine Learning Project Walk-Through in Python

Learning Python: From Zero to Hero

Build a Basic CRUD App with Laravel and Angular

Build a CRUD App with Angular and Firebase

Build a Desktop Application with Angular and Electron

Angular Authentication Tutorial for Beginners

*Originally published at *

Top Python App Development Company in USA

AppClues Infotech is one of the leading Python app development company in USA. We are a one-stop solutions provider for mobile consulting, experience design, app development, IoT development, and cloud solutions for businesses varying in size from start-up to enterprise.

Our Python App Development Solutions
• Machine Learning Solutions
• Custom Python Development
• Python Mobile App Development
• Python CMS Development
• Python Up-gradation & Migration
• Django Framework Development

For more info:
Call: +1-978-309-9910

#python app development #top python app development company in usa #hire python app developers in usa #how to develop python mobile app #best python app development services #custom python app development

Top Enterprise Angular Web Apps Development Company in USA

AppClues Infotech is one of the leading Enterprise Angular Web Apps Development Company in USA. Our dedicated & highly experienced Angular app developers build top-grade Angular apps for your business with immersive technology & superior functionalities.

For more info:
Call: +1-978-309-9910

#top enterprise angular web apps development company in usa #enterprise angular web apps development #hire enterprise angular web apps developers #best enterprise angular web app services #custom enterprise angular web apps solution #professional enterprise angular web apps developers

Fredy  Larson

Fredy Larson


How long does it take to develop/build an app?

With more of us using smartphones, the popularity of mobile applications has exploded. In the digital era, the number of people looking for products and services online is growing rapidly. Smartphone owners look for mobile applications that give them quick access to companies’ products and services. As a result, mobile apps provide customers with a lot of benefits in just one device.

Likewise, companies use mobile apps to increase customer loyalty and improve their services. Mobile Developers are in high demand as companies use apps not only to create brand awareness but also to gather information. For that reason, mobile apps are used as tools to collect valuable data from customers to help companies improve their offer.

There are many types of mobile applications, each with its own advantages. For example, native apps perform better, while web apps don’t need to be customized for the platform or operating system (OS). Likewise, hybrid apps provide users with comfortable user experience. However, you may be wondering how long it takes to develop an app.

To give you an idea of how long the app development process takes, here’s a short guide.

App Idea & Research


_Average time spent: two to five weeks _

This is the initial stage and a crucial step in setting the project in the right direction. In this stage, you brainstorm ideas and select the best one. Apart from that, you’ll need to do some research to see if your idea is viable. Remember that coming up with an idea is easy; the hard part is to make it a reality.

All your ideas may seem viable, but you still have to run some tests to keep it as real as possible. For that reason, when Web Developers are building a web app, they analyze the available ideas to see which one is the best match for the targeted audience.

Targeting the right audience is crucial when you are developing an app. It saves time when shaping the app in the right direction as you have a clear set of objectives. Likewise, analyzing how the app affects the market is essential. During the research process, App Developers must gather information about potential competitors and threats. This helps the app owners develop strategies to tackle difficulties that come up after the launch.

The research process can take several weeks, but it determines how successful your app can be. For that reason, you must take your time to know all the weaknesses and strengths of the competitors, possible app strategies, and targeted audience.

The outcomes of this stage are app prototypes and the minimum feasible product.

#android app #frontend #ios app #minimum viable product (mvp) #mobile app development #web development #android app development #app development #app development for ios and android #app development process #ios and android app development #ios app development #stages in app development

Carmen  Grimes

Carmen Grimes


How to start an electric scooter facility/fleet in a university campus/IT park

Are you leading an organization that has a large campus, e.g., a large university? You are probably thinking of introducing an electric scooter/bicycle fleet on the campus, and why wouldn’t you?

Introducing micro-mobility in your campus with the help of such a fleet would help the people on the campus significantly. People would save money since they don’t need to use a car for a short distance. Your campus will see a drastic reduction in congestion, moreover, its carbon footprint will reduce.

Micro-mobility is relatively new though and you would need help. You would need to select an appropriate fleet of vehicles. The people on your campus would need to find electric scooters or electric bikes for commuting, and you need to provide a solution for this.

To be more specific, you need a short-term electric bike rental app. With such an app, you will be able to easily offer micro-mobility to the people on the campus. We at Devathon have built Autorent exactly for this.

What does Autorent do and how can it help you? How does it enable you to introduce micro-mobility on your campus? We explain these in this article, however, we will touch upon a few basics first.

Micro-mobility: What it is


You are probably thinking about micro-mobility relatively recently, aren’t you? A few relevant insights about it could help you to better appreciate its importance.

Micro-mobility is a new trend in transportation, and it uses vehicles that are considerably smaller than cars. Electric scooters (e-scooters) and electric bikes (e-bikes) are the most popular forms of micro-mobility, however, there are also e-unicycles and e-skateboards.

You might have already seen e-scooters, which are kick scooters that come with a motor. Thanks to its motor, an e-scooter can achieve a speed of up to 20 km/h. On the other hand, e-bikes are popular in China and Japan, and they come with a motor, and you can reach a speed of 40 km/h.

You obviously can’t use these vehicles for very long commutes, however, what if you need to travel a short distance? Even if you have a reasonable public transport facility in the city, it might not cover the route you need to take. Take the example of a large university campus. Such a campus is often at a considerable distance from the central business district of the city where it’s located. While public transport facilities may serve the central business district, they wouldn’t serve this large campus. Currently, many people drive their cars even for short distances.

As you know, that brings its own set of challenges. Vehicular traffic adds significantly to pollution, moreover, finding a parking spot can be hard in crowded urban districts.

Well, you can reduce your carbon footprint if you use an electric car. However, electric cars are still new, and many countries are still building the necessary infrastructure for them. Your large campus might not have the necessary infrastructure for them either. Presently, electric cars don’t represent a viable option in most geographies.

As a result, you need to buy and maintain a car even if your commute is short. In addition to dealing with parking problems, you need to spend significantly on your car.

All of these factors have combined to make people sit up and think seriously about cars. Many people are now seriously considering whether a car is really the best option even if they have to commute only a short distance.

This is where micro-mobility enters the picture. When you commute a short distance regularly, e-scooters or e-bikes are viable options. You limit your carbon footprints and you cut costs!

Businesses have seen this shift in thinking, and e-scooter companies like Lime and Bird have entered this field in a big way. They let you rent e-scooters by the minute. On the other hand, start-ups like Jump and Lyft have entered the e-bike market.

Think of your campus now! The people there might need to travel short distances within the campus, and e-scooters can really help them.

How micro-mobility can benefit you


What advantages can you get from micro-mobility? Let’s take a deeper look into this question.

Micro-mobility can offer several advantages to the people on your campus, e.g.:

  • Affordability: Shared e-scooters are cheaper than other mass transportation options. Remember that the people on your campus will use them on a shared basis, and they will pay for their short commutes only. Well, depending on your operating model, you might even let them use shared e-scooters or e-bikes for free!
  • Convenience: Users don’t need to worry about finding parking spots for shared e-scooters since these are small. They can easily travel from point A to point B on your campus with the help of these e-scooters.
  • Environmentally sustainable: Shared e-scooters reduce the carbon footprint, moreover, they decongest the roads. Statistics from the pilot programs in cities like Portland and Denver showimpressive gains around this key aspect.
  • Safety: This one’s obvious, isn’t it? When people on your campus use small e-scooters or e-bikes instead of cars, the problem of overspeeding will disappear. you will see fewer accidents.

#android app #autorent #ios app #mobile app development #app like bird #app like bounce #app like lime #autorent #bird scooter business model #bird scooter rental #bird scooter rental cost #bird scooter rental price #clone app like bird #clone app like bounce #clone app like lime #electric rental scooters #electric scooter company #electric scooter rental business #how do you start a moped #how to start a moped #how to start a scooter rental business #how to start an electric company #how to start electric scooterrental business #lime scooter business model #scooter franchise #scooter rental business #scooter rental business for sale #scooter rental business insurance #scooters franchise cost #white label app like bird #white label app like bounce #white label app like lime

Carmen  Grimes

Carmen Grimes


Best Electric Bikes and Scooters for Rental Business or Campus Facility

The electric scooter revolution has caught on super-fast taking many cities across the globe by storm. eScooters, a renovated version of old-school scooters now turned into electric vehicles are an environmentally friendly solution to current on-demand commute problems. They work on engines, like cars, enabling short traveling distances without hassle. The result is that these groundbreaking electric machines can now provide faster transport for less — cheaper than Uber and faster than Metro.

Since they are durable, fast, easy to operate and maintain, and are more convenient to park compared to four-wheelers, the eScooters trend has and continues to spike interest as a promising growth area. Several companies and universities are increasingly setting up shop to provide eScooter services realizing a would-be profitable business model and a ready customer base that is university students or residents in need of faster and cheap travel going about their business in school, town, and other surrounding areas.

Electric Scooters Trends and Statistics

In many countries including the U.S., Canada, Mexico, U.K., Germany, France, China, Japan, India, Brazil and Mexico and more, a growing number of eScooter users both locals and tourists can now be seen effortlessly passing lines of drivers stuck in the endless and unmoving traffic.

A recent report by McKinsey revealed that the E-Scooter industry will be worth― $200 billion to $300 billion in the United States, $100 billion to $150 billion in Europe, and $30 billion to $50 billion in China in 2030. The e-Scooter revenue model will also spike and is projected to rise by more than 20% amounting to approximately $5 billion.

And, with a necessity to move people away from high carbon prints, traffic and congestion issues brought about by car-centric transport systems in cities, more and more city planners are developing more bike/scooter lanes and adopting zero-emission plans. This is the force behind the booming electric scooter market and the numbers will only go higher and higher.

Companies that have taken advantage of the growing eScooter trend develop an appthat allows them to provide efficient eScooter services. Such an app enables them to be able to locate bike pick-up and drop points through fully integrated google maps.

List of Best Electric Bikes for Rental Business or Campus Facility 2020:

It’s clear that e scooters will increasingly become more common and the e-scooter business model will continue to grab the attention of manufacturers, investors, entrepreneurs. All this should go ahead with a quest to know what are some of the best electric bikes in the market especially for anyone who would want to get started in the electric bikes/scooters rental business.

We have done a comprehensive list of the best electric bikes! Each bike has been reviewed in depth and includes a full list of specs and a photo.

Billy eBike


To start us off is the Billy eBike, a powerful go-anywhere urban electric bike that’s specially designed to offer an exciting ride like no other whether you want to ride to the grocery store, cafe, work or school. The Billy eBike comes in 4 color options – Billy Blue, Polished aluminium, Artic white, and Stealth black.

Price: $2490

Available countries

Available in the USA, Europe, Asia, South Africa and Australia.This item ships from the USA. Buyers are therefore responsible for any taxes and/or customs duties incurred once it arrives in your country.


  • Control – Ride with confidence with our ultra-wide BMX bars and a hyper-responsive twist throttle.
  • Stealth- Ride like a ninja with our Gates carbon drive that’s as smooth as butter and maintenance-free.
  • Drive – Ride further with our high torque fat bike motor, giving a better climbing performance.
  • Accelerate – Ride quicker with our 20-inch lightweight cutout rims for improved acceleration.
  • Customize – Ride your own way with 5 levels of power control. Each level determines power and speed.
  • Flickable – Ride harder with our BMX /MotoX inspired geometry and lightweight aluminum package


  • Maximum speed: 20 mph (32 km/h)
  • Range per charge: 41 miles (66 km)
  • Maximum Power: 500W
  • Motor type: Fat Bike Motor: Bafang RM G060.500.DC
  • Load capacity: 300lbs (136kg)
  • Battery type: 13.6Ah Samsung lithium-ion,
  • Battery capacity: On/off-bike charging available
  • Weight: w/o batt. 48.5lbs (22kg), w/ batt. 54lbs (24.5kg)
  • Front Suspension: Fully adjustable air shock, preload/compression damping /lockout
  • Rear Suspension: spring, preload adjustment
  • Built-in GPS

Why Should You Buy This?

  • Riding fun and excitement
  • Better climbing ability and faster acceleration.
  • Ride with confidence
  • Billy folds for convenient storage and transportation.
  • Shorty levers connect to disc brakes ensuring you stop on a dime
  • belt drives are maintenance-free and clean (no oil or lubrication needed)

**Who Should Ride Billy? **

Both new and experienced riders

**Where to Buy? **Local distributors or ships from the USA.

Genze 200 series e-Bike


Featuring a sleek and lightweight aluminum frame design, the 200-Series ebike takes your riding experience to greater heights. Available in both black and white this ebike comes with a connected app, which allows you to plan activities, map distances and routes while also allowing connections with fellow riders.

Price: $2099.00

Available countries

The Genze 200 series e-Bike is available at GenZe retail locations across the U.S or online via website. Customers from outside the US can ship the product while incurring the relevant charges.


  • 2 Frame Options
  • 2 Sizes
  • Integrated/Removable Battery
  • Throttle and Pedal Assist Ride Modes
  • Integrated LCD Display
  • Connected App
  • 24 month warranty
  • GPS navigation
  • Bluetooth connectivity


  • Maximum speed: 20 mph with throttle
  • Range per charge: 15-18 miles w/ throttle and 30-50 miles w/ pedal assist
  • Charging time: 3.5 hours
  • Motor type: Brushless Rear Hub Motor
  • Gears: Microshift Thumb Shifter
  • Battery type: Removable Samsung 36V, 9.6AH Li-Ion battery pack
  • Battery capacity: 36V and 350 Wh
  • Weight: 46 pounds
  • Derailleur: 8-speed Shimano
  • Brakes: Dual classic
  • Wheels: 26 x 20 inches
  • Frame: 16, and 18 inches
  • Operating Mode: Analog mode 5 levels of Pedal Assist Thrott­le Mode

Norco from eBikestore


The Norco VLT S2 is a front suspension e-Bike with solid components alongside the reliable Bosch Performance Line Power systems that offer precise pedal assistance during any riding situation.

Price: $2,699.00

Available countries

This item is available via the various Norco bikes international distributors.


  • VLT aluminum frame- for stiffness and wheel security.
  • Bosch e-bike system – for their reliability and performance.
  • E-bike components – for added durability.
  • Hydraulic disc brakes – offer riders more stopping power for safety and control at higher speeds.
  • Practical design features – to add convenience and versatility.


  • Maximum speed: KMC X9 9spd
  • Motor type: Bosch Active Line
  • Gears: Shimano Altus RD-M2000, SGS, 9 Speed
  • Battery type: Power Pack 400
  • Battery capacity: 396Wh
  • Suspension: SR Suntour suspension fork
  • Frame: Norco VLT, Aluminum, 12x142mm TA Dropouts

Bodo EV


Manufactured by Bodo Vehicle Group Limited, the Bodo EV is specially designed for strong power and extraordinary long service to facilitate super amazing rides. The Bodo Vehicle Company is a striking top in electric vehicles brand field in China and across the globe. Their Bodo EV will no doubt provide your riders with high-level riding satisfaction owing to its high-quality design, strength, breaking stability and speed.

Price: $799

Available countries

This item ships from China with buyers bearing the shipping costs and other variables prior to delivery.


  • Reliable
  • Environment friendly
  • Comfortable riding
  • Fashionable
  • Economical
  • Durable – long service life
  • Braking stability
  • LED lighting technology


  • Maximum speed: 45km/h
  • Range per charge: 50km per person
  • Charging time: 8 hours
  • Maximum Power: 3000W
  • Motor type: Brushless DC Motor
  • Load capacity: 100kg
  • Battery type: Lead-acid battery
  • Battery capacity: 60V 20AH
  • Weight: w/o battery 47kg

#android app #autorent #entrepreneurship #ios app #minimum viable product (mvp) #mobile app development #news #app like bird #app like bounce #app like lime #autorent #best electric bikes 2020 #best electric bikes for rental business #best electric kick scooters 2020 #best electric kickscooters for rental business #best electric scooters 2020 #best electric scooters for rental business #bird scooter business model #bird scooter rental #bird scooter rental cost #bird scooter rental price #clone app like bird #clone app like bounce #clone app like lime #electric rental scooters #electric scooter company #electric scooter rental business #how do you start a moped #how to start a moped #how to start a scooter rental business #how to start an electric company #how to start electric scooterrental business #lime scooter business model #scooter franchise #scooter rental business #scooter rental business for sale #scooter rental business insurance #scooters franchise cost #white label app like bird #white label app like bounce #white label app like lime