Build a simple project in Meteor
4.0 (14 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.
67 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Build a simple project in Meteor to your Wishlist.

Add to Wishlist

Build a simple project in Meteor

Build a simple address book in Meteor in a step by step approach
4.0 (14 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.
67 students enrolled
Last updated 4/2016
English
Current price: $10 Original price: $20 Discount: 50% off
20 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 50 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
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
View Curriculum
Requirements
  • Download and install Meteor
  • Download and install a code editor of your choice
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
Who 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
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 73 Lectures Collapse All 73 Lectures 03:44:08
+
Introduction
1 Lecture 01:34

Welcome to the introductory video.

Preview 01:34
+
Meteor 1.3 Section
23 Lectures 52:39

In this video, we will setup our Meteor application.

Creating our Application
02:39

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

Imports Folder
01:55

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

Setup Routes and Accounts
03:06

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

Creating the Add Template
01:07

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

Preview 03:07

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

Add Contact Submit Event
02:39

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

Add Contact Method
02:21

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

Creating the List Template
01:08

In this video, we will setup our data subscription.

List Contacts Subscription
02:31

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

Preview 02:11

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

List Contacts View Part 2
02:41

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

Delete Contact Method
01:34

In this video, we will create our edit template.

Creating the Edit Template
01:04

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

Edit Contact Subscription
02:01

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

Edit Contact View
04:24

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

Edit Contact Methods Part 1
02:08

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

Preview 04:11

In this video, we will create our search template.

Creating the Search Template
01:06

In this video, we will add the search functionality.

Adding Search Functionality
01:56

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

Search Contacts View
02:42

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

Search by Contact Type
02:29

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

Edit Contact Date Fix
00:51

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

Finishing Touches
02:48
+
Meteor Section Conclusion
1 Lecture 00:41
Nothing much left to say but a big 'Thank you' !
Meteor Section Conclusion
00:41
+
Extra Meteor Section
3 Lectures 13:00

In this video, we will implement a database schema.

Adding a Schema
04:19

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

Adding a QuickForm to Insert Contacts
04:54

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

Adding a QuickForm to Update Contacts
03:47
+
Angular Section
24 Lectures 01:03:49

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

Meteor Packages and NPM
02:13

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

Setup Angular and Home Page
02:09

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

Imports Folder and Navbar
03:06

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

Setup Angular UI Router
04:56

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

Accounts
01:22

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

Creating the Add Directive
01:59

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

Add Contact Form - First Draft
01:59

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

Add Contact Method
01:24

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

Extending the Add Form
02:53

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

Preview 04:10

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

Just a bit of Validation
02:54

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

Creating the List Directive
01:36

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

List Contacts Subscription
01:33

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

List Contacts View
03:54

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

Delete Contact Method
01:42

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

Preview 01:39

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

Edit Contact View
04:34

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

Edit Contact Subscription
01:38

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

Edit Contact Methods
05:39

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

Creating the Search Directive
01:25

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

Preview 04:22

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

Search Controller
02:56

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

Navbar Controller
01:52

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

Routes Access
01:54
+
Archived: Meteor 1.2 Section
20 Lectures 01:32:08

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

Creating a New Project
01:50

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

Adding Bootstrap and a Basic Layout
04:21

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

Adding FlowRouter
01:51

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.

Login and Signup
02:20

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.

Defining a Schema and Setting up the Add Form
03:57

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.

Improving the Collection Schema
03:45

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.

Finishing the Schema and Adding a Datepicker
05:59

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.

Preview 02:17

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

Preview 02:38

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.

Setting up a Subscription and Listing Contacts
06:04

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.

List view for the Contacts
06:36

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.

Adding Edit and Delete Buttons
03:38

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.

Editing Contacts
08:15

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.

Fixing the CSS, Date Display and createdAt Field
05:26

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

Login and Logout Redirect and Flash Messages
04:56

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

Restricting Access to Routes
03:35

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.

Adding Easy Search
07:29

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.

Finishing the Search View
06:07

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

Adding a Category Filter
07:30

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.

Adding the Source Files and Bootstrap Theme
03:34
+
Conclusion
1 Lecture 00:17
Nothing much left to say but a big 'Thank you' !
Conclusion
00:17
About the Instructor
Ciprian Munteanu
4.6 Average rating
307 Reviews
9,622 Students
3 Courses

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!