Build a Voting App
In this workshop, we’ll build a voting app, similar to UserVoice, that allows you to create ideas, vote and comment on them, sort and filter the results, and even administer the site. We’ll start from scratch and work through the entire process, including implementing the design, working on all of the features, testing our code, and more.
We’ll be making use of the TALL (Tailwind, Alpine, Livewire, Laravel) stack in this particular series.
Series episodes
Implement the Design (7)
Initial Setup and Design
29m 41sSet up Laravel Breeze for authentication, install Tailwind and Alpine, and build layouts with basic navigation to kickstart your Laravel app’s design and functionality.
Idea Cards
24m 30sCreate engaging idea cards for your Laravel app’s main page, enhancing visual appeal and user interaction with clean, dynamic design techniques.
The "Add Idea" Form
16m 1sDesign a user-friendly "Add Idea" form in Laravel that lets users easily create and submit new ideas, enhancing engagement and app functionality.
The Idea Page
31m 25sBuild a dynamic single idea page in Laravel featuring a clean design and integrated comments section to boost user engagement and interaction.
Set Status Dialog
15m 31sDesign user-friendly "set status" and "post comment" dialogs to enhance interaction and improve the UX of your Laravel app with clean, engaging UI elements.
Toggle Visibility with Alpine
7m 8sLearn how to easily toggle menu visibility using Alpine.js in your Laravel app. Add interactive, lightweight UI features with simple, friendly steps.
Make it Responsive
32m 22sMake your Laravel app’s layout fully responsive, ensuring a seamless and engaging user experience across all devices with easy-to-follow design tips.
Viewing Ideas (6)
Idea Model and Migrations
19m 10sSet up your Laravel Idea model and migrations, then make index and show pages dynamic by fetching data from the database for a seamless user experience.
Testing: Showing Ideas
12m 44sWrite tests to ensure your Laravel app displays ideas correctly on index and show pages, boosting reliability and confidence in your application's features.
Clicking the Idea Box
8m 34sMake your entire idea box clickable like a link, enhancing user experience with simple yet impactful UI improvements in your Laravel app.
Gravatar Images
21m 38sAdd Gravatar images with defaults to your Laravel users, enhancing profiles visually. Plus, learn how to write tests to ensure this feature works flawlessly.
Add Categories
11m 15sAdd categories with relationships to your Laravel ideas, verify functionality in the browser, and update tests to keep your app reliable and organized.
Add Statuses
17m 48sAdd dynamic statuses to your Laravel ideas with model relationships and explore smart ways to style each status for a clear, engaging user experience.
Creating Ideas (2)
Creating Ideas
18m 59sBuild a Livewire component to submit new ideas with real-time success and validation messages, making your Laravel app interactive and user-friendly.
Testing: Creating Ideas
13m 45sWrite effective tests to ensure your Laravel ideas feature works perfectly. Learn how to create and validate tests that boost your app’s reliability and confidence.
Voting for Ideas (6)
Voting Database Structure
26m 52sLearn how to build a voting system in Laravel: create database tables, set up model relationships, and display vote counts on index and show pages.
Testing: Votes Count
12m 39sEnsure your votes count feature works flawlessly by writing effective tests. Learn testing best practices to keep your Laravel app reliable and bug-free.
Did the Current User Vote for the Idea
32m 13sLearn to check if the current user voted for an idea using optimized Laravel queries with subqueries, avoiding n+1 issues and boosting app performance.
Voting for Ideas
17m 13sLearn how to build voting functionality that lets users easily vote for ideas, enhancing engagement and interaction in your Laravel app. Start coding today!
The Back Button Bug When Voting
10m 52sFix the Livewire back button bug that disrupts voting state. Learn how to maintain consistent app behavior and improve user experience in this episode.
Alternative Implementations for Voting
7m 57sExplore alternative ways to implement voting in your Laravel app, enhancing flexibility and improving user interaction with practical, easy-to-follow methods.
Filtering Ideas (9)
Make a Livewire Component to Fetch Ideas
9m 17sRefactor your Laravel app by creating a Livewire component to fetch ideas, organizing logic for cleaner code and smoother future filtering enhancements.
Status Filters
17m 22sBuild status filters that let users easily sort ideas by their status, enhancing your Laravel app’s usability and delivering a smoother browsing experience.
Status Filters Count
6m 38sAdd status-based counting to your Laravel app, enabling you to track ideas by their status and gain valuable insights with ease and clarity.
Status Filters Tests
14m 11sWrite effective tests to ensure your status filters work perfectly, boosting your Laravel app’s reliability and delivering a smooth user experience.
Category Filters
16m 3sBuild and refactor category filters in Laravel, managing query strings efficiently within a single component for cleaner, more maintainable code.
Testing Category Filters
12m 54sEnsure your category filters work flawlessly by learning how to properly test them, boosting your Laravel app’s reliability and user experience.
Other Filters
16m 41sBuild filters to showcase top-voted ideas and user-specific content in Laravel, complete with tests to ensure your app stays reliable and engaging.
Search Filter
11m 11sLearn how to build and test a dynamic search filter that finds ideas by title, making your Laravel app more interactive and user-friendly.
In-App Back Button
12m 50sAdd a handy in-app back button to your site, enhancing user experience with easy navigation and making your Laravel app more intuitive and friendly.
Admin Set Status (4)
Set the Idea Status
14m 49sEnable admins to set idea statuses easily, empowering better idea management and workflow control in your Laravel app with this practical Laracasts tutorial.
Set Status Test
9m 33sWrite effective tests to ensure your new status-setting feature works flawlessly, boosting your Laravel app’s reliability and confidence with clear examples.
Notify All Voters
12m 29sAdd email notifications to alert all voters when an idea’s status changes, enhancing user engagement and communication in your Laravel app.
Notify All Voters Test
11m 42sTest the "notify all voters" feature effectively while integrating Laravel Horizon to manage your queues smoothly and reliably in this practical lesson.
Refactoring Tests (1)
Editing Ideas (9)
Modal CSS
14m 42sStart editing ideas effortlessly using Tailwind CSS to build sleek, user-friendly modals that enhance your Laravel app’s interface quickly and easily.
Modal Toggle and Transitions
8m 55sLearn how to toggle modals and add smooth transitions using Alpine.js for interactive, polished UI components in your Laravel projects.
Edit Policies
22m 5sLearn to edit ideas with Livewire while implementing policy-based authorization for secure, seamless Laravel app updates in this hands-on Laracasts episode.
Edit Idea Tests
12m 21sWrite effective tests to ensure your idea editing works flawlessly, boosting your Laravel app’s reliability and confidence with clear, practical examples.
Delete an Idea
20m 33sLearn how to add idea deletion with a smooth Tailwind UI modal, enhancing your app’s user experience with clean, interactive Laravel functionality.
Delete an Idea Tests
6m 46sEnsure your "Delete Idea" feature works flawlessly by writing effective tests. Learn how to confidently validate deletion functionality in your Laravel app.
Manage Spam
19m 5sAdd powerful spam management features to your Laravel app. Learn to mark spam, filter content, track spam counts, and reset them for smooth admin control.
Manage Spam Tests
11m 49sWrite effective tests to manage and prevent spam in your Laravel app. Ensure your spam features work flawlessly with clear, reliable testing strategies.
Refactoring Modals
12m 9sRefactor your modals into reusable Blade components to eliminate repetitive code and streamline your Laravel views for cleaner, more maintainable projects.
Success Message Notifications (2)
Success Message CSS
15m 20sStyle success message notifications with Tailwind and Alpine, adding smooth transitions to create engaging, visually appealing user feedback in your app.
Success Message Notification
20m 11sLearn how to connect success message notifications to your app’s actions, enhancing user feedback and creating a smoother, more engaging experience.
Comments (11)
Comment Model and Migration
22m 23sBuild a comments feature by creating models and migrations, then display user discussions seamlessly on your idea page for better engagement.
Add Comments
19m 46sLearn how to build a seamless comment feature that lets users add feedback effortlessly, enhancing interaction and engagement on your app’s ideas.
Comments UX
14m 43sEnhance your comment UX by adding smooth scrolling and subtle highlight effects to new comments, creating a more engaging and user-friendly experience.
Comments Pagination
18m 4sOptimize performance by adding comment pagination to your app. Learn how to efficiently load comments with this practical, friendly Laracasts tutorial!
Showing and Adding Comments Tests
20m 15sWrite reliable tests for showing and adding comments to ensure your features work flawlessly. Boost your Laravel app’s quality with this clear Laracasts tutorial!
Edit Comments
19m 42sEmpower users to edit their comments easily and improve interaction. Follow this Laracasts tutorial to add smooth comment editing to your Laravel app!
Delete Comments
13m 54sEnable users to delete their own comments securely and effortlessly. Follow this Laracasts lesson to add smooth comment deletion functionality to your app!
Edit and Delete Comments Test
16m 35sWrite effective tests to verify your comment edit and delete features work flawlessly. Boost your Laravel app’s reliability with this clear Laracasts tutorial!
Comment Spam Management
21mLearn to manage comment spam by marking comments as spam and resetting counters as an admin. Keep your app clean with this practical Laracasts tutorial!
Admin Set Status Comment Part 1
18m 58sEnhance the "Set Status" feature by letting admins add comments. Learn to update models, migrations, and CSS in this first part of the Laracasts tutorial!
Admin Set Status Comment Part 2
16m 31sAdd comment functionality and update tests seamlessly in this second part of the Admin Set Status series. Boost your Laravel skills with this clear Laracasts tutorial!
Notifications (6)
Notification Styling
19m 51sStyle user notifications to highlight new comments on their ideas. Follow this Laracasts episode to create a clean, engaging notification design that stands out!
View Notifications
19m 9sLearn how to store Laravel notifications in the database and display them in a user-friendly dialog. Enhance your app’s notification system with this Laracasts lesson!
Badge Count
16m 36sAdd a dynamic badge count and sleek skeleton loader to improve notification loading UX. Follow this Laracasts guide to enhance your app’s interactivity and polish!
Mark Notifications as Read
33m 17sEnable users to mark notifications as read and navigate directly to highlighted comments with ease. Enhance UX with this practical Laracasts tutorial!
Notification Polling
4m 25sLearn how to use Livewire's polling to auto-refresh your component and stay updated with new notifications in real-time. Boost interactivity with this Laracasts tutorial!
Notification Tests
17m 35sMaster notification testing with clear, practical steps to ensure your feature works flawlessly. Boost confidence and code quality in this Laracasts lesson!
Wrapping Up (3)
Auth Redirects
13m 49sLearn how to redirect users after login to their previous page effortlessly. Boost UX with simple auth redirects in this clear, step-by-step Laracasts tutorial!
Small Fixes
26m 6sTackle final tweaks like using Tailwind’s JIT compiler and updating your database schema with cascades. Polish your app with this Laracasts tutorial!
Conclusion
9m 52sWrap up the series with ideas for new app features to explore on your own. Thanks for watching and keep building with this friendly Laracasts conclusion!




