# Tutorial

In this series of guides we teach you how to create a rails app from the ground up with matestack and encounter how matestack makes your life easier and takes away the frontend hustle. We build a demo CRUD application which you can take a look at [here](https://demo.matestack.io) or checkout the below screenshot to get an idea of what we build. The source code of the complete application can be found on [github](https://github.com/matestack/matestack-demo-application).

Get started by reading the [introduction](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial/00_introduction).

## Table of contents

1. [Introduction](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial/00_introduction)
2. [Setup](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial/01_setup)
3. [Active Record](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial/02_active_record)
4. [Index, Show, Transition](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial/03_index_show_transition)
5. [Forms, CRUD](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial/04_forms_edit_new_create_update_delete)
6. [Toggle Component](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial/05_toggle_component)
7. [Async Component](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial/06_async_component)
8. [Partials and Custom Components](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial/07_partials_and_custom_components)
9. [Collection Component](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial/08_collection_async)
10. [Custom Vue.js Components](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial/09_custom_vue_js_components)
11. [Styling and Notifications](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial/10_styling_notifications)
12. [Authentication with Devise](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial/11_authentication_devise)
13. [Wrap Up](https://github.com/matestack/matestack-ui-core/tree/829eb2f5a7483ef4b78450a5429589ec8f8123e8/docs/reactive_apps/1000-tutorial/12_wrap_up.md)
14. [Heroku Deployment](https://github.com/matestack/matestack-ui-core/tree/829eb2f5a7483ef4b78450a5429589ec8f8123e8/docs/reactive_apps/1000-tutorial/13_heroku_deployment.md)

![Demo Application](https://3095495897-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MSlZxQYRyTJNqEznL8o-230319822%2Fuploads%2Fgit-blob-b8c8a465f57428be762fe847effb6b491e44a397%2Fdemo_screenshot.png?alt=media) Above screenshot shows the startpage of our application which we will create together in this tutorial.