Pineapple Cutey Website Development | Michael Singh

Image of custom blog slider built for Pineapple website

Image of custom blog post page built for Pineapple Cutey website

Next.js • Tailwind CSS • TypeScript • Wordpress • GraphQL • GitHub Actions • Gemini

Pineapple Cutey is a passion project created as an opportunity to explore a more custom approach to WordPress development while deepening my understanding of React and Next.js. An earlier version of the site was built directly within WordPress using the Divi theme, but I wanted to move beyond the limitations of a traditional WordPress frontend and create an experience where the interface could be designed and developed with much greater control. The site was rebuilt as a headless WordPress application, with WordPress retained as the content management layer and Next.js handling the frontend. The project initially consumed WordPress's REST API before being migrated to GraphQL, providing an opportunity to explore different approaches to querying and structuring content. TypeScript was introduced across the application to improve consistency and provide stronger type safety as the project developed. Tailwind CSS became a major part of the frontend architecture, allowing the interface to be built through utility-based styling while giving me the opportunity to explore its strengths and limitations within a larger custom build. Additional libraries were introduced where they added value, including Cheerio for manipulating HTML returned from WordPress, Ldrs for loading animations, and Motion for page transitions and subtle interaction. The project also incorporates an automated, human-in-the-loop content workflow using GitHub Actions and Gemini. Scheduled workflows pull from a defined set of information sources and use that information to generate blog content and accompanying imagery. Rather than publishing automatically, generated posts can be reviewed and refined before being approved for publication, keeping editorial control within the workflow. This creates a balance between automation and human oversight, reducing repetitive content preparation while maintaining control over the quality and relevance of what reaches the site.

tl;dr

Rebuilt a WordPress site as a headless Next.js application, exploring GraphQL, TypeScript, Tailwind CSS, animation, and an AI-assisted content workflow with scheduled generation and human review before publication.

Key Lessons

Curiosity

Exploring headless WordPress, GraphQL, Tailwind CSS, and Next.js provided an opportunity to test different approaches and deepen my understanding of modern web architecture.

Adaptability

Moving from the WordPress REST API to GraphQL and introducing additional libraries and workflows required an approach that could evolve alongside the project.

Balance

Combining automated AI-assisted content generation with human review demonstrated the value of balancing efficiency with creative and editorial control.