Build an Etsy Clone with Angular and Stamplay (Part 1)

Free Course

Getting Started with Angular 2

Angular 2 is the shiny new framework that comes with a lot of new concepts. Learn all the great new features.

In this three-part tutorial series we’ll be building an Etsy clone with Angular and Stamplay. Stamplay is a great development service that handles much of the server and API based stuff for developers.

This means you as a developer can focus on the things that matter most to your users; things like user interface, interactions, and the overall usability of your applications.

000-angular-etsy-stamplay-home

In our Etsy clone, we’ll be able to:

  • Register users
  • Let users buy and sell
  • Sellers can pay a listing fee to post products to the site
  • Buyers can view all products by shop and category
  • Buyers can search
  • Buyers can purchase products through a secured payment gateway (Stripe)

That may seem like a lot of work, but Stamplay will handle a lot of the logic for us like speaking with the various APIs (Facebook, Stripe, and more).

Let’s take a quick overview look of Stamplay before we get into our Etsy Angular clone.

Stamplay: API Lego for Developers

Stamplay is a web-based development platform that gives developers an incredibly fast way to build fully integrated applications. Stamplay handles the trouble of talking to many different APIs for you so you don’t have to.

Build apps using APIs as building blocks, code what matters, and ship products faster than ever. Try it for free now.

Some of the APIs that Stamplay talks to for developers are:

  • Facebook
  • Twitter
  • Google
  • Dropbox
  • LinkedIn
  • Instagram
  • GitHub
  • Angellist
  • Stripe
  • Twilio
  • Firebase
  • Slack
  • Mailchimp
  • Google Drive
  • and more

That’s a giant list and there are more that can be integrated.

How Does Stamplay Work?

Stamplay works by allowing developers to define tasks, very similar to IFTTT (if this then that). You can use their convenient GUI and Stamplay will handle the integrations, no code required!

Some tasks that can easily be set up are:

  • If a user logs in with Facebook, then add a notification to a Slack Channel
  • If a Stripe charge is made, then add a record to a Google Drive spreadsheet
  • If a user interacts with your site, then reward them with some gamification choices

Stamplay Parts

Per the Stamplay docs, here is a diagram for how the platform works.

architecture

The Stamplay workflow consists of five different parts.

  1. User Management: Stamplay handles registration (by email and social)
  2. Components: The building blocks of Stamplay applications
  3. Tasks: The IFTTT style parts of your app. Triggers and events
  4. APIs: Components and tasks are exposed through an easy to use Stamplay generated API
  5. Hosting: Host your application on the Stamplay infrastructure and use your own domain

For more information, check out our previous blog post Build an AngularJS App with Stamplay.

Our Demo App: Building an Angular Etsy Clone

We will be using the Stamplay platform to help us create an Etsy clone. Stamplay will handle much of the backend, the database, the APIs, social login, and more.

Let’s take a more in depth look at what we’ll be creating.

App Requirements

The demo application we are going to build will be able to:

  • Let users signup with Facebook or their email
  • Users can add/edit/remove items from their shop
  • Users can purchase a product (one at a time)
  • Users can comment on products
  • Users get notified via email when they sell an item
  • Users get notified when one of their products receives a comment
  • Users can search products

What Stamplay Will Handle

Luckily for us, thanks to Stamplay, much of this can be handled without a single line of code! These are the parts Stamplay will do for us:

  • Registration through Facebook authentication
  • Registration through user email
  • The entire database layer
    • Linking products to stores
    • Linking products to categories
  • Searching for products
  • Emailing users
  • Billing securely through Stripe

Stamplay effectively lets us not worry about the following:

  • Working with the Facebook API
  • Working with the Stripe API
  • Working with the Mandrill API (sending emails)
  • Creating our database schema (linking products to stores/users and categories)
  • Creating the server-side API so our front-end (Angular) can use our data

Since Stamplay handles all of the above for us, we get to focus on the UI of our application.

What We Will Handle

Since Stamplay handles all of the above for us, we get to focus on the UI of our application. We’ll be using Angular and ui-router to build out the front-end.

We’ll have six different pages to our application:

  • Home Page / Grid of Products
  • Shop Page
  • Shop Admin Page
  • Single Product Page
  • Add Product Page
  • User Profile Page

Before we can start building out the front-end part of our application, let’s focus on the back-end, the Stamplay side of things.

The Stamplay Backend

Handling all of our server-side part of our application is a breeze since it will all be configured within the Stamplay dashboard.

If you haven’t already, go ahead and create a free Stamplay account and let’s get started!

Use the coupon code SCOTCHED to get 3 free months of Stamplay’s Plus plan!

Once you sign up for your account, you can create an application. Here is the main dashboard where you can create a new application. I’ve already created an app for what we’re building called angularetsy.

We also have the demo app from our last Stamplay article: Build an AngularJS App with Stamplay: The IFTTT for Developers

00-angular-etsy-stamplay-create

Once you’ve created your demo application, you can click on that application to see that app’s dashboard.

angular-etsy-stamplay-pic

Stamplay will also handle hosting your application for you and they’ll provide you with a live domain. In our case, it is: https://angularetsy.stamplayapp.com/.

Initially, our application will have convenient Stamplay instructions to get started.

02-angular-etsy-stamplay-landing

Data Modeling

The first step to take is to make sure that our database is mapped out so that we can have a solid foundation for our application.

The main objects we need in our database are:

  • Users (Stamplay handles these for us)
  • Shops
  • Categories
  • Products
  • Pictures
  • Orders

Let’s look at those more in depth. Here are the fields for each of those objects. Notice that some of these fields have relations to other objects (ie Products reference the Categories).

These objects will be the foundation of our database. We’ll go through and configure each one in the Stamplay dashboard. Just click on Objects->Add in the left navigation and let’s create our database.

03-angular-etsy-stamplay-create-object

Categories

Categories will be the simplest and just include one field.

name string

It is very easy to create this field. Just type name into the Properties -> Name field and notice that Type String is already selected. Add the property and we’re good to go! It’s that easy to build out our database.

Default Properties Every time we create a new object, the default properties already present are owner, dt_create, dt_update. These are:

  • owner The relation to the user that created this object. This way we will automatically know which user created a product or store.
  • dt_create This will provide us with the DateTime that this object was created
  • dt_update This will automatically update when this object is updated so we will always know when the object was last used

04-angular-etsy-stamplay-create-category

Pictures

These pictures will be assigned in our products objects. By separating them out into their own objects, we make them reusable in case we have multiple products that use the same photos.

photo file

05-angular-etsy-stamplay-create-pictures

Products

Products will be one of the most important parts of this application so we’ll start with those.

name string
category relation with categories
description string
color array of strings
price float
size array of strings
pictures relation with pictures

Since we already created the categories and pictures, the Type dropdown adds these relations as choices. Stamplay will handle the foreign key stuff for us so we don’t have to link our objects together ourselves.

Also notice that relations are an array of the ids of the related objects. So one specific product, there can be multiple categories and multiple pictures.

06-angular-etsy-stamplay-object-field-options

Shops

Shops will be very simple and only require a few fields. We’ll reference the products that belong to this shop.

name string
products relation with products

07-angular-etsy-stamplay-create-store

Orders

The Orders object will hold information about each purchase. Every time a user purchases a product, a new order will be created. These are the necessary properties:

product relation with products
size string
color string
price float

08-angular-etsy-stamplay-orders

Now that we’ve created our objects and our database, usually we would create an API to access this data. That way we can provide the API to users and allow them to build on our information. Stamplay handles this for us and that’s just another thing you don’t have to worry about.

Let’s explore the API that Stamplay provides us.

The Dynamic Stamplay API

We’ll be using this more when we get to the Angular side of things since this is the API that we will interact with.

If you click on the API CONSOLE link in the left navigation, you’ll see the console where we can call our API and see how our data will come back.

This really helps us when building our applications because we can demonstrate and examine just how we can get information from our API. This is like how you can examine the Facebook API using their Graph API Explorer.

For example, with the Facebook Graph API Explorer, I can grab my user information using the GET https://graph.facebook.com/v2.4/me endpoint.

Testing the Stamplay API

Let’s test a few of the Stamplay endpoints so we can see how things work.

Creating a User

We don’t have any users in our database yet so let’s create one. We’re going to use the API console. Under the Operation dropdown, select Create user. Notice that this is a POST request as you would normally see in a RESTful API.

On the Angular side of things, you can see the API URL that we’ll be using: /api/user/v1/users

We can also run requests as certain users so we can test permissions. Go ahead and press Send and below you’ll see the response from our Stamplay API.

10-angular-etsy-stamplay-create-user-error

We get an error back because we haven’t actually filled out any fields (email, displayname, password) while trying to create this user.

Let’s fill out the form above in the Body params section.

11-angular-etsy-stamplay-create-user-fields

Now when we create this user, we’ll get a good response back. By default, Stamplay will return the newly created item in its response when you create something new. This is the same for custom objects we created like products and shops.

12-angular-etsy-stamplay-create-user-success

Getting Users

Now that we’ve created this user, we should be able to get this user from the API right? Correct! Let’s go back up to the top of our API Console page and select Get users from the operation dropdown.

This will be a GET request to /api/user/v1/users. Press Send and let’s see the results.


STATUS
403 - Forbidden

DATA
{
  "error": {
    "message": "Not authorized",
    "status": 403
  }
}

By default, Stamplay will set the permissions to accessing users to “Private”. There are a few ways around this. For now, during development, we can set the default permissions to public.

Another option is we can also change the user we are accessing this information as. Let’s go back up to the top of our API console and type admin into the Run As dropdown.

13-angular-etsy-stamplay-run-as

Now when we run the query, we get the new user that was created.

14-angular-etsy-stamplay-get-users

Custom Objects (Products)

For those custom objects we created earlier (products, categories, pictures, shops, orders), Stamplay will handle all the API endpoints for those as well.

In the API Console dropdown, when we select Get all objects, you’ll see a new dropdown is available in the API URL section. We can select any of our objects that we created earlier.

15-angular-etsy-stamplay-api-console-custom-object

Stamplay dynamically builds the API for us based on the objects we created. Pretty neat stuff.

Let’s use products and examine the API endpoints available to us:

Get all products `GET /api/cobject/v1/products`
Get product by attribute `GET /api/cobject/v1/products/find/{owner/category/name}`
Get product by id `GET /api/cobject/v1/products/{id}`
Get objects activities `GET /api/cobject/v1/products/{id}/activities`
Create a product `POST /api/cobject/v1/products`
Update a product `PUT /api/cobject/v1/products/{id}`
Update a product’s attributes `PATCH /api/cobject/v1/products/{id}`
Delete a product `DELETE /api/cobject/v1/products/{id}`

Let’s create a sample product.

  • Use Create object from the dropdown
  • Select products in the API URL
  • Add a Name for the product

16-angular-etsy-stamplay-create-product

Now we have the new product returned to us.

17-angular-etsy-stamplay-create-product-response

It will be that simple when we are calling this API from the Angular side of things!

Your API Is Live

Just to drive home the point that Stamplay really handles the API side of things for us and gets our application as production ready as possible, we can even go into our browser and view our API from there.

In our application, since Stamplay is hosting for us, we can look at our application at:

http://angularetsy.stamplayapp.com/api/cobject/v1/products

Our API is available publicly to use now!

angular-esty-stamplay-live-api

Examining Data

The last thing we’ll do in this Part 1 tutorial will be looking at the Data tab in the left navigation. This is just a convenient place to look into our database and see the records in there.

If we click on Data -> User, we’ll see the user we created.

18-angular-etsy-stamplay-data-user

Also, we can click on Objects and see the tabs for all our custom objects. Click on Products and we’ll be able to see the new product (Macbook from the Year 2030) in the list.

19-angular-etsy-stamplay-data-custom-object

We can add rows and export from here. A very convenient way to look through our database.

Facebook Integration

The last thing we’ll do in this Part 1 of this tutorial is to handle Facebook logins. We’ll be able to interact with the Facebook API, and handle login and signup, all without a line of code!

Facebook Application Credentials

Since we want our users to sign up with Facebook, we’ll need to head over to https://developers.facebook.com/ and create a new developer app.

angular-esty-stamplay-create-facebook-app

Select Website and once you get your app created, we’ll be able to grab two things that we need from Facebook to integrate with Stamplay:

  • App ID
  • App Secret

These two things can be found under Settings -> Basic.

angular-etsy-stamplay-facebook-appid

Also, let’s make sure that our Site URL is configured correctly to point to our Stamplay site URL. If not, then Facebook won’t let us authenticate.

angular-etsy-stamplay-facebook-siteurl

Now keep those in mind and we have to do one more thing in Facebook to make sure that everything works with Stamplay. We have to set a Redirect URI so that Facebook will know where to redirect our users after they have authenticated themselves.

Under Settings -> Advanced in the Client OAuth Settings, enter your Stamplay app URL in the Valid OAuth redirect URIs field.

angular-etsy-stamplay-facebook-redirect

Great! Now we’re all set to go back into Stamplay and integrate with Facebook.

Note: When you set up “Facebook Application Credentials” , Under Settings -> Advanced in the Client OAuth Settings, http://localhost:8080 should be entered along with the Stamplay app URL in the Valid OAuth redirect URIs field.

Integrating With Stamplay

Now that we have our App ID and App Secret, we can plug those into Stamplay. Go to your Stamplay dashboard again and under Users you’ll see an Authentication link.

In this section, we can integrate with multiple services to provide social authentication for our users. And in typical Stamplay fashion, it’s all super easy to use and set up.

angular-etsy-stamplay-facebook-credentials

Let’s click into Facebook and add our credentials. You can even change the scopes so that you can request more information from your users as they login.

By default, Stamplay Facebook logins require:

  • email
  • public_profile
  • user_friends

angular-etsy-stamplay-facebook-scopes

Testing Facebook Login

Now that we’ve hooked up our Facebook credentials, Stamplay provides a convenient API URL to handle logging in with Facebook. Let’s go there now and see our Facebook login in action.

https://angularetsy.stamplayapp.com/auth/v1/facebook/connect

Just like that we have Facebook login!

angular-etsy-stamplay-facebook-login

Now once you authenticate yourself, you’ll be redirected to your application since we set that in the Redirect URI.

Go into your Stamplay dashboard again and under Data -> Users, you should be able to see the new user you just authenticated with Facebook.

angular-etsy-stamplay-facebook-logged-in

Normally a process like Facebook login would take a considerable amount of time and we’ve done it here with Stamplay with exactly 0 lines of code.

Up Next

That’s it for Part 1 of this series. Hopefully that gives you a good rundown of how Stamplay can help build out the infrastructure of your application in very little time. We’ve been able to:

  • Host our application
  • Create our database schema and link the necessary parts
  • Have a usable API to access our database
  • Handle CRUD and create a user and a product
  • Login and Register users with Facebook
  • Have a solid foundation moving forward

All of this accomplished without a single line of code and in mere minutes.

In Part 2, we’ll deal with the magic API lego part of Stamplay where we’ll be able to integrate Stripe, Mandrill, and more just as quickly. We’ll also be starting up our Angular application and hooking it into our backend we’ve started here.

In Part 3 we’ll really focus on the front-end and build out our Angular application on this great foundation we’ve set up with Stamplay in Parts 1 and 2.

This post sponsored by via Syndicate Ads.

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.