Overview
A client, who is part of a local charity called Sit Stop, contacted me requesting for an update for their outdated website. The new website needed to be accessible for users of all ages, needed to be mobile-friendly and display the locations of all the seats available in local businesses
Sit Stop is a local charity that displays their logo on a sticker within local businesses, which means that the business has agreed to provide free seating to anyone who needs it, including the elderly, children, those with illnesses or those who are tired and struggling to walk.
Links
Tech Stack
I decided to use a modern tech stack for this website, but prioritised accessibility during every stage of the development. I used simple ShadcnUI components for buttons, in addition to the accordions for the FAQ section. I also built a large TypeScript data module to act as a single source of truth for all the Sit Stop locations.
Frontend
- TailwindCSS
- ShadcnUI
- TypeScript
- React
- Lucide React Icons
Backend
- Next.js
- Cloudflare
- Vercel
- Google Search Console
Features
- Static navbar with accessible icons
- Engaging carousel of images on landing page
- Collapsible FAQ section
- Location grid
- Location search feature
- News page
Future Improvements
In the future, I would like to implement a way to feature specific locations, such as a banner around the featured locations.
I would also like to implement a filter or sorting function within the locations page.
What I learnt
This project underwent a few iterations, with multiple meetings with the stakeholders. Changes that were made included:
- Accessibility improvements and line spacing standardisation
- Clear navigation bar which links to sections of the page
- Add captions to images
Therefore, I've learnt to prioritise accessibility from the start of new projects.