South Jersey Deb (Front End)

Using: Astro, JSX, JSDoc, Sass, Render.io

🔥 Check the website's Google Lighthouse scores: https://southjerseydeb.com

Project Highlights

1. Astro (JSX) front-end framework
2. Headless CMS (Strapi) back-end
3. REST API data fetching (Strapi)
4. Type checking (JSDoc w/ TypeScript)
5. API integration (Formspree)
6. Cloud hosting (Render)
7. CI/CD (GitHub Actions)

Code Excerpts

REST API

Fetching and rendering data from the CMS:

southjerseydeb-astro/src/scripts/fetchData.js

Line 14 in 2078537

const apiUrl = `https://southjerseydeb-strapi.onrender.com/api/${endpoint}?populate=*`;

southjerseydeb-astro/src/components/about/About.astro

Line 7 in 2078537

const data = await fetchData('about');

Props

Using props in Astro components:

southjerseydeb-astro/src/components/listings/Listing.astro

Line 55 in 2078537

<Features beds={bedrooms} baths={bathrooms} sqft={sqft} />

southjerseydeb-astro/src/components/testimonials/Quote.astro

Line 17 in 2078537

<span>{author}, {relationship}</span>

Type Checking

Using JSDoc to check types:

southjerseydeb-astro/src/scripts/fadeQuotes.js

Line 4 in 0279967

* @param {string} selector - The CSS selector for the elements to be faded.

southjerseydeb-astro/src/scripts/fetchData.js

Line 6 in 0279967

* @returns {Promise<any>} - The data fetched from the API.

southjerseydeb-astro/src/scripts/toggleMobileNav.js

Line 21 in 0279967

* @type {NodeListOf<Element>}

Contact Form

Integrating Formspree endpoint into the contact form:

southjerseydeb-astro/src/components/contact/Contact.astro

Line 15 in 2078537

<form action=`${endpoint}` method="POST">