/cxjs-home-expenses-app-tutorial

Learn CxJS by creating a simple app for tracking home expenses

Primary LanguageJavaScript

cxjs-home-budget-app-tutorial

Learn CxJS by creating a home budgeting app

In this tutorial, we will be exploring in more depth how Cx framework works, and learn about its many rich features. Most of the design principles used in Cx are also broadly applicable to many other JavaScript frameworks.

Getting Started

As Cx is built on top of React, it is assumed for this tutorial that you are familiar with some of the latest JavaScript features and the JSX syntax used in React. If this is not the case, we highly recommend you go through this amazing introductory tutorial for React first, and come back here once you're ready.

Help, I’m Stuck!

If you get stuck, our CxJS slack channel is a great way to get quick help. Also, you can file any issues via GitHub, and we’ll do our best to help you out.

Tutorial

  • Introduction

    • What are we going to build
    • Data model
    • Fake data

  • Setup

    • Setting up a new Cx project
    • Examine project folder structure
    • Install Material design theme

  • Core concepts

    • Application state (Store)
    • Data-binding
    • Controllers

  • Layout

    • Layout intro
    • App layout
    • Routes
    • Links

  • Entry log page

    • Fake data generator
    • Loading data to the Store
    • Using Grid to display data
    • Adding Edit and Remove actions

  • Edit entry page

    • Route parameters + Sandbox (edit entry example)
    • Build the form (buttons, text fields, number fields, date fields, lookup fields...)
    • Form validation
    • Data loading
    • Saving data to the store
    • Explain other common Store manipulations

  • Additional data operations

    • add entry
    • remove entry
    • localStorage
    • add basic filtering and search functionality to the Entry log page

  • Dashboard page

    • Add charts and graphs to visually represent the data
    • Explain triggers and computables