diff --git a/client/Nightr/src/app.css b/client/Nightr/src/app.css
new file mode 100644
index 0000000..d23504c
--- /dev/null
+++ b/client/Nightr/src/app.css
@@ -0,0 +1,12 @@
+/*
+In NativeScript, the app.css file is where you place CSS rules that
+you would like to apply to your entire application. Check out
+http://docs.nativescript.org/ui/styling for a full list of the CSS
+selectors and properties you can use to style UI components.
+
+/*
+In many cases you may want to use the NativeScript core theme instead
+of writing your own CSS rules. For a full list of class names in the theme
+refer to http://docs.nativescript.org/ui/theme.
+*/
+@import '~nativescript-theme-core/css/core.light.css';
diff --git a/client/Nightr/src/app/app-routing.module.ts b/client/Nightr/src/app/app-routing.module.ts
new file mode 100644
index 0000000..d8012a0
--- /dev/null
+++ b/client/Nightr/src/app/app-routing.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from "@angular/core";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { Routes } from "@angular/router";
+
+import { ItemsComponent } from "./item/items.component";
+import { ItemDetailComponent } from "./item/item-detail.component";
+
+const routes: Routes = [
+    { path: "", redirectTo: "/items", pathMatch: "full" },
+    { path: "items", component: ItemsComponent },
+    { path: "item/:id", component: ItemDetailComponent }
+];
+
+@NgModule({
+    imports: [NativeScriptRouterModule.forRoot(routes)],
+    exports: [NativeScriptRouterModule]
+})
+export class AppRoutingModule { }
diff --git a/client/Nightr/src/app/app.component.html b/client/Nightr/src/app/app.component.html
new file mode 100644
index 0000000..8a2c1a7
--- /dev/null
+++ b/client/Nightr/src/app/app.component.html
@@ -0,0 +1,2 @@
+<!-- https://docs.nativescript.org/angular/core-concepts/angular-navigation.html#page-router-outlet -->
+<page-router-outlet></page-router-outlet>
diff --git a/client/Nightr/src/app/app.component.ts b/client/Nightr/src/app/app.component.ts
new file mode 100644
index 0000000..d88b2fe
--- /dev/null
+++ b/client/Nightr/src/app/app.component.ts
@@ -0,0 +1,8 @@
+import { Component } from "@angular/core";
+
+@Component({
+    selector: "ns-app",
+    moduleId: module.id,
+    templateUrl: "./app.component.html"
+})
+export class AppComponent { }
diff --git a/client/Nightr/src/app/app.module.ts b/client/Nightr/src/app/app.module.ts
new file mode 100644
index 0000000..c8f47ea
--- /dev/null
+++ b/client/Nightr/src/app/app.module.ts
@@ -0,0 +1,36 @@
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NativeScriptModule } from "nativescript-angular/nativescript.module";
+
+import { AppRoutingModule } from "./app-routing.module";
+import { AppComponent } from "./app.component";
+import { ItemsComponent } from "./item/items.component";
+import { ItemDetailComponent } from "./item/item-detail.component";
+
+// Uncomment and add to NgModule imports if you need to use two-way binding
+// import { NativeScriptFormsModule } from "nativescript-angular/forms";
+
+// Uncomment and add to NgModule imports if you need to use the HttpClient wrapper
+// import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
+
+@NgModule({
+    bootstrap: [
+        AppComponent
+    ],
+    imports: [
+        NativeScriptModule,
+        AppRoutingModule
+    ],
+    declarations: [
+        AppComponent,
+        ItemsComponent,
+        ItemDetailComponent
+    ],
+    providers: [],
+    schemas: [
+        NO_ERRORS_SCHEMA
+    ]
+})
+/*
+Pass your application module to the bootstrapModule function located in main.ts to start your app
+*/
+export class AppModule { }
diff --git a/client/Nightr/src/app/item/item-detail.component.html b/client/Nightr/src/app/item/item-detail.component.html
new file mode 100644
index 0000000..3bbd174
--- /dev/null
+++ b/client/Nightr/src/app/item/item-detail.component.html
@@ -0,0 +1,8 @@
+<ActionBar title="Details" class="action-bar"></ActionBar>
+<FlexboxLayout flexDirection="column" class="page">
+    <FlexboxLayout class="m-15">
+        <Label class="h2" [text]="item.id + '. '"></Label>
+        <Label class="h2" [text]="item.name"></Label>
+    </FlexboxLayout>
+    <Label class="h4" [text]="item.role"></Label>
+</FlexboxLayout>
diff --git a/client/Nightr/src/app/item/item-detail.component.ts b/client/Nightr/src/app/item/item-detail.component.ts
new file mode 100644
index 0000000..e48b03f
--- /dev/null
+++ b/client/Nightr/src/app/item/item-detail.component.ts
@@ -0,0 +1,24 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+
+import { Item } from "./item";
+import { ItemService } from "./item.service";
+
+@Component({
+    selector: "ns-details",
+    moduleId: module.id,
+    templateUrl: "./item-detail.component.html"
+})
+export class ItemDetailComponent implements OnInit {
+    item: Item;
+
+    constructor(
+        private itemService: ItemService,
+        private route: ActivatedRoute
+    ) { }
+
+    ngOnInit(): void {
+        const id = +this.route.snapshot.params.id;
+        this.item = this.itemService.getItem(id);
+    }
+}
diff --git a/client/Nightr/src/app/item/item.service.ts b/client/Nightr/src/app/item/item.service.ts
new file mode 100644
index 0000000..74d9140
--- /dev/null
+++ b/client/Nightr/src/app/item/item.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from "@angular/core";
+
+import { Item } from "./item";
+
+@Injectable({
+    providedIn: "root"
+})
+export class ItemService {
+    private items = new Array<Item>(
+        { id: 1, name: "Ter Stegen", role: "Goalkeeper" },
+        { id: 3, name: "Piqué", role: "Defender" },
+        { id: 4, name: "I. Rakitic", role: "Midfielder" },
+        { id: 5, name: "Sergio", role: "Midfielder" },
+        { id: 6, name: "Denis Suárez", role: "Midfielder" },
+        { id: 7, name: "Arda", role: "Midfielder" },
+        { id: 8, name: "A. Iniesta", role: "Midfielder" },
+        { id: 9, name: "Suárez", role: "Forward" },
+        { id: 10, name: "Messi", role: "Forward" },
+        { id: 11, name: "Neymar", role: "Forward" },
+        { id: 12, name: "Rafinha", role: "Midfielder" },
+        { id: 13, name: "Cillessen", role: "Goalkeeper" },
+        { id: 14, name: "Mascherano", role: "Defender" },
+        { id: 17, name: "Paco Alcácer", role: "Forward" },
+        { id: 18, name: "Jordi Alba", role: "Defender" },
+        { id: 19, name: "Digne", role: "Defender" },
+        { id: 20, name: "Sergi Roberto", role: "Midfielder" },
+        { id: 21, name: "André Gomes", role: "Midfielder" },
+        { id: 22, name: "Aleix Vidal", role: "Midfielder" },
+        { id: 23, name: "Umtiti", role: "Defender" },
+        { id: 24, name: "Mathieu", role: "Defender" },
+        { id: 25, name: "Masip", role: "Goalkeeper" }
+    );
+
+    getItems(): Array<Item> {
+        return this.items;
+    }
+
+    getItem(id: number): Item {
+        return this.items.filter((item) => item.id === id)[0];
+    }
+}
diff --git a/client/Nightr/src/app/item/item.ts b/client/Nightr/src/app/item/item.ts
new file mode 100644
index 0000000..950fba4
--- /dev/null
+++ b/client/Nightr/src/app/item/item.ts
@@ -0,0 +1,5 @@
+export interface Item {
+    id: number;
+    name: string;
+    role: string;
+}
diff --git a/client/Nightr/src/app/item/items.component.html b/client/Nightr/src/app/item/items.component.html
new file mode 100644
index 0000000..f679310
--- /dev/null
+++ b/client/Nightr/src/app/item/items.component.html
@@ -0,0 +1,33 @@
+<!--
+The template defines the view of the component - what is actually rendered.
+In NativeScript applications the template is defined with XML using NativeScript UI elements.
+It is different from HTML. So instead of <input>, <span>, <div> etc. - we have <TextField>, <Label> and layouts.
+The important thing is that although the elements are different - all of the Angular’s template syntax works exactly the same.
+So you can still use template expressions, bindings, templates as well as all the built-in directives.
+-->
+
+<!--
+The ActionBar is the NativeScript common abstraction over the Android ActionBar and iOS NavigationBar.
+http://docs.nativescript.org/ui/action-bar
+-->
+<ActionBar title="My App" class="action-bar">
+</ActionBar>
+
+<!--
+The GridLayout arranges its child elements in a table structure of rows and columns.
+A cell can contain multiple child elements, they can span over multiple rows and columns, 
+and even overlap each other. The GridLayout has one column and one row by default.
+You can learn more about NativeScript layouts at https://docs.nativescript.org/ui/layout-containers.
+
+These components make use of several CSS class names that are part of the NativeScript
+core theme, such as p-20, btn, h2, and list-group. You can view a full list of the
+class names available for styling your app at https://docs.nativescript.org/ui/theme.
+-->
+<GridLayout class="page">
+    <ListView [items]="items" class="list-group">
+        <ng-template let-item="item">
+            <Label [nsRouterLink]="['/item', item.id]" [text]="item.name"
+                class="list-group-item"></Label>
+        </ng-template>
+    </ListView>
+</GridLayout>
diff --git a/client/Nightr/src/app/item/items.component.ts b/client/Nightr/src/app/item/items.component.ts
new file mode 100644
index 0000000..4f88d08
--- /dev/null
+++ b/client/Nightr/src/app/item/items.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from "@angular/core";
+
+import { Item } from "./item";
+import { ItemService } from "./item.service";
+
+@Component({
+    selector: "ns-items",
+    moduleId: module.id,
+    templateUrl: "./items.component.html"
+})
+export class ItemsComponent implements OnInit {
+    items: Array<Item>;
+
+    // This pattern makes use of Angular’s dependency injection implementation to
+    // inject an instance of the ItemService service into this class.
+    // Angular knows about this service because it is included in your app’s main NgModule,
+    // defined in app.module.ts.
+    constructor(private itemService: ItemService) { }
+
+    ngOnInit(): void {
+        this.items = this.itemService.getItems();
+    }
+}
diff --git a/client/Nightr/src/main.ts b/client/Nightr/src/main.ts
new file mode 100644
index 0000000..8508cda
--- /dev/null
+++ b/client/Nightr/src/main.ts
@@ -0,0 +1,13 @@
+// this import should be first in order to load some required settings (like globals and reflect-metadata)
+import { platformNativeScriptDynamic } from "nativescript-angular/platform";
+
+import { AppModule } from "./app/app.module";
+
+// A traditional NativeScript application starts by initializing global objects,
+// setting up global CSS rules, creating, and navigating to the main page.
+// Angular applications need to take care of their own initialization:
+// modules, components, directives, routes, DI providers.
+// A NativeScript Angular app needs to make both paradigms work together,
+// so we provide a wrapper platform object, platformNativeScriptDynamic,
+// that sets up a NativeScript application and can bootstrap the Angular framework.
+platformNativeScriptDynamic().bootstrapModule(AppModule);
diff --git a/client/Nightr/src/package.json b/client/Nightr/src/package.json
new file mode 100644
index 0000000..bca86ce
--- /dev/null
+++ b/client/Nightr/src/package.json
@@ -0,0 +1,6 @@
+{
+  "main": "main.js",
+  "android": {
+    "v8Flags": "--expose_gc"
+  }
+}