https://github.com/john-hamnavoe/rails-trello-clone

Trello Clone using Ruby on Rails 7.2, Turbo 8, Stimulus, and Sortable JS
https://github.com/john-hamnavoe/rails-trello-clone

morph rails sortablejs stimulus-js turbo

Last synced: 3 months ago
JSON representation

Trello Clone using Ruby on Rails 7.2, Turbo 8, Stimulus, and Sortable JS

• Host: GitHub
• URL: https://github.com/john-hamnavoe/rails-trello-clone
• Owner: john-hamnavoe
• Created: 2020-12-14T15:24:04.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-08-13T08:48:36.000Z (6 months ago)
• Last Synced: 2024-10-04T13:15:17.281Z (4 months ago)
• Topics: morph, rails, sortablejs, stimulus-js, turbo
• Language: Ruby
• Homepage:
• Size: 273 KB
• Stars: 21
• Watchers: 2
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# README

## Introduction

Very basic trello clone. [See here](https://rtc.hamnavoecode.com)

Makes use of new turbo morphing feature. 

The hardest part so far is trying to not refresh the editor open on a second browser. This [demo](https://github.com/basecamp/turbo-8-morphing-demo/tree/page-refreshes) project from 37 signals shows the problem if you have two browsers open and in browser one you have some text in Add Task input box but have not saved, adding a task in browser two will cause refresh and loss of data from the input box.

So far the best I have come up with is that when adding/editing tasks and lists a modal will pop up, it has ```data-turbo-permanent: ""``` so will not get refreshed by the broadcast refresh. The modal is closed when the form is submitted by checking the ```turbo:submit-end``` event I need to check for success and also redirection as the way I have implemented modals means this event fires when a new event occurs. I think overall this gives a better user experience, retaining the broadcast refreshes but not losing work on the browser that is refreshed. 

## Technology

* Ruby version 3.2.2

* Rails Version 7.2

* Stimulus

* Sortable js

* Tailwind

* acts_as_list

* view_component

* Turbo 8 - Morphing

* Database Postgresql 

  * rails db:migrate

* No tests 

* Run:

  * Deploy Database ```rails db:create db:migrate```

  * ./bin/dev

## Quick Walk Through of Implementation

### Create Rails App

```rails new APP_NAME --database postgresql --javascript esbuild --css tailwind```

#### Gems

```bundle add acts_as_list```

```bundle add view_component```

#### Yarn 

```yarn add sortablejs```

```yarn add @rails/request.js```

```yarn add @tailwindcss/aspect-ratio```

```yarn add @tailwindcss/forms```

```yarn add @tailwindcss/line-clamp```

```yarn add @tailwindcss/typography```

...tbc...