Build an MVP with AngularJS + FireBase by cloning TaskRabbit

Leotrieu

Leo Trieu

Ninja icon

Full Source Code

Discussion Support

About

TaskRabbit is an online and mobile marketplace that allows users to outsource small jobs and tasks to others in their neighbourhood. Users name the task they need done, name the price they are willing to pay, and a network of pre-approved contractors bid to complete the job.

To learn with this project, it requires students knowing a bit of basic Javascript, HTML and Bootstrap.

[NOTE]: This project was built with the Firebase's legacy version so if you don't have legacy Firebase account, you shouldn't take this project for now. It will be updating with Firebase 3 (new version) soon.

What skills will we learn during this project?

  • Learn AngularJS with practical code & design.

  • Learn how to work with Firebase for real-time updates.

  • Combine Angular and Firebase to create an MVP for your Startup.

  • Learn to design your database for Firebase effectively.

  • Secure your application with Firebase Security Rules.

  • How to deploy and host this app Live on Firebase host.

  • This version was built with Angular 1.3.8, AngularFire 0.9.1; Firebase 2.1.0

What features will we build in this project?

  • Real-time database with Firebase 2.

  • Sign In/Sign Up new user with email and password.

  • Notification system with Toaster.

  • Real-time listing all available tasks from database.

  • Real-time task creating/editing.

  • Real-time offer making.

  • Real-time offer accepting.

  • Real-time comment system.

  • Personal Dashboard showing tasks and offers.

  • Sending transactional emails when a offer accepted.

  • 51d4780a028c7182c5cc4d78462808c0

    digimax

    I got a job out of this in 2015. Thanks Leo.

  • Photo

    Ashenafi Gichamo

    WASTE OF TIME!!!!!!!! Needs to be updated.

  • 9fa75a947abc597f3470fbffc2adaf2f

    Erdem İnanç

    waste of time!!! not updated.

  • Picture

    Nazmi Asri

    Great course. I can help for those who don't have the latest firebase code.

  • 85f503c09710a36a03c263cc8a990ac9

    Huan Hoang

    It's a great course but to tutorial is obsolete. I could say it's useless now. Please update the tutorial. This review is low because you haven't caught up with new firebase version.

  • E6dbbdefca2a4a372363e47a8aa4db2f

    Kevin Hein

    This is by far the best course I have ever come across.

  • Photo

    Roslan Ramli

    Great approach to learning Firebase. For the version 2 it will be great if you can incorporate Facebook login, which most app are doing nowadays. It is a good sell.

  • Picture

    Aakash Chandrakar

    Excellent course!!

  • Cb1d9c5c7f16f4b0f2534a8806e350f5

    Chris

    I love what the course is trying to achieve, but at this stage numerous errors still exist in the Version 2 code and the changes that have been made are not explained at all. This might not be a serious issue for experienced developers but this course is aimed at people like me - with limited experience. I had no trouble looking up api / documentation which outlaid changes between different versions of AngularJS, AngularFire and Firebase, however errors persist and I have put this to the side until the tutorials are updated.

  • Photo

    Julien Reszka

    Doesn't work. Errors and the most crucial parts like security and authentication aren't well explained at all.

  • Photo

    Jesus Herman

    I think now that you are promoting a kickstarter for another course, it makes even more sense to update this one so we can all do it

  • Photo

    Daniel McDonald

    I agree with some of the comments about cutting and pasting too much code too quickly. Also it seems that this course is outdated after Firebase has been updated since it was created. Lots of issues with user authentication in particular.

  • Picture

    Adil Dostmohamed

    Hi Leo, this is a great background into interacting with Firebase, but as has been pointed out given that firebase has been updated so that it doesn't support $firebase and has updated authentication methods, will there be any updates to the tutorials?

  • Photo

    Philip Johnson

    Pretty good, but I think he moves too fast. Pasting in code without explaining why he's doing what he's doing or how angular works makes this really tough to translate into building your own app.

  • Picture

    Christian Duncan

    A really great course, but AngularFire has been updated, and the $firebase service removed. Are you planning to update this tutorial to support AngularFire 1.x.x ?

  • Photo

    Laurentiu Morariu

    This is very good. One of the best video tutorials and it's colorful! By the way, how would we add pagination so that the page doesn't go on forever? Thank you

  • Picture

    Daryl Bleach

    its a really good course, only thing I would change is that you paste in code very quickly with no explanation of what you're doing. I like to learn by typing the code I'm implementing while learning about what the code I'm typing is doing. At the moment I constantly have to pause the video to write out what I'm doing and then google what I'm typing in to understand it better.

  • Photo

    Suraj Bhandari

    Good Course !

  • 89c1656dc21c5a7d98eb8aeff93ec3e5

    Cian Ellwood

    Amazing course, learned more in here about security, web applications and building solid well functioning applications for anything than my past 4 years in college.

  • Picture

    Karl Taylor

    This is a super good course. I feel like I've only just learnt the icing on the cake but the content is great. I wish there was a bigger discussion on it since I believe it's so well adapted into different ideas.

  • 4457883?v=3

    Caleb Sylvest

    In the past I've spent hours learning languages like JavaScript and PHP through other code schools, but only the theory behind the language without practical examples of how to implement what I learn. Leo's courses are great because they take the opposite approach, build real products and learn the theory as you go. Leo, thanks so much for sharing your knowledge with us!

  • Db9695ddc69b57992033b88a1fe32b16

    mervandi

    i really like the tutorials so much..especially the angularjs ones..thank you..

  • Ffea06b1d60c840a342744eba280b926

    Johnathan Myers

    I've done all the other learn to code websites, and while they teach you the theories of how to code, I still was unsure how to actually make anything. That is, until I found this site. Leo helped me take my previously learned Javascript knowledge and apply it to building a real web app! This site is now on my favorites! It's all making sense now. And having the email/chat for help is great! Thanks so much Leo! You really should have a donation link to keep these great videos coming.

  • 1eb469912bdd42a3be680d5a72008c56

    Eugenie Doherty

    Thank you so much. This is very good course.

  • 90022cb8d144e291dc0228b866c168a9

    Juliano Padilha

    Great course! I learned a lot from the classes of Leo and the tips that he passed. Certainly that was my best learning experience in programming. Congratulations Leo! : D

  • B161a056db40a6342d91c93ad98cab75

    Fabrice Rajaofera

    Great tutorial, I learned a lot on future of Web App. Thanks a mil, keep the good work. Look forward to next one...

  • Photo

    Nam Luu

    Just finish task ninja project and want to say thank you very much. I really appreciate all the hard work you’ve done to sharing. I have learnt so much, and it’s all thanks to you!

  • 1919735?v=3

    Mitch Cail

    thumbs up

  • Picture

    Juan Pina

    Great videos and great content, thanks for this!

  • F0c52e0f53e07a1f908b14d0816b95bc

    Ayoola Solomon

    it was awesome

  • 198add8136ad56424f0c05b8cb771c49

    slamdon

    so great

  • Photo

    neo funcOne

    Gr8 job Leo! A project in Meteor/React would be a game changer! Btw, you might wanna add a 'Donate' button in your site so that people can also contribute as they wish for your hard work.

  • F50feb2c661baf3b12366d735e52d539

    hennay

    heavy ... something you can picasso and make your own art ... puuuuuun

  • Picture

    Omid Ahourai

    Wow, seriously thanks Leo! Your explanations are super easy to understand and comprehensive. I learned a lot more than what was advertised. You should sell your tutorials for money!

  • 11515056?v=3

    Hannah Wright

    This is great and the videos are extremely helpful. I'm having a blast. Many thanks for your work!

  • Picture

    Kyle Hikerdj

    How to make this course better: Have the instructor talk to the students some at the beginning of lectures. Have a lecture outline and/or module goals so we understand why we're going to accomplish in each section. Have a bit of enthusiasm in your voice.

  • Picture

    Pranay Joshi

    An incredibly helpful course on building an actual app! Most people out there touch on the major features and then leave you hanging to figure out the details that actually matter when creating a full app. Not Leo! He will guide you through each and every step and even explain the AngularJS way of doing things. I am very impressed with the tutorial and wish him success for the future! One thing that may be a welcome addition (or enhancement) to the TaskRabbit app would be the integration of a payment system. It seems like a logical extension to the app as it stands right now.

  • 7098c3150cff88f20599a4e81ce6edee

    Rattanak Chea

    I am halfway through the course, and I am very impressed with the instructor's teaching quality, clear explanation, course structure and preparation. Unlike other websites, you will learn something from the ground up by adding new functionality to the web application, re factoring the code, fixing the bugs which contribute to the learning experiences and application life cycle. I like how Leo always gives motivation after finish implementing functionality - "Congratulation, you just finished your hard work. Great job".

  • 8a5c4d2aa9891f14a5879bfd7278b715

    shyaam deshmukh

    I was looking for RoR courses here like many others and am a newbie when it comes to AngularJS and Firebase Thanks to Leo's Ninja course, I think I would like to learn more of these technologies. Many thanks Leo.

  • 4321e43915f27e8480fa0da425f0f052

    Serg

    This is the first angular tutorial that I've seen very well explained and planned. Nowadays, It is very hard to find this kind of videos online or written so I applaud Leo for this awesome job. It seems that he not only dedicated his own time to share with the community but with such detail that makes anyone pick up the language even if you've never seen the angular api before. I congratulate Leo and hope he successfully can continue working through his own projects.

  • 6347f95c3fb2a63b1280c252bff0ec2e

    Moises Elias Valera

    TaskNinja is an excellent course to start with Firebase, thanks Leo! i've learned a lot with it....

  • 596d5d07cd498875dab9fbe784770802

    Dean Moyes

    I was expecting the Ruby on Rails one as I didn't know anything about Firebase but this TaskNinja is freaking amazing. Thanks a lot Leo for having this project on your site. I love your idea behind this startup. Keep it up bro!

  • Starter

    The MVP is a great way to test your riskiest assumption and shorten the time it take to get customer feedback. It saves you time and money, but it’s not an excuse to build a bad product. Building an MVP means getting the core features that are...

    • What are we going to build in this project? 4:54  
    • Setting Up 4:30  
  • Task 1: Posting & Browsing Task

    The requirement for this first task is quite simple. First, we create a view called “post” which is where you’re gonna post a task with task title, description and how much that task for. Second, we also need to display list of all tasks that we...

    • What are we going to build in this task? 1:08  
    • Working with Views and Controllers 8:47  
    • Working with Firebase 12:25  
  • Task 2: Authentication

    in this one, we’re gonna create Authentication system so people can register new account and login to our application. We’ll do some restrictions so only logged in user can post a new task or edit an existing one. Once you logged in, you can see...

    • What are we going to build in this task? 1:28  
    • Create Nav Bar 6:43  
    • Create Authentication 23:04  
    • Adding notification with Toaster 3:22  
  • Task 3: Refactoring Browsing Task

    We start off this task by refactoring the way we browsing tasks. Task list is now on the left side and when you click on a single one, task details would be displayed on the right side. Also, we’re going to add poster’s gravatar and task’s status...

    • What are we going to build in this task? 2:04  
    • Creating post and edit Modal 4:46  
    • Refactoring Browsing page 9:35  
    • Working with Services 19:02  
  • Task 4: Adding comment function

    The challenge for this task is quite simple and straightforward. We’re gonna build a comment function for our application and it is real-time which is very cool. If you’re not signed in, you can’t see the comment button and therefore, you’re not...

    • What are we going to build in this task? 1:41  
    • Denormalisation data in NoSQL world 3:10  
    • Creating mark-up for Comment 2:11  
    • Creating comment service 2:38  
    • Update Browse controller 5:33  
  • Task 5: Adding Offer function for Runner

    Welcome to the most interesting task of the whole project. The reason I’m saying that is because we’re gonna deal with a little bit complex business rules for the market place that we’re building. So in this task, we’re gonna create a function...

    • What are we going to build in this task? 2:15  
    • Firebase tree structure for this task 0:51  
    • Creating offer function for Runners 4:32  
    • Creating offer service 1:44  
    • Implement Offer service in Browse controller 12:16  
    • Creating Cancel Offer function for Poster 4:12  
  • Task 6: Adding Accept function for Poster

    Following up with the previous task where we were building a function allowing runners to make offer for task they would like to do. In this task, we’re gonna create function for task poster to review a list of offers and accept one of those. Once...

    • What are we going to build in this task? 2:46  
    • Accepting offer 4:50  
    • Completing Task 3:49  
  • Task 7: Dashboard

    In this task, we’re gonna build the dashboard for login user. Once you logged in, it will direct you to your dashboard. Basically, this dashboard simply shows all of your tasks. It can be tasks that you posted or ones that you were assigned. You...

    • What are we going to build in this task? 3:43  
    • Update Task & Offer Services 5:39  
    • Create Dashboard mark-up and Service 3:42  
    • Create Dashboard Controller with authentication updated 6:25  
  • Task 8: Zapier and transactional emails

    This task is quite easy but interesting. You don’t have to write much code but getting cool things for real-life projects. Now when we have new user signup, we want to send a welcome email to their email address. The second transactional email...

    • What are we going to build in this task? 2:25  
    • Setting up Mandrill & Zapier 6:11  
    • Setting up Zapier for Notification action 8:18  
  • Task 9: Security

    So far, we have done all the functions we designed for our very first MVP and everything working perfectly. We’re very happy with that and we believe that it’s time to get it online. If that is the case then the very first question would be: “Is...

    • Let's hack task-ninja by using cURL 5:48  
    • Building Firebase security rules 7:57  
    • Apply and Test 2:03  
  • Task 10: Deploying & Hosting

    Finally, we can get our MVP live to show the world. It’s super easy to deploy and you can host your app for FREE with just 4 simple steps.

    • Deploying & hosting on Firebase for FREE 4:34