Shristi Sharma

Date Title Views Comments

Date
Title
Views
Comments

Getting started with the MEAN stack

14439 97

The hardest part of web development is not knowing where to start, and over thinking the process. Once you’ve jumped over that hurdle, you’ll wonder what you were so worried about! This post goes through the process of installing the MEAN Stack (MongoDB, Express.js, Angular.js, Node.js).

AngularJS Material Starter App in the Mean Stack

6012 15

In this post, we’ll take the angular material starter app discussed during ng-conf 2015, and apply it to a MEAN Stack App.

AngularJS Material Design Toolbar Tips and Tricks

5433 0

We look through the AngularJS Material Design starter app, with tips and tricks for Toolbars: including, layout=”row”, layout=”column”, md-tall, tabs and themes.

The 30 Day MEAN Stack Honolulu Challenge

5416 13

30 jam packed videos with something that you can do with your MEAN Stack app, in less than 15 minutes. A great example and tutorial challenge for anyone new to the mean stack.

Overview of the MEAN Stack App Structure Day 1

5228 0

An overview of the key files and folders in the MEAN Stack App Structure. What is the mean stack? What’s in folders like: Public, App, Config, Node_Modules?

MEAN Stack Intro to Bootstrap Grids Day 2

3939 7

We look at:
– Our App Designs (use cases, storyboard, and wireframes)
– We’ll then take the design and split it into a Bootstrap grid layout.
– Locating the home page in the MEAN Stack app structure
– We start building a responsive web app using Bootstrap!

AngularJS Material Design Tabs, Forms & Toasts

3741 8

We’ll pick this video up from the end of the AngularJS Material Design Toolbar Tips and Tricks and extend it out further to get working Tabs with external templates, and ui-router, we’ll also look at forms, and toasts.

AngularJS Material Design in your MEAN Stack

3532 11

In this video we’ll add the angular-material package to meanjs, and set up the mean stack to use the angular material toolbar header.

MEAN Stack – Intro to Bootstrap Buttons, Glyphicons, Navbar – Day 3

2872 2

We look at:
– Continuing to build based on our App Design (use cases, storyboard, and wireframes)
– An Introduction to Bootstrap Buttons
– An Introduction to Bootstrap Glyphicons
– A Quick Intro to Chrome Developer Tools
– An Introduction to Bootstrap NavBars
– Changing the color of the MEAN Stack NavBar
– Changing the Brand Label on the NavBar

Install MEAN.js 0.4.0 and run using Gulp

2698 31

It’s time to take MEAN.js version 0.4.0 for a spin! We’ll go through the installation process using the new generator, and run the new app using gulp.

MEAN Stack – Customer CRUD Module with Yeoman – Day 9

2687 17

In this video we’ll start to look at the Customers Pages, and create our very own Customer CRUD Module using the yeoman generator.

We look at:
– The Customers Pages, including the use case, storyboard and wireframes
– Backing up our work using Git
– The different types of generators available with the MEAN Stack
– Using the Yo scaffolding tool to generate a Customer CRUD (create, read, update, delete) module

MEAN Stack – Social Accounts to Sign-in with Facebook – Day 5

2603 7

We’re ready to move onto the Login Page! In this video we’ll look at the MEAN Stack App Login Page, and look at how to set up a MEAN App with Passport.js Facebook authentication.

MEAN Stack – Intro to AngularJS ngRepeat & ngClass – Day 4

2333 9

We’ll look at two Angular directives, looping through an array using ng-repeat, adding some dynamic styles using ng-class and add them to our MEAN Stack

We look at:
– Two Angular Directives
– Looping through an array using ng-repeat
– adding some dynamic styles using ng-class

Functional Interaction Design – Part 6

2279 2

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.

MEAN Stack – Responsive Bootstrap Login Forms – Day 6

2265 0

In this video we’ll look at changing the MEAN App Login Page, and start to get it to look like our Login page Wireframe.
We look at:
– The MEAN Stack Sign-in page
– The process for changing the details on the sign-in page
– Introduction to Bootstrap Input Groups
– Introduction to Bootstrap Form Groups and Button layouts

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

2255 18

In this video we’ll deploy our app to Heroku

We look at:
– Downloading the Heroku toolbelt from https://toolbelt.heroku.com/
– Signing up to Heroku from https://www.heroku.com/
– Deploying to Heroku

MEAN Stack – Modelling with Mongoose – Day 10

2026 2

In this video we’ll take a look at the Mongoose package, and set up our customers model that we’ll use to create our customers MongoDB collection.

We look at:
– The Customers Pages, with a focus on the create customer storyboard
– The Mongoose website
– The Mongoose documents relating to ‘Defining your schema’
– Setting up our Customers model, based on our storyboard

AngularJS Material Design Autocomplete

1987 5

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.

MEAN Stack – AngularJS & PassportJS Login Credentials – Day 7

1966 4

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!

MEAN Stack – AngularJS Models in Bootstrap Forms – Day 12

1961 0

In this video we’ll take the changes that we’ve made to the Angular Customers controller, and start mapping the Angular Model to the Create Customer Page. We also begin to style our Create Customer Page based on our Wireframes.

We look at:
– The Yo generated Create Customer Page, and how we find it using the Angular Routes
– Why the page wouldn’t work because we removed the ‘name’ field from our Schema
– Identify the required bootstrap grid based on our wireframes
– Begin to style the Create Customer Page based on our wireframes
– Some tips and tricks on styling Bootstrap for mobile devices
– We map the Angular customer model to our inputs

bossable