Build a simple project in Meteor

Build a simple address book in Meteor in a step by step approach
4.3 (13 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
57 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 73
  • Length 3.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2016 English

Course Description

In this course we will be using Meteor and Angular to create a simple project.

We will build an address book step by step and we will implement:

  • simple UI using a tabel layout and a card-based layout using Bootstrap
  • flash messages
  • user authentication with accounts-password
  • routes with FlowRouter and restricting access for logged-in users only
  • setting up a database schema and using it to generate insert and update forms
  • setting up search functionality
  • using Meteor methods and publication/subscription
  • using Angular with Meteor
  • adding custom directives in Angular


As requirements, you should have:
- Meteor already installed
- a code editor of your choice
- basic knowledge of HTML / CSS / JavaScript

Timeline:

  • 22.03.2016: first version
  • 13.04.2016: Angular section added
  • 20.04.2016: revised for Meteor 1.3

What are the requirements?

  • Download and install Meteor
  • Download and install a code editor of your choice

What am I going to get from this course?

  • Create a simple project with Meteor
  • Implement a database schema
  • Implement a router and secure access to pages
  • Implement accounts
  • Implement a search engine
  • Use methods to add / edit / remove data
  • Use Angular with Meteor
  • Add custom directives in Angular

What is the target audience?

  • This course is suitable for people with basic familiary with Meteor and Atmosphere
  • The Angular section is suitable for those with basic familiarity with Angular

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
01:34

Welcome to the introductory video.

Section 2: Meteor 1.3 Section
02:39

In this video, we will setup our Meteor application.

01:55

In this video, we will take a look at the special Meteor folder: imports.

03:06

In this video, we will setup the accounts and basic routing for our application.

01:07

In this video, we will create our template for adding contacts.

03:07

In this video, we will create the form for adding contacts.

02:39

In this video, we will implement our event handler for submitting a new contact.

02:21

In this video, we will implement a method for saving contacts in our database.

01:08

In this video, we will create our template for showing contacts.

02:31

In this video, we will setup our data subscription.

02:11

In this video, we will work on the view for displaying contacts.

02:41

In this video, we will continue working on the view for displaying contacts.

01:34

In this video, we will work on the method for deleting contacts.

01:04

In this video, we will create our edit template.

02:01

In this video, we will work on the single contact subscription for our edit template.

04:24

In this video, we will work on the view for editing a contact.

02:08

In this video, we will work on the methods for handling contact editing.

04:11

In this video, we will continue working on the methods for handling contact editing.

01:06

In this video, we will create our search template.

01:56

In this video, we will add the search functionality.

02:42

In this video, we will work on our search view.

02:29

In this video, we will extend our search functionality by adding a custom property.

00:51

In this video, we will fix a small issue we have with our edit contact date implementation.

02:48

In this video, we will add some finishing touches to our application.

Section 3: Meteor Section Conclusion
00:41
Nothing much left to say but a big 'Thank you' !
Section 4: Extra Meteor Section
04:19

In this video, we will implement a database schema.

04:54

In this video, we will add a QuickForm to insert contacts.

03:47

In this video, we will add a QuickForm to edit a single contact.

Section 5: Angular Section
02:13

In this video, we will setup our Meteor application along with the NPM modules.

02:09

In this video, we will start our Angular application and create a home page.

03:06

In this video, we will take a quick look at the special Meteor folder 'Imports' and add also a navbar.

04:56

In this video, we will add Angular UI Router to our app.

01:22

In this video, we will add the Accounts UI package to our app.

01:59

In this video, we will create our first directive for adding contacts.

01:59

In this video, we will work on the draft for our add contact form.

01:24

In this video, we will create the Method for adding contacts.

02:53

In this video, we will extend our form for adding contacts with some more fields.

04:10

In this video, we will finish the code for saving contacts.

02:54

In this video, we will take a brief look at some basic Angular validation.

01:36

In this video, we will create the list contacts directive for our app.

01:33

In this video, we will setup our publication and subscription for contacts.

03:54

In this video, we will create our view for displaying contacts.

01:42

In this video, we will work on the Method for removing contacts.

01:39

In this video, we will create the edit contact directive for our app.

04:34

In this video, we will create our view for editing a single contact.

01:38

In this video, we will setup our publication and subscription for editing a single contact.

05:39

In this video, we will create our Methods for editing a contact.

01:25

In this video, we will create the search directive for our app.

04:22

In this video, we will work on the view for our search directive.

02:56

In this video, we will work on our search controller and publication.

01:52

In this video, we will work on hiding links in our navbar from unregistered users.

01:54

In this video, we will work on restricting access to our app for unregistered users.

Section 6: Archived: Meteor 1.2 Section
01:50

In this video, we will create a new Meteor project and set up a first template.

04:21

In this video, we will add the Bootstrap framework, as well as a basic layout including a hero unit and a navbar.

01:51

In this video, we will add FlowRouter to our project and modify the templates accordingly.

02:20

In this video, we will add the Meteor Accounts feature with consideration to our Bootstrap layout so that the login/register windows will be styled in line with our application so far.

03:57

In this video, we will add 2 Meteor packages: collection2 and autoform, and we will be using these to first define a Schema for our Mongo collection, and then to generate a basic insert form.

03:45

In this video, we will extend the Schema for our database, and modify the form to we have to not show fields which have values automatically calculated upon submit.

05:59

In this video, we will finish our database Schema by using sub-documents to store data, and we will also add a datepicker in our form.

02:17

In this video, we will look into another way of generating the insert form using the autoform package and the Schema we have set up.

02:38

In this video, we will set up the rules to allow inserting contacts in our database.

06:04

In this video, we will work with the data from the server by setting up a publication from Meteor and a subscription on the client side.

06:36

In this video, we will set up the table for displaying our contacts, as well as refine the data which is included in the publication from the server.

03:38

In this video, we will add the classic edit and delete buttons for our contacts and also set up the delete feature using a Meteor Method.

08:15

In this video, we will work on implement the Edit functionality by setting up another publication and subscription pair, and also improve the autoform a bit to redirect automatically when a form is submitted successfully.

05:26

In this video, we will add a bit of CSS, integrate the momentjs library and create a helper to display date values better as well as fix our database Schema createdAt field.

04:56

In this video, we will implement automatic redirect upon login and logout events, and also flash messages using the toastr library.

03:35

In this video, we will restrict access to our application to only permit logged-in users to view and interact with data.

07:29

In this video, we will begin working on our search contacts feature and integrate the EasySearch package into our project.

Also we will set up the initial template for searching.

06:07

In this video, we will finish the search template and will proceed with a card-based layout instead of the table-layout used in our list view.

07:30

In this video, we will add another search filter into EasySearch.

03:34

In this video, we will remove the Bootstrap, Bootcards and toastr packages used previously and integrate the direct files from their respective websites.

Also, we will add a theme to Bootstrap.

Section 7: Conclusion
00:17
Nothing much left to say but a big 'Thank you' !

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Ciprian Munteanu, Instructor

Hi, my name is Ciprian and I am a self-taught programmer and learning enthusiast. Having started working in a freight forwarding company doing financial analysis in Excel, I knew there had to be some better way to approach working with data.

This sparked my interest in programming and I started learning all I could. Some resources were very good, others not so much.

My expertise is currently in web technologies: HTML, CSS, JavaScript, Ruby on Rails and I would like to share what I know with others.

I'm always working on side projects and keeping up with the latest technology trends because it's my passion.

I intend on regularly reviewing the course feedback and adding new features as they become relevant or are requested.

You can always ask me personally if you get stuck or have anything at all I can help you with.

So please check out my courses below and I'll see you there!

Ready to start learning?
Take This Course