Lizard Kings

Web Developer

Brief

I created a responsive website for Lizard Kings, a local business, using Bootstrap, HTML, CSS, and JavaScript. The site includes multiple pages with interactive elements, automated email confirmations, and Google Sheets integration for easy booking and shop management. I am also collaborating with Cape Coral Technical College to develop custom graphics for the site.

What I Worked On:

  • Developed a responsive website using Bootstrap.
  • Designed a user-friendly home page.
  • Added interactive elements like image carousels, pop-up reviews, and FAQs.
  • Embedded a Google Form for bookings.
  • Integrated automated emails and Google Sheets for booking management.
  • Set up a shop page with items and a checkout link to Square.

Team Size: 1

Skills Used: HTML/CSS, Bootstrap, Javascript, Apps Script, Github

Project Length: 3 months (on-going)

Platform: Mobile and PC (Responsive)

Website

Automated Emails and Google Sheets Management

This task involves automating the booking process by using Google Forms and Sheets. It simplies the data collection process, allows automatic email confirmations to be sent to users, and notifies the business owner of new bookings. This reduces manual effort and helps keep all booking data organized and accessible, while also keeping the business well-informed for each new entry.

How I Achieved This:

  • Embedded a Google Form on the website to collect booking details directly into Google Sheets.
  • Used Google Sheets' Apps Script to automate notifications.
  • Configured emails to confirm user bookings.

The form captures user details like name, contact, and a custom message. When submitted, it automatically populates a Google Sheet, serving as a centralized database to avoid manual data entry.

Google Apps Script is used to automate tasks in Google Sheets. A script is set up to run on form submission. The script fetches the most recent row, composes an email with the booking details and link to the spreadsheet, and sends it to the business owner.

A second script handles sending confirmation emails to users. This is also triggered by form submission. The script extracts the user's email and booking details from the form submission, then sends a confirmation message.

Shop page under development.

Shop Page and Checkout Integration

The shop page features a structured layout using Bootstrap card components to display product details, including images, titles, and prices, in a responsive grid. Each product card includes a "Buy now" button linked to a Square checkout page, enabling secure and seamless payment processing. This setup ensures a smooth shopping experience by presenting products clearly and facilitating immediate transactions through Square's secure payment system.

How I Achieved This:

Used Bootstrap's grid system (row and col-md-3) to create a responsive layout for product cards. Each product is displayed in a card component with an image, title, and price, styled to maintain a consistent appearance.

The href attribute of the button directs users to a Square payment page. This URL is provided by Square and ensures that payment processing is handled securely. Users can view product details while staying on the Lizard Kings website, enhancing their shopping experience and encouraging further engagement with the site's services.

Back to Projects