SlideShare a Scribd company logo
1 of 14
<h1>teq llc ©
The Goal
I’ve been a full stack web developer my entire 16 years as a programmer. Although Javascript
was my first programming language, most of this time I was in the Microsoft stack. I was looking
for a project where I could learn more NodeJs and full stack Javascript. This is a demo, and it is
in no way complete and I’m sure there are bugs. I did this over nights and weekends. Hopefully
it demonstrates my creativity and initiative.
User Story
As a Home Inspection Specialist I want to be able to create home inspections and inspection
templates from my laptop or mobile device and not be in constant contact with the internet so
that I can create do my job more efficiently.
https://homeinspection.harristeq.com/page-inspections.html
Technologies used
Responsive Web Design, Angular, Express, Mongo, Node, Socket.io, CSS 3.0 Animation,
HTML 5, jsPDF (client side pdf creation), IISNode, SSL deployed in the Amazon AWS cloud.
It’s one page so you can “view source” paste the client code into http://jsbin.com
However, all source code is available at: https://github.com/revnique/HomeInspection/
Overview
Inspections [not coded] are filled in Templates
Templates are printed and the results are called Inspections.
Categories are the main level of a Template. Interior, Exterior, Electrical for example.
Items are sub categories like Window types.
Item options are further descriptive of Items like Sliding or Fixed.
The Navigation Levels
Templates > Categories > Category Item > Category Item Option
Example:
1. Template: DTowns Template
a. Category: Exterior
i. Item: Window Types
1. Item Option: Sliding
<h1>teq llc ©
1. Menu
2. List Count
3. Remove Items from list
4. Item Edit
5. Create PDF
6. Next Navigation Level (Categories)
7. Add new Item (Template)
8. Add Button
<h1>teq llc ©
Demonstrating Css Transition for menu. Templates are the only feature coded so inspections
link takes you to template. Clicking Menu will make the menu slide back out of view.
<h1>teq llc ©
They both take you to the template screen
<h1>teq llc ©
Angular JS Directive for label and textbox combined with “Enter” keypress for add item
<h1>teq llc ©
The new template was added and the count was updated
<h1>teq llc ©
Clickable Navigation
<h1>teq llc ©
1) Navigation level name 2) Angular directive for custom label textbox
<h1>teq llc ©
Downloaded/Printed Template PDF
<h1>teq llc ©
Edit Mode for list
<h1>teq llc ©
Socket.io Demo
Click the below link and you’ll see the push notifications.
https://homeinspection.harristeq.com/api/socketiodemo/?m=hello%20fellas&t=this%20is%20a%
20push%20demo
SIMULTANEOUS Notifications
web iPhone
iPad jsbin.com
<h1>teq llc ©
View Source
<h1>teq llc ©
Paste source into https://jsbin.com
<h1>teq llc ©
Viola!!!

More Related Content

What's hot

Windows Phone Workshop: WCF services
Windows Phone Workshop: WCF services Windows Phone Workshop: WCF services
Windows Phone Workshop: WCF services Zayen Chagra
 
Wellrailed - Cucumber tips
Wellrailed - Cucumber tipsWellrailed - Cucumber tips
Wellrailed - Cucumber tipsbreccan
 
Building a Blogging System -- Rapidly using Alpha Five v10 with Codeless AJAX...
Building a Blogging System -- Rapidly using Alpha Five v10 with Codeless AJAX...Building a Blogging System -- Rapidly using Alpha Five v10 with Codeless AJAX...
Building a Blogging System -- Rapidly using Alpha Five v10 with Codeless AJAX...Richard Rabins
 
MoodLocator HwT
MoodLocator HwTMoodLocator HwT
MoodLocator HwTJDihlmann
 
MVC for Desktop Application - Part 1
MVC for Desktop Application - Part 1MVC for Desktop Application - Part 1
MVC for Desktop Application - Part 1晟 沈
 
MVC for Desktop Application - Part 3
MVC for Desktop Application - Part 3MVC for Desktop Application - Part 3
MVC for Desktop Application - Part 3晟 沈
 
Import google contacts with php or javascript using google contacts api and o...
Import google contacts with php or javascript using google contacts api and o...Import google contacts with php or javascript using google contacts api and o...
Import google contacts with php or javascript using google contacts api and o...Design 19
 
Webcomponents TLV October 2014
Webcomponents TLV October 2014Webcomponents TLV October 2014
Webcomponents TLV October 2014Dmitry Bakaleinik
 
Asp 2-createaspnetmvc
Asp 2-createaspnetmvcAsp 2-createaspnetmvc
Asp 2-createaspnetmvcFajar Baskoro
 
feelDweb official guide
feelDweb official guidefeelDweb official guide
feelDweb official guideSuperestratega
 
MVC for Desktop Application - Part 4
MVC for Desktop Application - Part 4MVC for Desktop Application - Part 4
MVC for Desktop Application - Part 4晟 沈
 
What's new in ASP.NET 4
What's new in ASP.NET 4What's new in ASP.NET 4
What's new in ASP.NET 4Robert MacLean
 
Angularjs on line training
Angularjs on line trainingAngularjs on line training
Angularjs on line trainingJahan Murugassan
 
Tips to make dependency diagram
Tips to make dependency diagramTips to make dependency diagram
Tips to make dependency diagramridha26
 
Google app engine development with java and php
Google app engine development with java and phpGoogle app engine development with java and php
Google app engine development with java and phpSamuel Okoroafor
 
Html Server Button Control CS
Html Server Button Control CSHtml Server Button Control CS
Html Server Button Control CSsunmitraeducation
 
MVC for Desktop Application - Part 2
MVC for Desktop Application - Part  2MVC for Desktop Application - Part  2
MVC for Desktop Application - Part 2晟 沈
 
Copy text to clipboard using vue-clipboard2 - Vue.js
Copy text to clipboard using vue-clipboard2 - Vue.jsCopy text to clipboard using vue-clipboard2 - Vue.js
Copy text to clipboard using vue-clipboard2 - Vue.jsYogesh singh
 

What's hot (20)

Windows Phone Workshop: WCF services
Windows Phone Workshop: WCF services Windows Phone Workshop: WCF services
Windows Phone Workshop: WCF services
 
Wellrailed - Cucumber tips
Wellrailed - Cucumber tipsWellrailed - Cucumber tips
Wellrailed - Cucumber tips
 
Building a Blogging System -- Rapidly using Alpha Five v10 with Codeless AJAX...
Building a Blogging System -- Rapidly using Alpha Five v10 with Codeless AJAX...Building a Blogging System -- Rapidly using Alpha Five v10 with Codeless AJAX...
Building a Blogging System -- Rapidly using Alpha Five v10 with Codeless AJAX...
 
MoodLocator HwT
MoodLocator HwTMoodLocator HwT
MoodLocator HwT
 
Gwt Presentation 1
Gwt Presentation 1Gwt Presentation 1
Gwt Presentation 1
 
MVC for Desktop Application - Part 1
MVC for Desktop Application - Part 1MVC for Desktop Application - Part 1
MVC for Desktop Application - Part 1
 
MVC for Desktop Application - Part 3
MVC for Desktop Application - Part 3MVC for Desktop Application - Part 3
MVC for Desktop Application - Part 3
 
Import google contacts with php or javascript using google contacts api and o...
Import google contacts with php or javascript using google contacts api and o...Import google contacts with php or javascript using google contacts api and o...
Import google contacts with php or javascript using google contacts api and o...
 
Webcomponents TLV October 2014
Webcomponents TLV October 2014Webcomponents TLV October 2014
Webcomponents TLV October 2014
 
Asp 2-createaspnetmvc
Asp 2-createaspnetmvcAsp 2-createaspnetmvc
Asp 2-createaspnetmvc
 
feelDweb official guide
feelDweb official guidefeelDweb official guide
feelDweb official guide
 
MVC for Desktop Application - Part 4
MVC for Desktop Application - Part 4MVC for Desktop Application - Part 4
MVC for Desktop Application - Part 4
 
What's new in ASP.NET 4
What's new in ASP.NET 4What's new in ASP.NET 4
What's new in ASP.NET 4
 
Angularjs on line training
Angularjs on line trainingAngularjs on line training
Angularjs on line training
 
Tips to make dependency diagram
Tips to make dependency diagramTips to make dependency diagram
Tips to make dependency diagram
 
Google app engine development with java and php
Google app engine development with java and phpGoogle app engine development with java and php
Google app engine development with java and php
 
Html Server Button Control CS
Html Server Button Control CSHtml Server Button Control CS
Html Server Button Control CS
 
MVC for Desktop Application - Part 2
MVC for Desktop Application - Part  2MVC for Desktop Application - Part  2
MVC for Desktop Application - Part 2
 
Angularjs Live Project
Angularjs Live ProjectAngularjs Live Project
Angularjs Live Project
 
Copy text to clipboard using vue-clipboard2 - Vue.js
Copy text to clipboard using vue-clipboard2 - Vue.jsCopy text to clipboard using vue-clipboard2 - Vue.js
Copy text to clipboard using vue-clipboard2 - Vue.js
 

Viewers also liked

Viewers also liked (12)

Android Development Ycsin
Android Development YcsinAndroid Development Ycsin
Android Development Ycsin
 
Beenius General Presentation
Beenius General PresentationBeenius General Presentation
Beenius General Presentation
 
LQ 1 of Akhund
LQ 1 of AkhundLQ 1 of Akhund
LQ 1 of Akhund
 
RISK AMERICAS FINAL BROCHURE
RISK AMERICAS FINAL BROCHURERISK AMERICAS FINAL BROCHURE
RISK AMERICAS FINAL BROCHURE
 
Ceres Yayınları Dijital Katalog
Ceres Yayınları Dijital KatalogCeres Yayınları Dijital Katalog
Ceres Yayınları Dijital Katalog
 
Castle on the hill music video analyis
Castle on the hill music video analyisCastle on the hill music video analyis
Castle on the hill music video analyis
 
Historia mplv 2013 2016
Historia mplv 2013 2016Historia mplv 2013 2016
Historia mplv 2013 2016
 
Звіт про спортивні досягнення
Звіт про спортивні досягненняЗвіт про спортивні досягнення
Звіт про спортивні досягнення
 
Goal 7
Goal 7Goal 7
Goal 7
 
ARMANDO DORIA
ARMANDO DORIAARMANDO DORIA
ARMANDO DORIA
 
Jisamie Alvarez BSED-2M
Jisamie Alvarez BSED-2MJisamie Alvarez BSED-2M
Jisamie Alvarez BSED-2M
 
Escolas inovadoras
Escolas inovadorasEscolas inovadoras
Escolas inovadoras
 

Similar to home inspection demo

Introduction to Web Technologies PPT.pptx
Introduction to Web Technologies PPT.pptxIntroduction to Web Technologies PPT.pptx
Introduction to Web Technologies PPT.pptxKunal Kalamkar
 
HTML5 Up and Running
HTML5 Up and RunningHTML5 Up and Running
HTML5 Up and RunningCodemotion
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5kolev-prp
 
Adding a view
Adding a viewAdding a view
Adding a viewNhan Do
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application developmentzonathen
 
Web development intership Presentation.pptx
Web development intership Presentation.pptxWeb development intership Presentation.pptx
Web development intership Presentation.pptxbodepallivamsi1122
 
5a329780735625624 ch10
5a329780735625624 ch105a329780735625624 ch10
5a329780735625624 ch10harkesh singh
 
Introduction of VS2012 IDE and ASP.NET Controls
Introduction of VS2012 IDE and ASP.NET ControlsIntroduction of VS2012 IDE and ASP.NET Controls
Introduction of VS2012 IDE and ASP.NET ControlsKhademulBasher
 
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTREWeb Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTREjatin batra
 
Access tips access and sql part 4 building select queries on-the-fly
Access tips  access and sql part 4  building select queries on-the-flyAccess tips  access and sql part 4  building select queries on-the-fly
Access tips access and sql part 4 building select queries on-the-flyquest2900
 
Web Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdfWeb Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdfgdsczhcet
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete ReferenceEPAM Systems
 
7 new techniques every web developer should know
7 new techniques every web developer should know7 new techniques every web developer should know
7 new techniques every web developer should knowMitiz Technologies
 
Conquering Code with hjc
Conquering Code with hjcConquering Code with hjc
Conquering Code with hjchjc
 
ANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 schANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 schkannikadg
 

Similar to home inspection demo (20)

Introduction to Web Technologies PPT.pptx
Introduction to Web Technologies PPT.pptxIntroduction to Web Technologies PPT.pptx
Introduction to Web Technologies PPT.pptx
 
Dreaweaver cs5
Dreaweaver cs5Dreaweaver cs5
Dreaweaver cs5
 
Html 5
Html 5Html 5
Html 5
 
HTML5 Up and Running
HTML5 Up and RunningHTML5 Up and Running
HTML5 Up and Running
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
Knockout in action
Knockout in actionKnockout in action
Knockout in action
 
Adding a view
Adding a viewAdding a view
Adding a view
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
Web development intership Presentation.pptx
Web development intership Presentation.pptxWeb development intership Presentation.pptx
Web development intership Presentation.pptx
 
5a329780735625624 ch10
5a329780735625624 ch105a329780735625624 ch10
5a329780735625624 ch10
 
Introduction of VS2012 IDE and ASP.NET Controls
Introduction of VS2012 IDE and ASP.NET ControlsIntroduction of VS2012 IDE and ASP.NET Controls
Introduction of VS2012 IDE and ASP.NET Controls
 
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTREWeb Designing Training in Ambala ! BATRA COMPUTER CENTRE
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
 
Access tips access and sql part 4 building select queries on-the-fly
Access tips  access and sql part 4  building select queries on-the-flyAccess tips  access and sql part 4  building select queries on-the-fly
Access tips access and sql part 4 building select queries on-the-fly
 
TopicHero Descriptions Tutorial
TopicHero Descriptions TutorialTopicHero Descriptions Tutorial
TopicHero Descriptions Tutorial
 
Web Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdfWeb Dev - 1 PPT.pdf
Web Dev - 1 PPT.pdf
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
7 new techniques every web developer should know
7 new techniques every web developer should know7 new techniques every web developer should know
7 new techniques every web developer should know
 
Conquering Code with hjc
Conquering Code with hjcConquering Code with hjc
Conquering Code with hjc
 
ANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 schANGULAR JS LAB MANUAL(final) vtu2021 sch
ANGULAR JS LAB MANUAL(final) vtu2021 sch
 
ASP.NET MVC3 RAD
ASP.NET MVC3 RADASP.NET MVC3 RAD
ASP.NET MVC3 RAD
 

home inspection demo

  • 1. <h1>teq llc © The Goal I’ve been a full stack web developer my entire 16 years as a programmer. Although Javascript was my first programming language, most of this time I was in the Microsoft stack. I was looking for a project where I could learn more NodeJs and full stack Javascript. This is a demo, and it is in no way complete and I’m sure there are bugs. I did this over nights and weekends. Hopefully it demonstrates my creativity and initiative. User Story As a Home Inspection Specialist I want to be able to create home inspections and inspection templates from my laptop or mobile device and not be in constant contact with the internet so that I can create do my job more efficiently. https://homeinspection.harristeq.com/page-inspections.html Technologies used Responsive Web Design, Angular, Express, Mongo, Node, Socket.io, CSS 3.0 Animation, HTML 5, jsPDF (client side pdf creation), IISNode, SSL deployed in the Amazon AWS cloud. It’s one page so you can “view source” paste the client code into http://jsbin.com However, all source code is available at: https://github.com/revnique/HomeInspection/ Overview Inspections [not coded] are filled in Templates Templates are printed and the results are called Inspections. Categories are the main level of a Template. Interior, Exterior, Electrical for example. Items are sub categories like Window types. Item options are further descriptive of Items like Sliding or Fixed. The Navigation Levels Templates > Categories > Category Item > Category Item Option Example: 1. Template: DTowns Template a. Category: Exterior i. Item: Window Types 1. Item Option: Sliding
  • 2. <h1>teq llc © 1. Menu 2. List Count 3. Remove Items from list 4. Item Edit 5. Create PDF 6. Next Navigation Level (Categories) 7. Add new Item (Template) 8. Add Button
  • 3. <h1>teq llc © Demonstrating Css Transition for menu. Templates are the only feature coded so inspections link takes you to template. Clicking Menu will make the menu slide back out of view.
  • 4. <h1>teq llc © They both take you to the template screen
  • 5. <h1>teq llc © Angular JS Directive for label and textbox combined with “Enter” keypress for add item
  • 6. <h1>teq llc © The new template was added and the count was updated
  • 8. <h1>teq llc © 1) Navigation level name 2) Angular directive for custom label textbox
  • 10. <h1>teq llc © Edit Mode for list
  • 11. <h1>teq llc © Socket.io Demo Click the below link and you’ll see the push notifications. https://homeinspection.harristeq.com/api/socketiodemo/?m=hello%20fellas&t=this%20is%20a% 20push%20demo SIMULTANEOUS Notifications web iPhone iPad jsbin.com
  • 13. <h1>teq llc © Paste source into https://jsbin.com