Build Etsy mobile app with Ionic and Angular

Carol

Carol Louie

Etsy

Full Source Code

Discussion Support

Course Focus:

Learn to create hybrid native apps using Ionic and AngularJS. Learn to create something from nothing... fast and real!

What are we going to build:

In this tutorial I will walk you through how to recreate Etsy, an online marketplace for artists to sell their handmade products. Users can either post their own creative work or can scroll through the great crafts of others. Once you have completed this starter version of the project, you will have the foundational basics to develop any mobile app that uses photos as the major focus, i.e. Instagram, Flickr, etc.

Why Ionic for Hybrid App Development:

ionic is an open source HTML5 mobile framework for building cross platform hybrid native apps. This means it enables the fast and easy use of web-based technology (ie. HTML, CSS, Javascript) to build highly interactive mobile apps for both Android and iOS. It also lets us access some of the phone's native functionality (like using the camera on their phone!)

You will walk away with these skills

  • How to setup an Ionic application.

  • How to link up Firebase as your database to hold your information with real-time updates.

  • How Ionic applies the Model View Controller Framework and how Angular applications work.

  • How to install a plugin to use the native camera on your phone.

Prerequisites/Requirements:

While it is helpful to have an understanding of AngularJS and Javascript, it is not necessary. I will take you through building the application step-by-step, and as you build Etsy, you will grow the skill you need to extend this application and make it your own!

  • Bed6f02c5cb682ea8067283571006b61

    Praveen Chandramohan

    Great Thanks to you. I have completed this tutorial with end to end and made the app working 100% as what you have shown at last part. Also I have updated the project with the latest firebase version. I suggest you to add one more video to this tutorial to show the latest added photo at the top in dashboard and to redirect to photo-detail page properly when we try to upload the photo for second time.

  • 274cda20b6dd4f58bae5bcc8c2f9bbaa

    Buddhima Rathnayake

    Please update the project to firebase v3

  • Photo

    Verónica Serna

    hello Carol, really great tutorial, but with the new Firebase it is not compatible with the code of the proyect. Could you please change it? The services with Firebase and the insert to data base... Thanks so much

  • 851a08c6c5459276d569b85ea74c120f

    yemo.yannick@hotmail.com

    Amazing tutorial. pleas can you make the new tutorial with the new Firebase 3? Thank you so much.

  • 6cefd01d7e3707f2025a9a7a3dcdcc73

    Abel

    Really great tutorial. Very clear, in good order explanations and to the point.

  • 6736e6695be435926561c8641cb8b922

    mac

    I really like this tutorial. It is clear, concise but mostly genuine especially when highlighting bugs and best practice. As an analytics engineer, it was a nice intro to building a hybrid app. Great work!

  • 9f15cd55444af5a34ed61a6831be0efc

    André Simões

    Easy to understand. Nice content. Good job.

  • Photo

    Alejandro Escobar

    An amazing course. Really. All the content was clear and to the point.

  • Picture

    Tomek Niewiarowski

    This tutorial makes Angular and Ionic look so easy! I really think that Ionic is the feature of mobile development

  • Starter

    • Tutorial Overview 2:42  
  • Task 1: Introduction to the Technologies

    • Setting up Ionic 8:14  
    • Model View Controller 6:42  
    • Connecting with Firebase 4:09  
  • Task 2: Dealing with Data (Overview Vid)

    • Overview 1:02  
    • Ionic Form 9:46  
    • Saving to Firebase 11:05  
    • Retrieving Data from Firebase 9:48  
    • Refactoring Controllers and Services 8:52  
  • Task 3: Authentication

    • Overview 0:59  
    • Creating a Login Page 8:47  
    • Creating a Login Popup 12:57  
    • Auth with Firebase 16:46  
    • Cleaning Up 4:48  
    • Creating Gravatar 12:46  
  • Task 4: Setting up Cordova Camera

    • Overview 1:26  
    • Creating a Photo State 6:19  
    • Tab Photo HTML 8:43  
    • Adding Cordova Camera 12:10  
    • Photo Library Function 4:17  
    • Cleaning up and Testing 10:16  
  • End of version ONE

    • Final Word 0:51