๐Ÿ“… Todo App

A simple and elegant Todo List Manager built with Ruby on Rails 8, PostgreSQL, and Tailwind CSS. This app supports responsive layouts, dark mode toggling, and full CRUD functionality for managing tasks.


๐Ÿ”ง Tech Stack

  • Ruby on Rails 8
  • PostgreSQL (for development & test environments)
  • Tailwind CSS v4 (standalone CLI)
  • Hotwire (Turbo + Stimulus)
  • Propshaft (asset pipeline)
  • ESBuild / Importmap (Rails 8 default)
  • Responsive & Dark Mode UI

๐Ÿš€ Features

  • โœ… Create, edit, delete, and view tasks
  • โœ… Task status (pending/completed)
  • โœ… Due date tracking
  • โœ… Dark mode toggle ๐ŸŒ—
  • โœ… Responsive Tailwind design
  • โœ… Styled flash messages
  • โœ… Clean form layout with validation feedback

๐Ÿงช Setup Instructions

1. Clone the repo

git clone https://github.com/EbrahimSolomon/todo_app.git
cd todo_app


2. Install dependencies
bundle install
npm install

3. Set up the database
bin/rails db:create db:migrate db:seed

4. Build Tailwind CSS
& "$env:USERPROFILE\AppData\Roaming\npm\tailwindcss-windows-x64" -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css
โœ… Or run it in watch mode:
& "$env:USERPROFILE\AppData\Roaming\npm\tailwindcss-windows-x64" -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --watch

5. Start the Rails server
bin/dev

๐ŸŒ— Dark Mode Support (Pending)
You can toggle dark mode with the floating button in the UI.
Tailwind is configured to use "darkMode": "class" strategy.

๐Ÿ“‚ File Structure
app/
โ”œโ”€โ”€ controllers/
โ”œโ”€โ”€ views/
โ”‚   โ””โ”€โ”€ tasks/
โ”‚       โ”œโ”€โ”€ _form.html.erb
โ”‚       โ”œโ”€โ”€ index.html.erb
โ”‚       โ”œโ”€โ”€ new.html.erb
โ”‚       โ””โ”€โ”€ edit.html.erb
โ”œโ”€โ”€ models/
โ”œโ”€โ”€ assets/
โ”‚   โ””โ”€โ”€ stylesheets/
โ”‚       โ””โ”€โ”€ application.tailwind.css
โ”‚
โ”œโ”€โ”€ assets/builds/
โ”‚   โ””โ”€โ”€ application.css (compiled Tailwind)

๐Ÿ’ก Future Improvements
 User authentication (Devise)

 Drag-and-drop task ordering

 Priority tags & filters

 Persistent dark mode with localStorage

 ๐Ÿง‘โ€๐Ÿ’ป Author
Developed with โค๏ธ by Ebrahim Solomon


๐Ÿ“„ License
This project is open-source and available under the MIT License.





Top categories

tailwind logo

Need a Tailwind website built?

Hire a professional TailwindCSS developer today.
Loading Svelte Themes