The first phase of the project, a high-fidelity interactive prototype, is finally complete! This iteration is a sort of detailed rough draft showcasing the design and functionality of the website, mostly using placeholder content.
This version enables the stakeholders to explore a tidy, functional product and give me feedback on what should be adjusted or added next.
Gallery
The final straw for this iteration was the addition of the Gallery page.
I've implemented a simple, maintainable gallery solution: the gallery automatically displays any images added to the public/gallery/ directory. This means images can be uploaded directly into this folder, and they'll automatically appear with the next site build.
To achieve this functionality, the /gallery route is rendered dynamically on the server:
export const dynamic = 'force-dynamic';
Rendering the page server-side allows the use of Node's built-in fs module to directly access files on the server:
const galleryDir = path.join(process.cwd(), 'public', 'gallery');
let allFiles;
try {
allFiles = await fs.readdir(galleryDir);
} catch (e) {
console.error('Could not read gallery directory:', e)
allFiles = [];
}
// Filter to only image files (jpg, png, gif, etc.)
const images = allFiles.filter((file) =>
/\.(jpe?g|png|gif|webp|avif)$/i.test(file)
)
What's next?
I'll be utilizing Statsig to implement feature flags which will allow us to hide and show seasonal Hero sections without interacting with code.
Currently the Hero section says:
Open soon
Real Farm Fun
Available Through August 20:
Book Your Event | Vendor Application
Clearly, this Hero is only really valid until fall, when it'll have to be changed to say something like "Open Now" and link to the Visit page.
By using feature flags, I can make and test predefined content for the Hero section, but have them hidden until they are enabled in Vercel.
This feature is being tracked as Issue #2
Feature flags for hero
#2
Using Statsig, we can turn on or off certain features of the website. This will make it easy to hide and show predefined content, depending on the season, with no coding involved.
This is the currently defined hero. It should say something like "Open Soon", and provide links to booking options and a vendor application
This one should say something like "Open Now" and "Come visit us", and link to Activities, and the Visit page
This one should say "See you next year" and specify that we'll be opening in September. Link to Gallery, and to the Facebook page saying "follow us for updates"
Top comments (0)