Tutorial Series for building a VueJS (Typescript) and Phoenix(Elixir) Shop Management Application - Part 0


Phoenix Elixir VueJS Typescript stutorial

Other articles in the series

  • Making our UI user friendly - Part 15
  • Deploying Phoenix VueJS application using Docker - Part 14
  • Fixing failing Elixir tests - Part 13
  • Adding new features to Order Management - Part 12
  • Add Order Management - Part 11
  • Refactoring and adding tests for Phoenix - Part 10
  • Refactoring VueJS with Typescript- Part 9
  • Add Customer Management - Part 8
  • Writing tests with Jest and Typescript - Part 7
  • Adding Vuex to Vue using Typescript - Part 6
  • Building our Homepage view component - Part 5
  • Add Multi-language support to Vue Typescript - Part 4
  • Generate Vue Typescript Application - Part 3
  • Setting up Models with Ecto and Adding Routing . Part 2
  • Setting up Your Phoenix Application - Part 1
  • Tutorial Series for building a VueJS (Typescript) and Phoenix(Elixir) Shop Management Application - Part 0

    • The front-end related code for this post is available at here.

    Shop management software from scratch using VueJS and Phoenix web framework.

    Also available as a book for free at leanpub.

    With this tutorial series, we plan to build a web application for managing a shop. The backend will be written using the phoenix framework and the frontend using VueJS. This series will alternate between writing the backend and the frontend. I will include the repo as we progress. We will walk together building this whole application and finally deploying it. Stay Tuned :D

    The source code for client will be here and server will be available here. Each chapter will be a single commit in the repository, so that it can be easily checked out or followed.

    Rough Overview

    Before starting programming, we should make a rough architecture of our project.

    The backend will communicate with the frontend using a REST API. The functionality offered by the project will be as follows. * Support for inventory management which includes keeping track of products, the stocks, the taxes and more. * Support for billing where a customer can buy multiple products. * Transportation service for goods bought by the customer. * More requirements in the future.

    Database Structure modeled using Typescript Interfaces

    Lets simply model these requirements into database tables along with the Typescript interfaces. This provides us with a structure/model, which can be used to communicate between frontend and backend. It also makes our models standard and easier to understand. Soon we will also learn how to automatically generate such an interface from the database tables from phoenix framework. Here are typescript interfaces for the models we will start with.

    // Holds all information about a product. The field names are self explanatory.
export interface Product {
  updated_at: Date;
  tax: number;
  stock: number;
  price: number;
  name: string;
  inserted_at: Date;
  id: number;
  details: object;
  brand_id: number;
}

// All products belongs to a brand. Just like some shoes belongs to brand Nike. We store information for Nike here.
export interface Brand {
  updated_at: Date;
  name: string;
  inserted_at: Date;
  id: number;
  details: object;
}

// OrderItem is a single item in an order. 
export interface OrderItem {
  updated_at: Date;
  unitPrice: number;
  product_id: number;
  order_id: number;
  inserted_at: Date;
  id: number;
  amount: number;
}

// An order is a collection of order items. It also includes a reference to customer with customer_id. 
// Ideally it would make sense to put a customer instance here. But this makes it easier to interact with the backend. 
// all fields which ends with an _id is a reference to name before it. For example customer_id inside Order 
// is a reference to customer table/interface. The details field in all models are used to accomodate additional information which is not very 
// relevant/subject to change.
export interface Order {
  updated_at: Date;
  message: string;
  inserted_at: Date;
  id: number;
  details: object;
  customer_id: number;
  creationDate: Date;
}


// Used to represent transporation of goods to the customer. It has a reference to the order and also the customer. 
// Note that we have an address even though have a reference to customer from which address can be obtained. We 
// have a different address because it can be the case that shipping address can be different to customer address.
export interface Delivery {
  updated_at: Date;
  order_id: number;
  inserted_at: Date;
  id: number;
  fare: number;
  details: object;
  customer_id: number;
  address: object;
}

// Used to represent a customer, who places the order.
export interface Customer {
  updated_at: Date;
  pincode: string;
  phone: string;
  name: string;
  inserted_at: Date;
  id: number;
  details: object;
}

    In the next part, we will see how setup the phoenix framework for our backend and model the database tables. It will have the same structure as the typescript interfaces.