Herded

Finally spent some time to make a half decent simple logo for Herded that’s basically just a green letter H on a simple sheep graphic (totally not stolen off from stock image site btw trust). The logo shows up as the favicon of the tab and on the nav bar and the footer of the site. Added both static and dynamically generated SEO and OG metadata information for every page of the entire site so it hopefully actually shows up on Google and looks good when sharing quiz links on social platforms. To make quizzes easier to share with other people, I added a share button on the results page of the quiz page that copies the link and opens a popup modal. Spent some time rewriting a ton of Tailwind utility classes to finally incorporate responsive design/styling to ensure every page on the entire site works and looks aesthetically pleasing on all screen sizes to make it more accessible and usable to everyone. Updated some styling and layout while adding responsive design as well.

Added the quizzes and about pages so you can browse public quizzes more easily and learn more about the website! You can search all the public quizzes by their names and descriptions using the search bar with a clear search button, and browse and access the top 4 most played/popular quizzes, the 4 most recently created quizzes, and all the public quizzes other users created in 3 different sections on the page. The about page shows more information including the pages, features, and directions of using Herded, as well as why I made it and other stuff. Added the most popular and most recent quizzes sections to the homepage as well, with a button that links to the quizzes page. Added a rounded footer to every page with very basic links and copyright too. Added GitHub OAuth so now you can create a Herded account with either Google or GitHub and both will work perfectly fine with the app! Also fixed the issue of quizzes not refreshing on the create page, optimized some backend code, and updated the overall styling and content of the app.

Added quizzes that display on your profile so you can easily see, test, and manage all your quizzes! If you go to your profile, you will see a “Your quizzes” section that has all your quizzes presented as cards each with its name, description, total plays, creation date, and creator information listed. If you’re the creator of the quiz, you can see a delete button that lets you delete a quiz permanently after confirmation. The left sidebar now no longer lets you update your bio/about (since your profile isn’t intended to be public), and only has your profile icon, name, a short description, join date, sign out button, and a new delete account button. Once you click on the delete account button, your account (but not the quizzes you’ve created) will be permanently deleted after confirmation as well, and you’ll get signed out and get redirected to the sign in page. Also added a total plays counter that keeps track of how many times the quiz has been played (whenever someone clicks on the start button) in total. Updated some styling, code, and the navigation bar as well.

Added comments that appear at the end of a quiz where you can create comments using a custom nickname (even if you’re logged out) and view other people’s comments on the quiz! On the results page of a quiz, you will see a comment section box with two input fields, one for your display name and one for the comment. After you’ve filled out both, you will be able to post the comment. Comments are sorted chronologically, with newest comments appearing near the top, and you can see each commenter’s display name, their trait (white, gray, or black), the trait’s description that appears when hovered over, and the date they posted the comment. Also updated some styling and improved the code’s performance by breaking things into smaller components and using cache and stuff. Added new types and updated models and backend server actions as well to incorporate these comments.

Added the quiz page so you can finally take custom would you rather quizzes you or other people made, see how many people voted for each option, and find out about your trait and herdedness at the end! Once you create a quiz successfully, you’ll be redirected to the public quiz link where anyone who visits it can take the quiz! After you select an option for a question, you can’t change it (watch out conformists >:) ), and the numbers and percentages for how many people voted for each (including you) will appear as well as a visual indicator to help visualize the data. You can easily navigate between different pages of the quiz, and once you finish it a results page will display with your trait (black sheep being unique, gray sheep, or white sheep being an NPC), herdedness (how many questions you sided with the majority), and a fun little description for the trait. Two buttons will also appear at the end where you can either go home or go back and view the questions. Spent a ton of time updating the quiz types and models to make sure votes work but it was worth it at the end, and updated styling as well.

I kinda forgot to make a devlog for my last commit because I pushed it at 3AM and was too tired to do anything else, so this devlog is going to cover quite a bit for these 2 commits. I added a create button on the nav bar that shows up if you’re logged in, and clicking on it redirects to the quiz creation page. This is a paginated screen with 3 different pages/steps and back/next navigation buttons for creating a custom would you rather quiz. You can enter the name and description of the quiz on the first page, add multiple questions with a question sentence and two options and delete questions on the second page, and give the quiz a custom ID, copy its URL, and set its visibility to public or unlisted on the third page. Once you click submit (that only shows up when every field is filled in), all the data for the quiz gets synced to the backend MongoDB database, and if everything works properly you’ll get redirected to the homepage (haven’t implemented actual quiz UI), but if the ID is already taken or something else happens, an error message displays on the third page. Also added actual user data to the database that gets created/updated whenever you sign in. Whenever you create a quiz, your user data is also updated with the quizzes’s IDs you’ve created recorded to keep track of all the quizzes you made. For this devlog, I updated the backend stuff (server actions, models, auth, types) a lot to make sure everything’s optimized and syncs to the database correctly. I also updated styling and some environment variables as well.

Added the UI for the sign in page with an icon, header, description, and two buttons for Google and GitHub OAuth sign in options with their icons. Once you log in with a Google account, your profile image along with your name will appear on the right of the navigation bar, and clicking on it redirects you to the profile page where you will be able to see and edit more information about you and view/create your quizzes. For now you can only see your profile picture, name, date joined, some placeholder layout blocks, and a sign out button that signs you out on the profile page. Added a 404 not found page with links for you to either go back home or submit a GitHub issue. Updated styling as well to better incorporate the overall design across all pages.

Started developing Herded, a fullstack platform for users to create their own would you rather quizzes and share it with other people to take it together! Since this is a pretty fun idea/website, I decided to try using neo brutalism as the design style for the first time and I’m really liking the engaging style and it’s easy to design in Tailwind as well. Added a hero section, call to action buttons, and some bento cards showcasing the website’s features along with relevant icons. Added a navigation bar with a signin button that redirects to the signin page as well. Added some very basic backend, MongoDB database, NextAuth auth, and Google OAuth so you can now go to the signin page and log in with a Google account and get redirected to the profile page. Since this is a pretty common pattern I just copied a lot of boilerplate from my other projects over, so it was pretty easy to implement auth. Added the README, the dependencies the app will be using, and interactive smooth animation to improve the UX. Added environment variables for auth too.