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.
Overview
Syllabus
- Introduction
- Introduction and Demo
- Implement the Design
- Initial Setup and Design
- Idea Cards
- The "Add Idea" Form
- The Idea Page
- Set Status Dialog
- Toggle Visibility with Alpine
- Make it Responsive
- Viewing Ideas
- Idea Model and Migrations
- Testing: Showing Ideas
- Clicking the Idea Box
- Gravatar Images
- Add Categories
- Add Statuses
- Creating Ideas
- Creating Ideas
- Testing: Creating Ideas
- Voting for Ideas
- Voting Database Structure
- Testing: Votes Count
- Did the Current User Vote for the Idea
- Voting for Ideas
- The Back Button Bug When Voting
- Alternative Implementations for Voting
- Filtering Ideas
- Make a Livewire Component to Fetch Ideas
- Status Filters
- Status Filters Count
- Status Filters Tests
- Category Filters
- Testing Category Filters
- Other Filters
- Search Filter
- In-App Back Button
- Admin Set Status
- Set the Idea Status
- Set Status Test
- Notify All Voters
- Notify All Voters Test
- Refactoring Tests
- Refactoring Tests
- Editing Ideas
- Modal CSS
- Modal Toggle and Transitions
- Edit Policies
- Edit Idea Tests
- Delete an Idea
- Delete an Idea Tests
- Manage Spam
- Manage Spam Tests
- Refactoring Modals
- Success Message Notifications
- Success Message CSS
- Success Message Notification
- Comments
- Comment Model and Migration
- Add Comments
- Comments UX
- Comments Pagination
- Showing and Adding Comments Tests
- Edit Comments
- Delete Comments
- Edit and Delete Comments Test
- Comment Spam Management
- Admin Set Status Comment Part 1
- Admin Set Status Comment Part 2
- Notifications
- Notification Styling
- View Notifications
- Badge Count
- Mark Notifications as Read
- Notification Polling
- Notification Tests
- Wrapping Up
- Auth Redirects
- Small Fixes
- Conclusion
Taught by
Andre Madarang
