WholeLifePub
Inspired by The Art of Manliness, I recreated its design to sharpen my front-end styling skills. What started as a static page turned into a full-stack blog app using Next.js and DatoCMS, combining a clean, responsive design with dynamic content management.
My Role
As the sole developer for the web application, I handled both frontend and backend development.
Tech Stack
This project is built with Next.js and React for the front end, using DatoCMS and GraphQL to manage and fetch content dynamically. The styling is done with CSS, and the app is deployed on Vercel for a smooth and reliable experience.
Home page with an elegant and user-friendly design
Proccess
The blog lets you manage content dynamically with DatoCMS and fetch it using GraphQL, making updates super easy. It’s fully responsive, so it looks great on any device. Built with Next.js, it’s fast, SEO-friendly, and performs smoothly. The design stays true to the look of The Art of Manliness, and deploying it on Vercel keeps everything running reliably.
Post View Page
Related posts section underneath the full post
What I learned?
Working with DatoCMS was both fun and easy, and I picked up some great new skills along the way. I learned how to use LQIP(Low-Quality Image Placeholders) for smooth image loading, which really improved the user experience. I also got hands-on experience working on custom structured components of DatoCMS to render blog content with custom styling. Querying GraphQL became second nature as I fetched dynamic data for the blog, and I gained a deeper understanding of SEO and the techniques to optimize content for better visibility. This project really helped me grow as a full-stack developer! Feel free to take a look at this working app demo: