front end init

package-lock.json

@@ -797,6 +797,11 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "angular-in-memory-web-api": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.6.0.tgz",
+      "integrity": "sha512-+i2bH9T/S4gTQdJLt264H4JMKXNpik33pMatSOvPSqFQ0vImnTBVbvijfmy75OgwKPJ8OZw0R76CrLjp2EYX2A=="
+    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
+    "angular-in-memory-web-api": "^0.6.0",
     "core-js": "^2.5.4",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"

src/app/app.component.html

@@ -1,20 +1,4 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
+<app-navi></app-navi>
+<app-homeui></app-homeui>
 

src/app/app.module.ts

@@ -1,16 +1,50 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
+import { StatusComponent } from './timeline/status/status.component';
+import { HomeuiComponent } from './homeui/homeui.component';
+import { TimelineComponent } from './timeline/timeline.component';
+import { PostComponent } from './timeline/post/post.component';
+import { InboxComponent } from './inbox/inbox.component';
+import { ButtonsComponent } from './buttons/buttons.component';
+import { NaviComponent } from './navi/navi.component';
+import { CommentComponent } from './timeline/post/comment/comment.component';
+import { MessageComponent } from './inbox/message/message.component';
+import { RouterModule, Routes } from '@angular/router';
+import { ChatroomComponent } from './chatroom/chatroom.component';
+
+const appRoutes: Routes = [
+	{ path: '', component: TimelineComponent },
+	{ path: 'chatroom', component: ChatroomComponent }
+];
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+	declarations: [
+		AppComponent,
+		StatusComponent,
+		HomeuiComponent,
+		TimelineComponent,
+		PostComponent,
+		InboxComponent,
+		ButtonsComponent,
+		NaviComponent,
+		CommentComponent,
+		MessageComponent,
+		ChatroomComponent,
+	],
+	imports: [
+		BrowserModule,
+		FormsModule,
+		HttpClientModule,
+		RouterModule.forRoot(
+			appRoutes,
+			{ enableTracing: false }
+		),
+	],
+	providers: [],
+	bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/buttons/buttons.component.css

@@ -0,0 +1,28 @@
+.container {
+	max-width: 100% !important;
+}
+
+.hero.is-fullheight {
+	min-height: calc(100vh - 3.25rem);
+}
+
+.side__buttons > li {
+	text-align: center;
+}
+
+.side__buttons > li > a {
+	height: 70px;
+	width: 100%;
+	border-radius: 0 !important;
+	border: 0;
+	transition: .3s ease;
+}
+
+.button:hover {
+	color: white;
+	background-color: black;
+}
+
+.hero-body {
+	padding: 0 0;
+}

src/app/buttons/buttons.component.html

@@ -0,0 +1,28 @@
+<section class="hero is-fullheight">
+	<div class="hero-body">
+		<div class="container">
+			<ul class="side__buttons">
+				<li>
+					<a routerLink="/" class="button">
+						<i class="fas fa-home fa-fw fa-2x"></i>
+					</a>
+				</li>
+				<li>
+					<a class="button">
+						<i class="fas fa-image fa-fw fa-2x"></i>
+					</a>
+				</li>
+				<li>
+					<a class="button">
+						<i class="fas fa-envelope fa-fw fa-2x"></i>
+					</a>
+				</li>
+				<li>
+					<a class="button">
+						<i class="fas fa-folder-open fa-fw fa-2x"></i>
+					</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+</section>

src/app/buttons/buttons.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonsComponent } from './buttons.component';
+
+describe('ButtonsComponent', () => {
+  let component: ButtonsComponent;
+  let fixture: ComponentFixture<ButtonsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ButtonsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ButtonsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/buttons/buttons.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-buttons',
+  templateUrl: './buttons.component.html',
+  styleUrls: ['./buttons.component.css']
+})
+export class ButtonsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/chatroom/chatroom.component.html

@@ -0,0 +1,11 @@
+<section class="hero is-fullheight">
+	<div class="hero-body no-vcenter">
+		<div class="container">
+			<p>
+				chatroom works!
+			</p>
+		</div>
+	</div>
+</section>
+
+

src/app/chatroom/chatroom.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatroomComponent } from './chatroom.component';
+
+describe('ChatroomComponent', () => {
+  let component: ChatroomComponent;
+  let fixture: ComponentFixture<ChatroomComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChatroomComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChatroomComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/chatroom/chatroom.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-chatroom',
+  templateUrl: './chatroom.component.html',
+  styleUrls: ['./chatroom.component.css']
+})
+export class ChatroomComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/homeui/homeui.component.css

@@ -0,0 +1,7 @@
+.hero-body {
+	padding: 0 0;
+}
+
+.container {
+	max-width: 100% !important;
+}

src/app/homeui/homeui.component.html

@@ -0,0 +1,23 @@
+<!-- <app-navi></app-navi> -->
+<section class="hero is-fullheight">
+	<div class="hero-body">
+		<div class="container">
+			<div class="columns is-gapless">
+
+				<div class="column is-1">
+					<app-buttons style="position: fixed; width: inherit;"></app-buttons>
+				</div>
+
+				<div class="column is-2">
+					<app-inbox style="position: fixed; width: inherit"></app-inbox>
+				</div>
+
+				<div class="column">
+					<router-outlet></router-outlet>
+					<!-- <app-timeline></app-timeline> -->
+				</div>
+
+			</div>
+		</div>
+	</div>
+</section>

src/app/homeui/homeui.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomeuiComponent } from './homeui.component';
+
+describe('HomeuiComponent', () => {
+  let component: HomeuiComponent;
+  let fixture: ComponentFixture<HomeuiComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeuiComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeuiComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/homeui/homeui.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-homeui',
+	templateUrl: './homeui.component.html',
+	styleUrls: ['./homeui.component.css']
+})
+export class HomeuiComponent implements OnInit {
+
+	constructor() { }
+
+	ngOnInit() {
+	}
+
+}

src/app/inbox/inbox.component.css

@@ -0,0 +1,26 @@
+.hero.is-fullheight .hero-body.no-vcenter {
+	align-items: flex-start;
+}
+
+.hero.is-fullheight {
+	min-height: calc(100vh - 3.25rem);
+}
+
+section {
+	max-height: 1px;
+	overflow: auto;
+	border-left: 1px solid grey;
+	border-right: 1px solid grey;
+}
+
+.hero-body {
+	padding: 0 0;
+}
+
+.container {
+	max-width: 100% !important;
+}
+
+.box {
+	background-color: black;
+}

src/app/inbox/inbox.component.html

@@ -0,0 +1,24 @@
+<section class="hero is-fullheight is-light">
+	<div class="hero-body no-vcenter">
+		<div class="container">
+			<ul class="side__boxes">
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+				<app-message></app-message>
+			</ul>
+		</div>
+	</div>
+</section>

src/app/inbox/inbox.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InboxComponent } from './inbox.component';
+
+describe('InboxComponent', () => {
+  let component: InboxComponent;
+  let fixture: ComponentFixture<InboxComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InboxComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/inbox/inbox.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-inbox',
+  templateUrl: './inbox.component.html',
+  styleUrls: ['./inbox.component.css']
+})
+export class InboxComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/inbox/message/message.component.css

@@ -0,0 +1,8 @@
+li > div {
+	min-height: 80px;
+	width: 100%;
+	border-radius: 0 !important;
+}
+
+.box {
+}

src/app/inbox/message/message.component.html

@@ -0,0 +1,10 @@
+<li>
+	<div routerLink="/chatroom" class="box">
+		<p class="title is-6">
+		message
+		</p>
+		<p class="subtitle is-7">
+		3 min ago
+		</p>
+	</div>
+</li>

src/app/inbox/message/message.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessageComponent } from './message.component';
+
+describe('MessageComponent', () => {
+  let component: MessageComponent;
+  let fixture: ComponentFixture<MessageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/inbox/message/message.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-message',
+  templateUrl: './message.component.html',
+  styleUrls: ['./message.component.css']
+})
+export class MessageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/navi/navi.component.css

@@ -0,0 +1,11 @@
+.navbar {
+	border-bottom: 1px solid grey;
+}
+
+.navbar-item {
+	border-left: 1px solid grey;
+}
+
+a {
+	color: black !important;
+}

src/app/navi/navi.component.html

@@ -0,0 +1,30 @@
+<nav class="navbar is-fixed-top">
+	<div class="navbar-brand">
+		<a class="navbar-item" href="https://bulma.io">
+			<h1 class="is-size-5">ZipLine</h1>
+		</a>
+		<div class="navbar-burger burger" data-target="navbarExampleTransparentExample">
+			<span></span>
+			<span></span>
+			<span></span>
+		</div>
+	</div>
+
+	<div id="navbarExampleTransparentExample" class="navbar-menu">
+		<div class="navbar-end">
+			<div class="navbar-item">
+				<a href="#">
+					<span class="fa-layers fa-fw fa-lg">
+						<i class="fas fa-bell"></i>
+						<i class="fas fa-circle" data-fa-transform="shrink-7 up-5 right-5" style="color: Tomato "></i>
+					</span>
+				</a>
+			</div>
+			<div class="navbar-item">
+				<a href="#">
+					Profile
+				</a>
+			</div>
+		</div>
+	</div>
+</nav>

src/app/navi/navi.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NaviComponent } from './navi.component';
+
+describe('NaviComponent', () => {
+  let component: NaviComponent;
+  let fixture: ComponentFixture<NaviComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NaviComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NaviComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/navi/navi.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-navi',
+  templateUrl: './navi.component.html',
+  styleUrls: ['./navi.component.css']
+})
+export class NaviComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/timeline/post/comment/comment.component.html

@@ -0,0 +1,18 @@
+<article class="media">
+	<figure class="media-left">
+		<p class="image is-48x48">
+			<img src="https://bulma.io/images/placeholders/96x96.png">
+		</p>
+	</figure>
+	<div class="media-content">
+		<div class="content">
+			<p>
+				<strong>Sean Brown</strong>
+				<br>
+				Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.
+				<br>
+				<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
+			</p>
+		</div>
+	</div>
+</article>

src/app/timeline/post/comment/comment.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommentComponent } from './comment.component';
+
+describe('CommentComponent', () => {
+  let component: CommentComponent;
+  let fixture: ComponentFixture<CommentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/timeline/post/comment/comment.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-comment',
+  templateUrl: './comment.component.html',
+  styleUrls: ['./comment.component.css']
+})
+export class CommentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/timeline/post/post.component.css

@@ -0,0 +1,7 @@
+.title, .subtitle {
+	color: grey !important;
+}
+
+.card {
+	max-width: 900px;
+}

src/app/timeline/post/post.component.html

@@ -0,0 +1,26 @@
+<div class="card">
+	<div class="card-content">
+		<article class="media">
+			<figure class="media-left">
+				<p class="image is-64x64">
+					<img src="https://bulma.io/images/placeholders/128x128.png">
+				</p>
+			</figure>
+			<div class="media-content">
+				<div class="content">
+					<p>
+						<strong>Barbara Middleton</strong>
+						<br>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
+						<br>
+						<small><a>Like</a> · <a>Reply</a> · 3 hrs</small>
+					</p>
+				</div>
+
+				<div class="comment">
+					<app-comment></app-comment>
+				</div>
+			</div>
+		</article>
+	</div>
+</div>

src/app/timeline/post/post.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PostComponent } from './post.component';
+
+describe('PostComponent', () => {
+  let component: PostComponent;
+  let fixture: ComponentFixture<PostComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PostComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PostComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/timeline/post/post.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-post',
+  templateUrl: './post.component.html',
+  styleUrls: ['./post.component.css']
+})
+export class PostComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/timeline/status/status.component.css

@@ -0,0 +1,5 @@
+textarea {
+	border-radius: 0;
+	border: 0;
+	box-shadow: 0 0 0;
+}

src/app/timeline/status/status.component.html

@@ -0,0 +1,12 @@
+<div class="columns">
+	<div class="column is-6 is-offset-3">
+		<div class="card">
+			<div class="card-content">
+				<textarea [(ngModel)]="body" class="textarea" type="text" placeholder="What's on your mind?"></textarea>
+			</div>
+			<div class="card-footer">
+				<button class="button" (click)="submit()">submit</button>
+			</div>
+		</div>
+	</div>
+</div>

src/app/timeline/status/status.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StatusComponent } from './status.component';
+
+describe('MessageComponent', () => {
+  let component: MessageComponent;
+  let fixture: ComponentFixture<MessageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/timeline/status/status.component.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
+
+@Component({
+	selector: 'app-status',
+	templateUrl: './status.component.html',
+	styleUrls: ['./status.component.css']
+})
+export class StatusComponent implements OnInit {
+	sender = 'Origin'; // pull web3.address
+	body: string;
+
+	constructor(private http: HttpClient) { }
+
+	ngOnInit() {
+	}
+
+	submit() {
+		const headers = new HttpHeaders()
+			.set('Content-Type', 'application/json');
+
+		this.http.post(
+			`http://192.168.3.202:6969/post?sender=${this.sender}&body=${this.body}`, {headers}).subscribe(console.log);
+	}
+}

src/app/timeline/timeline.component.css

@@ -0,0 +1,13 @@
+.hero.is-fullheight .hero-body.no-vcenter {
+	align-items: flex-start;
+}
+.container.timeline {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.hero-body {
+	padding: 0 0;
+	padding-top: 2rem;
+}

src/app/timeline/timeline.component.html

@@ -0,0 +1,17 @@
+<section class="hero is-fullheight">
+	<div class="hero-body no-vcenter">
+		<div class="container">
+			<app-status></app-status>
+			<div class="container timeline">
+			<app-post></app-post>
+			<app-post></app-post>
+			<app-post></app-post>
+			<app-post></app-post>
+			<app-post></app-post>
+			<app-post></app-post>
+			</div>
+		</div>
+	</div>
+</section>
+
+

src/app/timeline/timeline.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TimelineComponent } from './timeline.component';
+
+describe('TimelineComponent', () => {
+  let component: TimelineComponent;
+  let fixture: ComponentFixture<TimelineComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TimelineComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TimelineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/timeline/timeline.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-timeline',
+  templateUrl: './timeline.component.html',
+  styleUrls: ['./timeline.component.css']
+})
+export class TimelineComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/index.html

@@ -2,13 +2,15 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>ZiplineFrontend</title>
-  <base href="/">
+	<title>ZiplineFrontend</title>
+	<base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="icon" type="image/x-icon" href="favicon.ico">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
+	<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>
 </head>
-<body>
-  <app-root></app-root>
+<body class="has-navbar-fixed-top">
+	<app-root></app-root>
 </body>
 </html>

tslint.json

@@ -23,7 +23,7 @@
     "import-spacing": true,
     "indent": [
       true,
-      "spaces"
+      "tabs"
     ],
     "interface-over-type-literal": true,
     "label-position": true,