> For the complete documentation index, see [llms.txt](https://docs.matestack.io/matestack-ui-core/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.matestack.io/matestack-ui-core/1.5.0/spa-like-apps/tutorial.md).

# 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](/matestack-ui-core/1.5.0/spa-like-apps/tutorial/00_introduction.md).

## Table of contents

1. [Introduction](/matestack-ui-core/1.5.0/spa-like-apps/tutorial/00_introduction.md)
2. [Setup](/matestack-ui-core/1.5.0/spa-like-apps/tutorial/01_setup.md)
3. [Active Record](/matestack-ui-core/1.5.0/spa-like-apps/tutorial/02_active_record.md)
4. [Index, Show, Transition](/matestack-ui-core/1.5.0/spa-like-apps/tutorial/03_index_show_transition.md)
5. [Forms, CRUD](/matestack-ui-core/1.5.0/spa-like-apps/tutorial/04_forms_edit_new_create_update_delete.md)
6. [Toggle Component](/matestack-ui-core/1.5.0/spa-like-apps/tutorial/05_toggle_component.md)
7. [Async Component](/matestack-ui-core/1.5.0/spa-like-apps/tutorial/06_async_component.md)
8. [Partials and Custom Components](/matestack-ui-core/1.5.0/spa-like-apps/tutorial/07_partials_and_custom_components.md)
9. [Collection Component](/matestack-ui-core/1.5.0/spa-like-apps/tutorial/08_collection_async.md)
10. [Custom Vue.js Components](/matestack-ui-core/1.5.0/spa-like-apps/tutorial/09_custom_vue_js_components.md)
11. [Styling and Notifications](/matestack-ui-core/1.5.0/spa-like-apps/tutorial/10_styling_notifications.md)
12. [Authentication with Devise](/matestack-ui-core/1.5.0/spa-like-apps/tutorial/11_authentication_devise.md)
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](/files/Y4K6YNm2DH3ualgJqYOZ) Above screenshot shows the startpage of our application which we will create together in this tutorial.