This week I began building my full stack development website based on UN Sustainable Development Goal 6, Clean Water and Sanitation. From the outset, my aim was to create a prototype that was both visually engaging and informative. My initial concept focused on a water-inspired aesthetic, incorporating elements such as bubbles and fluid visuals, while still clearly communicating information around water usage and sustainability.
A key feature I plan to include is a water usage calculator that allows users to visualise their own consumption. I feel this approach has the potential to make sustainability issues feel more personal and impactful, rather than purely informational. To support this idea, I researched ways to present data visually and identified Chart.js as a suitable tool for displaying usage data through charts. This introduced me to the importance of selecting appropriate libraries that can enhance user understanding, which I plan to explore further as the project develops.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/calculator" element={<Calculator />} />
<Route path="/facts" element={<Facts />} />
<Route path="/ways-to-help" element={<WaysToHelp />} />
<Route path="/charities" element={<Charities />} />
</Routes>
This week mainly focused on setting up the core pages of the website. I found this process relatively straightforward, as it built on skills developed in previous projects, and the workshop guidance from Diana helped reinforce my understanding. I also began styling the site using CSS, which is the aspect of development I enjoy the most. However, this highlighted a recurring tendency to prioritise visual design over functionality.
Moving forward, I need to focus more deliberately on implementing the calculator logic and backend connectivity to ensure the website is not only visually engaging but also technically robust and aligned with the project’s sustainability aims.