DEV Community: mike

Building a Wedding Website with Next.js, Supabase, and Tailwind CSS

mike — Mon, 30 Dec 2024 10:58:56 +0000

Introduction

In this blog post, I'll share the journey of building a wedding website that includes an RSVP form for our guests. The main goal was to create a straightforward but functional website that allows guests to submit their RSVPs, provide any relevant notes, and request printed invitations. The tech stack consists of Next.js, Supabase, and Tailwind CSS, creating a fast, responsive, and scalable web app.

Tech Stack

Next.js: A React-based framework for server-side rendering and routing.
Supabase: For backend services like authentication, database management, and hosting.
Tailwind CSS: A utility-first CSS framework that provides flexibility while keeping the UI clean and customizable.
Cypress: Used for testing the form and ensuring everything works smoothly across all submissions.

Phase 1: Setting Up the RSVP Form

The main functionality on the wedding website is the RSVP form. The form collects guest information such as name, mobile number, email address, and RSVP status (attending or not). Additionally, guests can choose to request a printed invitation, available only to residents in the Philippines.

The form includes:

Basic fields: Name, mobile number, email, RSVP status, and notes.
Address fields: Guests can enter their address if they opt for a printed invitation.
Validation: Using React Hook Form for form handling and validation, we ensure:
- Mobile numbers are validated based on the guest’s residency (Philippine vs. international).
- Email addresses are validated if provided.
Confirmation Message: After submitting the form, guests are shown a success message indicating whether their RSVP was recorded or updated.

Here’s a sample of the form structure:

<div className="mb-4">
  <label htmlFor="email" className="block text-gray-700">Email (Optional)</label>
  <input
    type="text"
    {...register('email', {
      validate: value => value === '' || /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(value) || 'Invalid email address',
    })}
    className="w-full px-4 py-2 border rounded focus:outline-none focus:ring text-black"
  />
  {errors.email && <p className="text-red-500 text-xs">{errors.email.message}</p>}
</div>

Key Features:

Printed Invitations: Guests can request a printed invitation. A confirmation message will show that printed invitations are optional and available only for Philippine residents. All guests who provide an email address will receive a digital invitation.
Mobile Number Validation: For Philippine residents, we validate mobile numbers in both short and long formats, while also allowing international numbers.

Phase 2: Integration with Supabase

For handling form submissions, we integrated Supabase to store RSVP data. When guests submit their information, the data is saved in the rsvps table within Supabase. The process includes:

Checking for Existing RSVP:
We check if a submission with the same mobile number already exists. If it does, we update the entry. If not, we insert a new RSVP record.
Database Structure:
The rsvps table contains fields like name, mobile, email, status, and notes. We also use an auto-incrementing id for entries.

-- Reset ID counter and truncate rsvps table
TRUNCATE TABLE rsvps RESTART IDENTITY CASCADE;

This command truncates the rsvps table and resets the ID counter to 1, which is useful for starting fresh with test data or after a significant update.

Supabase Policies: To maintain data integrity and security, we implemented Row-Level Security (RLS) policies to control who can view, insert, or modify data in the rsvps table.

Phase 3: Testing with Cypress

To ensure the form works correctly, we used Cypress for end-to-end testing. We tested several important scenarios, such as:

Form Submission: Ensuring the correct confirmation message is shown after a successful submission (either new or update).
Field Validation: Verifying that the form shows error messages when invalid data is entered.
Handling Duplicate Submissions: Confirming that if a guest submits the same mobile number again, the system updates the existing RSVP, rather than creating a new one.

Here is an example of a Cypress test for new submissions:

it('submits the form successfully for a new submission', () => {
  cy.visit(baseUrl);

  // Submit the form with unique data
  fillForm('Jade', '+639123456783', 'michael@example.com', 'attending', 'No dietary restrictions', true, {
    address_line1: '123 Main Street',
    barangay: 'Sta Ana',
    city: 'Manila',
    province: 'Metro Manila',
    postal_code: '1000',
  });

  cy.contains('Submit').click();
  cy.contains('Thank you for RSVP-ing!').should('be.visible');
});

Conclusion

By combining Next.js, Supabase, Tailwind CSS, and Cypress, we were able to build a robust and user-friendly wedding RSVP website. This solution allows guests to RSVP, submit their information, and handle updates as needed, all while ensuring data is stored securely and correctly. Additionally, Cypress testing ensures the website functions as expected and provides a seamless user experience.

I hope this guide is helpful to others looking to build their own wedding websites or similar projects. Stay tuned for future improvements, including styling updates and additional features!

Next Steps:

Styling: Customize the website with more personal designs, icons, and theme-specific colors.
Deployment: Host the website on Vercel or any preferred platform.

Feel free to reach out if you have any questions or need further help on your project!

Untangling Wordpress Spaghetti: a tale about technical debt

mike — Wed, 28 Jun 2023 12:08:59 +0000

If I had a dollar for every Wordpress codebase I touch that’s bogged down with bad coding practices, I'd be a millionaire by now. This isn't surprising in this gig - Wordpress has a pretty bad rep for having crappy codebases, which is why it carries the stigma of poor developer experience.

This reputation isn't exactly the fault of Automattic, the creators of Wordpress. Wordpress is actually a pretty powerful CMS used by a lot of websites - one which powers 65.2% of all websites in the internet that uses content management systems. But why does Wordpress get this type of hate from the tech community?

The reason is the low barrier of entry in using the framework. Wordpress is one of the earliest CMSes to have gained adoption from the masses, which not only explains its market share but also why bad Wordpress practices are so common.

One of my recent tasks as a Wordpress developer is to solely handle the migration of a large events website from BuddyBoss into Bootstrap. For the non-technical: BuddyBoss is a course & community-focused Wordpress theme, while Bootstrap is the most popular HTML, CSS, and JS library. It's a task that I've put off for some time because of the amount of technical debt in the said website. It has been passed over from the original revamp proposal to three different developers/agencies, and me as a sole developer being the fourth entity in this human (web developer) centipede.

When I first saw the codebase of this website, it's like tracing history through code - first, I saw the poor programming decisions made by the first programmer (which was outsourced to a digital agency). They revamped the website during the time when Wordpress websites were transitioning into Gutenberg. The developers used native Wordpress blocks to replicate the old design, but they did not use Gutenberg properly and resorted to using class-based CSS to implement the styles - which is basically how you get Gutenberg salmonella… because you're eating it raw.

In the block-based style of Gutenberg editor, the designs should not rely on hardcoded CSS classes, but in using the correct blocks which would make editing easy for the Wordpress end-user. However, because of how developer #1 implemented it, the editors then had to copy each block, with the design component relying into which CSS class(es) are assigned into the block that they copied. Gutenberg was supposed to be Auttomatic's ultimate solution in the longstanding battle of Wordpress visual editors - but this approach butchers that use case. Unfortunately, this is the path that they took (and in describing their process I am proud to coin the term "Gutenberg salmonella").

After the agency was finished with the unfortunate revamp, the website was handed over to an intermediate Wordpress developer. Or rather, a developer who heavily relies on plugins but is not that good on customizing them if needed. Don't get me wrong, this approach is perfectly acceptable for the usual Wordpress brochure sites... but not for a website that creates multiple event pages on the daily, and used by dozens of editors from different teams around the world. Because of the need to improve editor capabilities across the site, developer #2 installed several different Gutenberg block editor plugins that would cover every use case possible - but also inevitably heavily overlaps with one another. What happened afterwards is a perfect example of why it isn't good to offer too many choices: with all the block choices they have, the editors went crazy and each used different blocks based on preference - which resulted to a lot of design inconsistencies across the website.

Developer #2 somehow made it possible for editors to insert text/tabs/images in the pre-defined way these plugins offer, but when more advanced features are needed, they had to hand over the website to more capable hands. Enter developer #3.. a seasoned PHP developer with proven experience under their belt. Were they able to deliver the advanced features that were needed? Yes. But PHP best practices do not necessarily equate to Wordpress best practices (unless you're using an object-oriented Wordpress theme like Sage). Developer #3 introduced object-oriented programming to the site's current implementation of BuddyBoss, which added a working but slightly confusing (almost unnecessary) complexity to the codebase. They were successful in adding advanced features to the site, but were apathetic to the worsening situation of the technical debt that the everyday user (editors) of the website suffers from.

And now, myself, the one who is destined to finish (and has recently put an end) to this train wreck of bad Wordpress design decisions...

This post has reached almost 800 words - I'll continue the planning and execution part on another post.

Top 5 Wordpress tips for a more efficient Gutenberg workflow

mike — Mon, 05 Apr 2021 12:15:28 +0000

Wordpress came out with Gutenberg for awhile now, but a lot of people hasn't made the switch yet or are still transitioning from their old page builder mindset. I listed out five tips that would help anyone improve their Gutenberg workflow, and build a site faster with the already fast Gutenberg.

1. Memorize keyboard shortcuts

Duplicate block

When building out pages it's more likely that you're duplicating certain blocks multiple times in order to convey information in your content - save time clicking and memorize this keyboard shortcut to improve your workflow.

(Ctrl + Shift + D on Windows, Cmd + Shift + D on macOS)

Remove block

It's best to use the keyboard shortcut in order to retain your level in the Gutenberg tree when removing multiple blocks.

(Alt + Shift + Z on Windows, Control + Option + Z on macOS)

2. Utilize Reusable Blocks

Gutenberg comes with the concept of reusable blocks - do you have a block that is re-used the same way on several pages on your site? It would be best to save this as a reusable block, that way it's easy to reuse this block across the site.

Take note that for one to be an effective reusable block, the block must have the same content throughout the whole site. A good example of an effective reusable block is a row containing a newsletter opt-in form that you can use multiple times across the site - and usually the content of such element doesn't change per page.

If the block changes per instance, it might be better to...

3. Utilize Block Patterns

Block patterns serve the exact purpose you think it would - it is a predefined block layout ready to be inserted and modified.

Instead of writing code to create block patterns the native way, there currently exists a plugin that adds Block Patterns to the Wordpress admin menu. View Block Pattern Builder on the Wordpress plugin repo.

4. Create blocks easier through ACF Blocks

Similar to block patterns where the native way to create them is to write code, there is a solution that lets you create Gutenberg blocks without heavy Javascript knowledge, one that mainly uses PHP - and this is ACF Blocks. It is a fairly new feature of the plugin Advanced Custom Fields for the Gutenberg editor, and has been an amazing solution to create custom blocks for site builds.

5. Use the `Group` block as a row

A lot of people are underwhelmed by Gutenberg because it looks barebones compared to existing Wordpress page builder solutions - but I believe this is an advantage that focuses on just having the right elements or blocks, and minimizing bloat.

One big feature that was missing for me at first was the Row element/block - contrary to a WPBakery, Divi, etc. build where a row is a must when creating layouts - hell, even Bootstrap requires using a <div class="row"></div> to use its grid system.

I found a workaround for this - I now use the Group core block as my row element in Gutenberg. Basically, all elements that would semantically be in a row, I would wrap in a Group block.

The main big benefit is being able to control all outer rows via CSS, using the selector .entry-content > .wp-block-group. This is especially helpful when you need to adjust the spacing universally for all rows.

Conclusion

Gutenberg maybe confusing at first but with these tips, it helps get Gutenberg closer to the existing page builder solutions. Modern Wordpress is going to this direction, and adopting Gutenberg to your workflow will help you improve as a Wordpress developer. Hope these tips help, and please share your tips in the comment section below!

Top 5 Must-Have Wordpress Plugins 2021 (Part 1)

mike — Sun, 04 Apr 2021 07:34:39 +0000

Did you know that 40% of the web is built on Wordpress? A time and tested CMS, here's a rundown of ten must-have plugins your Wordpress site could use as of 2021:

1) Advanced Custom Fields

Even before Gutenberg, the Advanced Custom Fields plugin has been a staple to extend the core Wordpress functionality. It introduced ACF Blocks in version 5.8 which has made ACF even more future-proof, now being a part of Wordpress' Gutenberg editor.

2) Akismet

Akismet comes with pre-installed with every installation of Wordpress, and that is for a reason. It has a setting where it can get rid of spam comments for you so you don't have to see the spam - it just silently goes away. Ain't nobody got time for that.

3) GravityForms

I could never build a Wordpress site without GravityForms. It simply is the best forms solution for Wordpress. Whether you need a simple newsletter opt-in form, or if you need a dynamic multi-page form with conditional fields - GravityForms does the job well.

4) Better Search Replace

Sometimes you just need to do a quick search and replace on your website to fix a certain typo. Or a raw HTML code that's scattered on multiple pages. Using Better Search Replace lets you do a dry run - that way you can search your database without finalizing the changes. It's the most straightforward search and replace plugin I've used through the years.

5) Duplicate Post

There's a lot of duplicate post plugins on the Wordpress plugin repo, but Duplicate Post has been there for awhile now. It's been so effective at what it does that the team behind Yoast SEO, Yoast, has acquired Duplicate Post last 2020. That's just a testament to how good the plugin is.

Please let me know if you agree with this list - and feel free to share your top 5 Wordpress plugins as well!

DEV Community: mike

Building a Wedding Website with Next.js, Supabase, and Tailwind CSS

Introduction

Tech Stack

Phase 1: Setting Up the RSVP Form

Phase 2: Integration with Supabase

Phase 3: Testing with Cypress

Conclusion

Next Steps:

Untangling Wordpress Spaghetti: a tale about technical debt

Top 5 Wordpress tips for a more efficient Gutenberg workflow

1. Memorize keyboard shortcuts

2. Utilize Reusable Blocks

3. Utilize Block Patterns

4. Create blocks easier through ACF Blocks

5. Use the Group block as a row

Conclusion

Top 5 Must-Have Wordpress Plugins 2021 (Part 1)

1) Advanced Custom Fields

2) Akismet

3) GravityForms

4) Better Search Replace

5) Duplicate Post

5. Use the `Group` block as a row