A modern, responsive todo list application built with Ruby on Rails, featuring a beautiful UI with Tailwind CSS and DaisyUI components.
Clean and modern landing page with navigation and theme switcher
Main tasks interface showing task cards with priorities, due dates, and actions
Same interface in dark theme, showcasing the beautiful theme system
Clean modal interface for creating new tasks with form validation
- Modern Design: Clean, responsive interface built with Tailwind CSS
- Theme Support: 30+ beautiful themes including Light, Dark, Cyberpunk, Synthwave, and more
- Responsive Layout: Works perfectly on desktop, tablet, and mobile devices
- Smooth Animations: Enhanced user experience with subtle animations
- Visual Appeal: See the beautiful interface in the screenshots section above
- Create Tasks: Add new tasks with title, description, priority, and due date
- Priority Levels: High, Medium, Low priority with color-coded badges
- Due Dates: Set and track due dates with overdue notifications
- Status Tracking: Mark tasks as complete/incomplete
- Task Organization: View tasks in a clean card-based layout
- Real-time Updates: Turbo Drive for fast, SPA-like navigation
- Modal Forms: Clean modal interface for creating new tasks
- Form Validation: Client and server-side validation with error handling
- PWA Ready: Progressive Web App support with service worker
- Hotwire/Turbo: Modern Rails approach with minimal JavaScript
- Stimulus: Lightweight JavaScript framework for interactions
- Import Maps: Modern JavaScript bundling without build tools
- Docker Support: Production-ready Docker configuration
- Comprehensive Testing: RSpec-style testing setup
- Ruby 3.1.7 or higher
- Rails 7.2.2
- SQLite3
- Node.js (for asset compilation)
-
Clone the repository
git clone https://github.com/yourusername/todo_list.git cd todo_list -
Install dependencies
bundle install
-
Setup database
rails db:create rails db:migrate rails db:seed # Adds sample data for testing -
Start the development server
bin/dev
-
Visit the application Open http://localhost:3000 in your browser
💡 Preview: Check out the screenshots section above to see what the application looks like!
todo_list/
├── app/
│ ├── controllers/ # Rails controllers
│ ├── models/ # ActiveRecord models
│ ├── views/ # ERB templates
│ │ ├── tasks/ # Task-related views
│ │ ├── shared/ # Shared components
│ │ └── layouts/ # Application layout
│ ├── assets/ # Stylesheets and images
│ └── javascript/ # JavaScript files
├── config/ # Rails configuration
├── db/ # Database migrations and seeds
├── test/ # Test files
└── Dockerfile # Production Docker configuration
- Priority Badges: Color-coded (Red=High, Yellow=Medium, Green=Low)
- Due Date Indicators: Visual alerts for overdue tasks
- Status Toggles: Easy complete/incomplete switching
- Action Buttons: Edit and delete with confirmation
- Responsive Navbar: Mobile-friendly navigation
- Theme Switcher: 30+ beautiful themes
- Breadcrumbs: Clear navigation hierarchy
- Modal Dialogs: Clean, focused task creation
- Validation: Real-time error feedback
- Accessibility: ARIA labels and keyboard navigation
| Technology | Version | Purpose |
|---|---|---|
| Ruby on Rails | 7.2.2 | Web framework |
| Ruby | 3.1.7 | Programming language |
| SQLite3 | Latest | Database |
| Tailwind CSS | 4.3 | Utility-first CSS framework |
| DaisyUI | 4.0 | Component library |
| Hotwire/Turbo | Latest | SPA-like navigation |
| Stimulus | Latest | JavaScript framework |
| Import Maps | Latest | JavaScript bundling |
- Service Worker: Offline functionality
- Web App Manifest: Install as native app
- Responsive Design: Works on all devices
- Fast Loading: Optimized assets and caching
Run the test suite:
# Run all tests
rails test
# Run specific test files
rails test test/models/task_test.rb
rails test test/controllers/tasks_controller_test.rb
# Run system tests
rails test:system
## 🌱 Database Seeding
The application includes comprehensive seed data to demonstrate all features:
### Basic Seeding
```bash
# Load main seed data (20 sample tasks)
rails db:seed# Load additional development data (10 more tasks)
rails db:seed:development# Reset database and load all seed data
rails db:seed:reset- 30 total sample tasks with realistic content
- Various priorities: High, Medium, Low
- Different due dates: Past, present, and future
- Completion status: Mix of completed and active tasks
- Overdue tasks: To demonstrate the overdue feature
- Realistic descriptions: Professional task descriptions
# Build the Docker image
docker build -t todo-list-app .
# Run the container
docker run -d -p 3000:3000 \
-e RAILS_MASTER_KEY=your_master_key \
-e RAILS_ENV=production \
todo-list-appRAILS_MASTER_KEY: Rails master key for credentialsRAILS_ENV: Environment (production/development)RAILS_SERVE_STATIC_FILES: Enable static file serving
- Push code to GitHub
- Connect Railway to your repository
- Add environment variables
- Deploy automatically
- Create new Web Service
- Connect GitHub repository
- Set build command:
bundle install && bundle exec rails assets:precompile - Set start command:
bundle exec rails server
heroku create your-app-name
git push heroku main
heroku run rails db:migrate- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow Rails conventions
- Write tests for new features
- Use meaningful commit messages
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- Rails Team for the amazing framework
- Tailwind CSS for the utility-first CSS approach
- DaisyUI for the beautiful component library
- Hotwire for the modern Rails approach
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: shehabelkhaligy@gmail.com
Made with ❤️ using Ruby on Rails