Coder Social home page Coder Social logo

hotwire-crud-modal's Introduction

Full CRUD on Hotwire

Getting Started
  1. Bundle install:
bundle install
  1. Yarn install:
yarn install --check-files
  1. Prepare database (db:setup or db:prepare)
bin/rails db:setups
Video Preview Hotwire CRUD simple
Clip.mp4

Hotwire CRUD in Modal (with validation)

Clip.mp4

Devise User in Modal (edit profile only) and Tailwind dropdown

clip1.mov

Hotwire CRUD for Commets & Reply with broadcast and comments live counter

clip2.mov

Authorization Hotwire Commets & Reply (broadcast)

clip.mov

Authorization Hotwire Posts (broadcast)

clip1.mp4

Hotwire Comments info: comments count and author avatar (broadcast)

clip.mov

Hotwire 'Like' model with uniq validation. In real time (broadcast), information about the number of likes and whether the user has already voted is updated.

clip.mp4

Hotwire online user status.

clip.mp4

The maximum depth of nesting comments has been set (in Comment model -> 3).

clip.mp4

Added posts sorting with Hotwire. The selected sorting method is saved in Kredis.

clip.mp4

Added live search on posts (with validation and debounce). Posts are sorted based on search results. Added tooltip.

clip.mov

Added pagination with Pagy (Hotwire)

clip.mov

Added standard infinity scroll

clip2.mp4

Added asynchronous infinite scrolling after a certain delay (2.5 seconds)

clip.mp4

Added User history search (last 5 uniq result)

clip.mov

Added forced sanitization of search input

TODO:
  1. Full text index search

  2. Filter search result

hotwire-crud-modal's People

Contributors

secretpray avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

ahmednadar

hotwire-crud-modal's Issues

App not working

I tried to start up the app following the directions and received the following error when trying to run rails s

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.