This is a Rails app with Turbowire, Stimulus.js and Tailwind CSS. The goal is to display the campaigns of the app following an specific set of requirements.
- Create a Rails App, using esbuild and Tailwind
- Create a Campaign model with title, description, state, publication_date and position attributes
- Create controller, routes and views to display campaigns
- Display campaigns in a table with two columns: title, state
- Order campaigns by state (published, draft, archived) and position (from the latest to the first published)
- Open an specific campaign in a pop-up, achieve that using stimulus and turbowire
- Apply tailwind style
- Apply Tests
Any questions please email me at Lorenna Vieira
- Created a Rails app with esbuild and added Tailwind gem
- Added models and validations to guarantee proper data
- Added scopes to improve queries from controllers
- Added controllers, routes and views to display the campaigns
- Added index using Tailwind Table template to display the campaigns
- Added a helper to display the correct color for the state, using a badge style
- Added a helper to format the date
- Added to the model humanized methods to humanize the state and position and keep the code DRY
- Added a modal stimulus controller to remove the hidden class from the modal
- Added turbo-frames to encapisulate the modal in the index view
- Campaigns attributes are required by default
- Rails
- Stimulus.js
- Turbowire
- Tailwind CSS
- esbuild
- Rspec
- Capybara
- Factory Bot
- Faker
- Rubocop
To configure the project:
rails db:setup
To install the dependencies:
bin/rails javascript:install:esbuild
rails bundle install
And to run the app:
.bin/dev
You can run the unit tests using:
rspec
- Improve tests
- Add Jest to test the Stimulus controllers
- Improve styling, add a loading state for slow connections
- Add Decorator design Pattern and move the #humanized methods from the model to the decorator
- Add a search bar to filter the campaigns by title
- Add filters to order the campaigns by state and position
- Improve the show when accessed through the url, show the index behind