Bossable: idea to boss with fun tutorials, examples and videos
  • Latest
  • Store
  • Mean Stack
  • 30 Day MEAN Stack Challenge
  • Web Apps
  • Tech
  • Say Hello
BOSSABLE
  • MEAN.js Transition to 0.4 – Part 2
  • MEAN Stack – Customer Search using AngularJS Filters – Day 18
  • MEAN Stack – Express.js & Client-side Assets – Day 29
  • Use cases and storyboards – Part 5
  • MEAN Stack – Using an AngularJS UI Modal to Update Customers – Day 19
  • MEAN Stack – Style the Sign-up Page – Day 8
  • MEAN Stack – Mongo Explorer & AngularJS Batarang – Day 14
  • Make your MEAN Stack App a Meteorjs App
  • Do you know what day it is? It’s #nodebotsday!
  • MEAN Stack: Create an AngularJS Directive with Yeoman
  • MEAN Stack – Modal Styling & AngularJS Form Validation – Day 23
  • When new technology is already obsolete
  • Take back control of your -g NodeJS packages on Windows
  • MEAN Stack – Deploy to Nodejitsu
  • MEAN Stack – Styling our AngularJS UI Customer Update Modal – Day 21
  • Set up a free MongoDB database using Compose.io
  • Getting started with the MEAN stack
  • MEAN Stack – Intro to Bootstrap Buttons, Glyphicons, Navbar – Day 3
  • MEAN Stack – Pass Customer Details to an AngularJS UI Modal – Day 20
  • AngularJS Material Design in your MEAN Stack
MEAN Stack – Answering Q’s with CSS & AngularJS directives – Day 28

MEAN Stack – Answering Q’s with CSS & AngularJS directives – Day 28

September 30, 2014 by bossable

In this video we’ll clean up our app and answer some questions sent through via email and posted on the Bossable.com site. We’ll fix some errors, pretty up our customers list, add a picklist using ng-options, and fix the alignment between channel and email.

We look at:
– Fixing some of the task errors identified by Grunt
– Using Chrome to test out adding some padding between the customer records in the customers list
– Adding a new class with padding to our customers css file
– Using ng-class to add some colours to the customers list based on the referred field.
– Increase the size of the icon on the customers list
– Adding drop down values to our app using ng-options
– The AngularJS documentation and examples for ng-options
– Adding ng-options to our controller and edit customers client view
– Testing our new picklist in the Update Customer Modal
– Fixing the alignment of fields between the Channel and Email fields.

View Details
Designing a new web app from scratch

Designing a new web app from scratch

April 13, 2015 by bossable

I’ll show you my approach to web design, with my first sketches for a new project that I’m working on. A requirements sketch, and some first wonky wire frames.

View Details
Make your MEAN Stack App a Meteorjs App

Make your MEAN Stack App a Meteorjs App

June 24, 2015 by bossable

Lets take the Mean Stack angular material design app created in the AngularJs Material Starter series, and move the code into a new Meteorjs app.

View Details
Functional Interaction Design – Part 6

Functional Interaction Design – Part 6

August 16, 2014 by bossable

An introduction to functional design. We’ll identify a subset of requirements and create an interaction flow. We’ll then look at each step in the interaction flow with: use cases, storyboards, wireframes and business rules.

View Details
Material Design Web App Thinking + MeteorJS & AngularJS 2

Material Design Web App Thinking + MeteorJS & AngularJS 2

April 15, 2015 by bossable

We go behind the scenes with early designs for a Material Design Web App that I’m working on, and some insight into the types of things that designers need to consider for UX that is created for a specific audience.

View Details
AngularJS Material Design Autocomplete

AngularJS Material Design Autocomplete

May 25, 2015 by bossable

In this tutorial video we’ll get fancy with Autocomplete! We’ll look at some sweet little tricks that you can use when you’re working with small datasets. Both Local and Remote/Server side sets of data can be handled in a similar once the data is available to AngularJS.

View Details
MEAN Stack – AngularJS & PassportJS Login Credentials – Day 7

MEAN Stack – AngularJS & PassportJS Login Credentials – Day 7

September 9, 2014 by bossable

We look at:
– The MEAN Stack Sign-in page
– Creating CSS styles
– Passport.js error messages
– Introduction to Bootstrap Alerts
– Exploring the Angular.js code on the Sign-in page
– Homework – Can you format the Sign-up page? Let me know how you go!

View Details
MEAN Stack – Client & Server Glue – Day 11

MEAN Stack – Client & Server Glue – Day 11

September 13, 2014 by bossable

In this video we’ll update the customers model, and look at how the model links through the various files and down to the angular customer controller. Then we’ll start making some updates to our angular controller.

We look at:
– Quick updates to the Customers Model
– The glue between the Customers Server Model and the Customers Server Controller
– The glue between the Customers Server Controller and the Server Routes
– The glue between the Server Routes and the Angular Factory Service
– The glue between the Angular Customers Factory Service and the Angular Customers Controller
– Lastly, we update the create function within the Angular Customers Controller to include the data that we want to pass to our Customers Server Model

View Details
What is GitHub? Open source tips and tricks

What is GitHub? Open source tips and tricks

July 14, 2014 by bossable

GitHub: has millions of public and private repositories, with thousands more being added everyday. GitHub repositories or ‘repos’, are used as a collaborative means of source control. Github allows a granular level of change control and code management. This means that code changes can be clearly identified, issues can be addressed, and new features can be requested, all in one place.

View Details
MEAN.js Transition to 0.4 – Part 2

MEAN.js Transition to 0.4 – Part 2

February 8, 2015 by bossable

In this video, we’ll take the app that we prepared as part of the 30 day mean stack app challenge, and move the customer module files across into the new 0.4 app structure.

View Details
MEAN Stack – Deploy to Azure

MEAN Stack – Deploy to Azure

April 9, 2015 by bossable

In this video we’ll look at: Nodejitsu is shutting down! We’ll deploy a mean stack app to Azure. We’ll look at how to create an Azure Web App, deploying to Azure using continuous source control, and fixing .NET errors following deployment.

View Details
Use cases and storyboards – Part 5

Use cases and storyboards – Part 5

August 4, 2014 by bossable

Once we’ve locked in a set of requirements, we can start designing! We’ll begin by creating a list of use cases, and storyboards (scenarios). Storyboards and wire-frames are often created in parallel, and changing one normally leads to changes in the other.

View Details
MEAN Stack – Answering Q’s with CSS & AngularJS directives – Day 28

MEAN Stack – Answering...

Designing a new web app from scratch

Designing a new web...

Make your MEAN Stack App a Meteorjs App

Make your MEAN Stack...

Functional Interaction Design – Part 6

Functional Interaction Design –...

Material Design Web App Thinking + MeteorJS & AngularJS 2

Material Design Web App...

AngularJS Material Design Autocomplete

AngularJS Material Design Autocomplete

MEAN Stack – AngularJS & PassportJS Login Credentials – Day 7

MEAN Stack – AngularJS...

MEAN Stack – Client & Server Glue – Day 11

MEAN Stack – Client...

What is GitHub? Open source tips and tricks

What is GitHub? Open...

MEAN.js Transition to 0.4 – Part 2

MEAN.js Transition to 0.4...

MEAN Stack – Deploy to Azure

MEAN Stack – Deploy...

Use cases and storyboards – Part 5

Use cases and storyboards...

Looking for the Latest Material Design Starter Series?

Jump, Pivot and Prioritise when your company is juggling multiple products

Jump, Pivot and Prioritise when your company is juggling multiple products

AngularJS Custom Actions for ExpressJS17:23

AngularJS Custom Actions for ExpressJS

MEAN Stack to Meteorjs – Server Side Email13:22

MEAN Stack to Meteorjs – Server Side Email

Make your MEAN Stack App a Meteorjs App23:50

Make your MEAN Stack App a Meteorjs App

MEAN Stack v.s Meteor – Similar but Different11:28

MEAN Stack v.s Meteor – Similar but Different

AngularJS Material Design Autocomplete12:59

AngularJS Material Design Autocomplete

AngularJS + Nodemailer Contact Form14:41

AngularJS + Nodemailer Contact Form

AngularJS Material Design Tabs, Forms & Toasts22:56

AngularJS Material Design Tabs, Forms & Toasts

Take back control of your -g NodeJS packages on Windows

Take back control of your -g NodeJS packages on Windows

Which JavaScript web framework should I use?

Which JavaScript web framework should I use?

Material Design Web App Thinking + MeteorJS & AngularJS 211:04

Material Design Web App Thinking + MeteorJS & AngularJS 2

3 Tips for your Material Design Wireframes04:05

3 Tips for your Material Design Wireframes

Designing a new web app from scratch05:06

Designing a new web app from scratch

MEAN Stack – Deploy to Azure07:25

MEAN Stack – Deploy to Azure

AngularJS Material Design Toolbar Tips and Tricks25:01

AngularJS Material Design Toolbar Tips and Tricks

AngularJS Material Design Side Project Sneak Peak04:23

AngularJS Material Design Side Project Sneak Peak

AngularJS Material Starter App in the Mean Stack

AngularJS Material Starter App in the Mean Stack

Design your Web Apps with Bootstrap Wireframes05:41

Design your Web Apps with Bootstrap Wireframes

AngularJS Material Design in your MEAN Stack12:01

AngularJS Material Design in your MEAN Stack

MEAN.js Transition to 0.4 – Part 210:35

MEAN.js Transition to 0.4 – Part 2

MEAN Stack 0.4.0 with vertical modules

Install MEAN.js 0.4.0 and run using Gulp10:09

Install MEAN.js 0.4.0 and run using Gulp

Create a vertical MEAN.js 0.4 crud module02:43

Create a vertical MEAN.js 0.4 crud module

MEAN.js Transition to 0.4 – Part 112:45

MEAN.js Transition to 0.4 – Part 1

MEAN.js Transition to 0.4 – Part 210:35

MEAN.js Transition to 0.4 – Part 2

Set up a free MongoDB database using Compose.io02:12

Set up a free MongoDB database using Compose.io

MEAN Stack – Side by Side with Version 0.4.013:02

MEAN Stack – Side by Side with Version 0.4.0

AngularJS Material Design in your MEAN Stack12:01

AngularJS Material Design in your MEAN Stack

AngularJS Material Starter App in the Mean Stack

AngularJS Material Starter App in the Mean Stack

Start the 30 Day Mean Stack Honolulu Challenge!

Jump, Pivot and Prioritise when your company is juggling multiple products

Jump, Pivot and Prioritise when your company is juggling multiple products

As a kid, I played a lot of Netball. I even went on to coach and umpire. If you’re familiar
AngularJS Custom Actions for ExpressJS 17:23

AngularJS Custom Actions for ExpressJS

In this tutorial video we'll look at using AngularJS resource services to communicate between AngularJS and your ExpressJS controllers.
MEAN Stack to Meteorjs – Server Side Email 13:22

MEAN Stack to Meteorjs – Server Side Email

How can you take the server side of your expressJS based, Mean Stack app, and turn it into a Meteor
Make your MEAN Stack App a Meteorjs App 23:50

Make your MEAN Stack App a Meteorjs App

Lets take the Mean Stack angular material design app created in the AngularJs Material Starter series, and move the code
MEAN Stack v.s Meteor – Similar but Different 11:28

MEAN Stack v.s Meteor – Similar but Different

Been wondering how you can leverage your MEAN Stack and/or AngularJS knowledge to create Meteor Apps? So what is Meteor
AngularJS Material Design Autocomplete 12:59

AngularJS Material Design Autocomplete

In this tutorial video we'll get fancy with Autocomplete! We'll look at some sweet little tricks that you can use
AngularJS + Nodemailer Contact Form 14:41

AngularJS + Nodemailer Contact Form

In this tutorial video we'll create a working contact form! Each time a user sends a message using the contact
AngularJS Material Design Tabs, Forms & Toasts 22:56

AngularJS Material Design Tabs, Forms & Toasts

We'll pick this video up from the end of the AngularJS Material Design Toolbar Tips and Tricks and extend it
Take back control of your -g NodeJS packages on Windows

Take back control of your -g NodeJS packages on Windows

It can be really frustrating when setting up your Windows environment for NodeJS, with packages like Yo, Grunt, Bower etc
Which JavaScript web framework should I use?

Which JavaScript web framework should I use?

Ever felt like: OMG! Which web framework should I use? How do I know if I'm picking the right one?
Material Design Web App Thinking + MeteorJS & AngularJS 2 11:04

Material Design Web App Thinking + MeteorJS & AngularJS 2

We go behind the scenes with early designs for a Material Design Web App that I'm working on, and some
3 Tips for your Material Design Wireframes 04:05

3 Tips for your Material Design Wireframes

Here are 3 quick tips that will help you create beautiful Material Design Wire-frames, with templates, icons, and colour combinations.
Designing a new web app from scratch 05:06

Designing a new web app from scratch

I'll show you my approach to web design, with my first sketches for a new project that I'm working on.
MEAN Stack – Deploy to Azure 07:25

MEAN Stack – Deploy to Azure

In this video we'll look at: Nodejitsu is shutting down! We'll deploy a mean stack app to Azure. We'll look
AngularJS Material Design Toolbar Tips and Tricks 25:01

AngularJS Material Design Toolbar Tips and Tricks

We look through the AngularJS Material Design starter app, with tips and tricks for Toolbars: including, layout="row", layout="column", md-tall, tabs
AngularJS Material Design Side Project Sneak Peak 04:23

AngularJS Material Design Side Project Sneak Peak

I've been playing around with Angular Material a lot lately, and I've been really impressed with how easy it is
AngularJS Material Starter App in the Mean Stack

AngularJS Material Starter App in the Mean Stack

In this post, we'll take the angular material starter app discussed during ng-conf 2015, and apply it to a MEAN
Design your Web Apps with Bootstrap Wireframes 05:41

Design your Web Apps with Bootstrap Wireframes

In this video we'll look at how you can quickly and easily create professional looking wireframes using Adobe Illustrator, and
AngularJS Material Design in your MEAN Stack 12:01

AngularJS Material Design in your MEAN Stack

In this video we'll add the angular-material package to meanjs, and set up the mean stack to use the angular
MEAN.js Transition to 0.4 – Part 2 10:35

MEAN.js Transition to 0.4 – Part 2

In this video, we'll take the app that we prepared as part of the 30 day mean stack app challenge,

Jump, Pivot and Prioritise when your company is juggling multiple products
AngularJS Custom Actions for ExpressJS17:23
MEAN Stack to Meteorjs – Server Side Email13:22
Make your MEAN Stack App a Meteorjs App23:50
MEAN Stack v.s Meteor – Similar but Different11:28
AngularJS Material Design Autocomplete12:59
AngularJS + Nodemailer Contact Form14:41
AngularJS Material Design Tabs, Forms & Toasts22:56
Take back control of your -g NodeJS packages on Windows
Which JavaScript web framework should I use?
Material Design Web App Thinking + MeteorJS & AngularJS 211:04
3 Tips for your Material Design Wireframes04:05
Designing a new web app from scratch05:06
MEAN Stack – Deploy to Azure07:25
AngularJS Material Design Toolbar Tips and Tricks25:01
AngularJS Material Design Side Project Sneak Peak04:23
AngularJS Material Starter App in the Mean Stack
Design your Web Apps with Bootstrap Wireframes05:41
AngularJS Material Design in your MEAN Stack12:01
MEAN.js Transition to 0.4 – Part 210:35

Already Built an App? Lets Deploy!

MEAN Stack – Prepare the Build Package for Deployment – Day 306:18

MEAN Stack – Prepare the Build Package for Deployment – Day 30

MEAN Stack – Deploy to Heroku – Day 30(i)6:21

MEAN Stack – Deploy to Heroku – Day 30(i)

MEAN Stack – Deploy to Digital Ocean16:16

MEAN Stack – Deploy to Digital Ocean

MEAN Stack – Deploy to Azure07:25

MEAN Stack – Deploy to Azure

Looking for an intro to functional design?

Web App development: how do you build a web app?

Web App development: how do you build a web app?

Analyse and Identify the Problem – Part 1

Analyse and Identify the Problem – Part 1

Business Processes and Workflows – Part 2

Business Processes and Workflows – Part 2

Business Goals, Feasibility and Fit Gap – Part 3

Business Goals, Feasibility and Fit Gap – Part 3

Behaviour Driven Requirements – Part 4

Behaviour Driven Requirements – Part 4

Use cases and storyboards – Part 5

Use cases and storyboards – Part 5

Functional Interaction Design – Part 6

Functional Interaction Design – Part 6

Discussions

  • bossable
    After I install crud-module with menu, I get a bla...

    PJJanuary 21, 2017 at 9:58 am

  • bossable
    Shristi: Very good job. I ran into Oauth proble...

    PJJanuary 20, 2017 at 4:33 am

  • bossable
    Great tutorial! Can you make one for account va...

    Patricio VargasDecember 21, 2016 at 5:36 pm

  • bossable
    Thumbs up :)

    aljazerzenDecember 4, 2016 at 12:26 am

  • bossable
    Hi, I saw the video and its very useful, i need a ...

    PradeepOctober 3, 2016 at 9:12 pm

Tags

analysis Angular Angular.js app Arduino Bootstrap build business rules challenge CSS data-flow design diagram Express Feasibility functional GGAcademy git GitHub goals Jasmine licences Lifecycle Material Design MEAN Methodology MongoDB Mongoose Node nodebotsday open source pivot requirements Software startup storyboard Stripe tech use case UX WebStorm wireframe workflow Yeoman

New Posts by email!

Get the latest posts direct to you via email

Bossable - From idea to boss, with fun and friendly tutorials and videos
  • © Bossable 2015
  • Tech
  • Mean Stack
  • Contact Us
  • Privacy
  • Terms
  • Close
  • Latest
  • Store
  • Mean Stack
  • 30 Day MEAN Stack Challenge
  • Web Apps
  • Tech
  • Say Hello