Back Button Techniques
Build a Voting App

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.

Intermediate
47 episodes
12h 16m
47
Latest Episode in This Series

Added 5 days ago

Success Message Notification

Let's now wire up our notification with the actions in our application.

Watch
Build a Voting App

Build a Voting App

Version: Laravel 8, Tailwind 2, Livewire 2

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.

Begin
47
Latest Episode in This Series

Added 5 days ago

Success Message Notification

Let's now wire up our notification with the actions in our application.
Watch

Your Teacher | Andre Madarang

https://laracasts.s3.amazonaws.com/avatars/andre-madarang.jpg's avatar
Greetings! I'm Andre, a full-stack web developer and Laracasts instructor. My other hobbies include playing guitar, videography and gaming.
  1. Section 1 Introduction

    1. Free Episode Run Time 3:31

      Let's begin with a demo of the final voting app you'll building in this series, as well as a quick overview of its potential future features.

  2. Section 2 Implement the Design

    1. Free Episode Run Time 29:41 View Source

      We'll start by installing Laravel Breeze to handle the authentication layer. We'll also, in the process, install Tailwind and Alpine, and then set up our layouts and basic navigation.

    2. Free Episode Run Time 24:30 View Source

      Let's work on implementing the design of the idea cards on the main page of the app.

    3. We'll next work on the design of the form that allows users to create and submit new ideas.

    4. Next, we can implement the design of the single idea page, which includes a section for comments.

    5. Let's now work on the design for the "set status" and "post comment" dialogs.

    6. In this lesson, I'll show you how to toggle the visibility of a menus using Alpine.js. It's really simple!

    7. Let's now finish up the design section of this series by making our layout responsive.

  3. Section 3 Viewing Ideas

    1. Let's begin this new chapter by setting up our Idea model and database migrations. After that, we'll make the index and show pages dynamic by pulling the relevant data from the database.

    2. Let’s be sure to prepare a series of tests that ensure that showing ideas works on our index and show pages.

    3. Let's work on the ability to click the entire idea box and make it function like a link. Sure, it's a small feature, but you'll often find yourself working on little things like this.

    4. In this episode, we add Gravatar images for our users with defaults - similar to what you'll find on the Laracasts forum. Of course, we'll also write a series of tests for this new functionality.

    5. We'll now add categories and a corresponding relationship for each idea. We make sure it works in the browser, and then update our current tests.

    6. Next up, let's add statuses and a corresponding relationship for each idea. We'll also take a look at a few approaches for adding the corresponding classes with each status.

  4. Section 4 Creating Ideas

    1. Let's make a Livewire component that handles the process of submitting new ideas. We'll also ensure that success and validation messages are displayed in response.

    2. With the initial code implemented, let's fill it in with a test to prove that it works the way we expect.

  5. Section 5 Voting for Ideas

    1. We can finally work on the core functionality of voting for ideas. In this episode, we'll set up our database table to store votes on ideas, set up the relationship between our models, and display the votes count on both the index and show pages.

    2. Again, let's be sure to write tests for this new votes count functionality.

    3. Let's continue the voting functionality and add some logic to check if a given idea was voted for by the logged-in user. We'll reach for subqueries to ensure that our queries are optimized and not at risk of the "n+1" issue.

    4. We can now tackle the actual voting functionality that allows a user to vote for any idea.

    5. In this episode, we discover and fix a bug that throws off our state in Livewire when using the back button in the browser.

    6. Next up, we'll discuss a few alternative ways of implementing the voting feature in our application.

  6. Section 6 Filtering Ideas

    1. Before we work on filtering, let's do some refactoring and move the logic for fetching ideas into a dedicated Livewire component.

    2. Let's now work on the status filters to allow users the ability to filter all submitted ideas based on their associated status.

    3. In this video, we'll add the ability to count our ideas based on their status.

    4. Let's be sure to write a few tests which ensure that the status filters are working as expected.

    5. Let's work on the category filters and do some refactoring in order to manage the query string within one component.

    6. Before moving on, let's be sure to properly test our category filters component.

    7. In this lesson, we'll work on some other filters: one for showing the top-voted ideas, and another for showing the ideas specifically for the logged-in user. As always, we'll include a set of tests,

    8. Let's now work and test a filter that searches for ideas based on the title.

    9. Next up, we'll add a minor, but useful and convenient UX addition to the site: an in-app back button.

  7. Section 7 Admin: Set Status

    1. Free Episode Run Time 14:49 View Source

      In this next section, we'll add the ability for users administers to set the status of an idea.

    2. As always, we should write some tests to prove that this new feature works as expected.

    3. Free Episode Run Time 12:29 View Source

      Next, we should add the ability to notify all voters (via email) when the status for an idea has changed.

    4. In this lesson, we will test the "notify all voters" feature - and also make use of Horizon for our queues.

  8. Section 8 Refactoring Tests

    1. Let's go back and clean up our tests to utilize factories and factory states more efficiently.

  9. Section 9 Editing Ideas

    1. Run Time 14:42 View Source

      Let's begin this new chapter by working to allow users to edit an idea. We'll use Tailwind to make this as quick and easy as possible.

    2. In this episode, we'll leverage Alpine.js to toggle the modal and add the necessary transitions.

    3. In this episode, we'll work on actually editing the idea using Livewire. We can also take care of policy-based authorization.

    4. As always, we can't forget to write a series of tests to ensure that editing works as expected.

    5. Next, we'll add the ability to delete ideas, while making use of Tailwind UI’s modal component in the process.

    6. As always, we'll take some time ensure that our "Delete Idea" feature is working as expected.

    7. Run Time 19:05 View Source

      Next up we'll add some spam management features, such as marking an idea as spam, a spam filter, a spam counter for admins, and resetting spam counts for ideas.

    8. Once again, we'll write some tests for our spam management features.

    9. Let's take some time to refactor our modals into a Blade component. This should help remove all of our repeated code.

  10. Section 10 Success Message Notifications

    1. Let’s work on the success message notifications - specifically, their styling and transitions using Tailwind and Alpine.

    2. Let's now wire up our notification with the actions in our application.

*Series still in development. Check back often for updates.