Visit Jericho
Beta
Visit Jericho is a travel guide website for the city of Jericho, developed on the request of the non-governmental organisation Mosaic Centre Jericho. I designed and built this website from scratch using Next.js, TailwindCSS, GraphQL, and WordPress.
Stack
- Next.js
- Tailwind CSS
- GraphQL
Categories
- Non-profit
- Web development
- Web design
Background and goals
When I came across Mosaic Centre Jericho’s project brief on the Tech To The Rescue website, I got excited about the possibility of helping a passionate travel guide promote his city. Since Mosaic Centre Jericho created the content, I had full control over the design and development process and I wanted to make sure that the site balanced a modern feel for the users with the familiarity and ease of use for the website administrators. In short, I had three main goals in mind:
- Speed, performance, and SEO optimisation to provide the best user experience
- Headless CMS for the best performance and flexibility
- WordPress integration to allow the organisation to easily update the website in their familiar WordPress environment
Tech stack
Front end
Styling
Data
Testing
CI/CD
Deployment
Media optimisation
Hosting
To meet the project goals, I had to settle on a modern and reliable tech stack. WordPress as the CMS was a given, so I began a search for a compatible front-end/full-stack framework. With the Next.js App Router, I was able easily fetch the CMS data with GraphQL, while optimising performance.
As for the design, Tailwind CSS made styling both quick and consistent and worked seamlessly with component libraries such as Material Tailwind or Radix UI.
To test my code, I used Jest for unit testing (aside from the not-yet-supported server components) and Playwright for E2E testing. I also chose GitHub and GitHub actions for CI/CD, which allowed me to introduce feature branches and run tests on commits.
Netlify’s integration with Next.js made deployment a breeze, and Amazon Lightsail allowed us to link our WordPress instance in minutes. To further optimise media, we also used Amazon Cloudfront and S3.
Challenges
Code organisation
As for code organisation, I prioritised clarity and reusability. I used the Material Tailwind component library to ensure consistency. Since I needed to make some tweaks to meet the specific needs of the design, I created component directories with varying scopes next to my Next.js route directories.
Integrating different technologies
Some of the services we initially considered due to competetive pricing had not yet introduced full integration with RSC and the App Router. To take advantage of Netlify’s uniquely amazing integration without sacrificing cost-efficiency, I lowered the cost on the deployment side by pre-optimising images with Amazon Cloudfront and S3.