Cambridge Resilience Web

Inspiration

Cambridge Resilience Web was inspired by a hand-drawn web created by Meg Clarke, which maps all the wonderful organisations working towards building a sustainable future of the city. I then created a digital version of it, and it evolved from there.

What it does

It helps local groups to become more connected to each other and build solidarity between movements. It also allows local residents to more easily find out what's out there, and join the groups that closely align with their interests. It is particularly the groups that need the most help that don't often show up high in search results or don't have a highly visible public profile. It also allows representatives of local groups to sign up and receive permissions to edit their own listing as they wish from an admin dashboard.

How it was built

Although I am the only web developer that worked on the project, other members have contributed in the ideation and decision-making process, and they are all listed . They all gave their permission for me to use this project in my submission, as I am the sole contributor to the software side of the project.

• The web application was built in Next.js/React, using their API Routes feature (serverless functions) and the Prisma CRM to connect to a Postgresql database hosted on Digital Ocean.
• The authentication system is built with NextAuth.js, which is connected to Prisma to store the user accounts in the database mentioned previously.
• The UI is built using Kendo React and Chakra UI components - the reason both were used is because they each have their strengths. Kendo React components are particularly powerful for data display components, hence why they were heavily used on the admin dashboard.
• The visual web is created using the Network module of vis.js, wrapped around vis-network-js which enables it to be used more easily in React.
• Some content (e.g. the text on the About page) is stored in GraphCMS, and relevant content is fetched at build-time on each page. Thanks to the Next.js incremental static regeneration feature, each page load also checks if new content has been published, and if it has then that specific page gets rebuilt (rather than the entire site).
• The Kendo React components that I used are: TreeList, Dialog, Form, Input, MultiSelect and Dropdown

Challenges I ran into

• The Postgresql database wasn't hard to set up, but I quickly found that when multiple users were editing the data simultaneously, the database was running out of connections, due to being on the cheapest price tier on Digital Ocean. I then learned about connection pooling and the fact that this is a common issue with serverless functions, and I set up PGBouncer to do the connection pooling and avoid reaching the connection limit as quickly.
• The vis.js component requires the data to be in a very specific format, which is quite different from how it is stored in the database. On top of that, some processing is required to group the nodes by categories, and compute the edges between nodes. This kind of computation would be too heavy and wasteful to do on every page load, not to mention potentially even more often due to React components re-rendering. Therefore, I created a serverless function (/api/updateRemote) that does that computation on demand, and sends the computed JSON to GraphCMS, which then gets fetched by the web app.

Accomplishments that I'm proud of

• Setting up a database in the cloud - I've never done that before.
• Authentication system - also first time doing that.

What I learned

I learned a lot in the past few weeks. A few things that stand out particularly are Prisma and setting up a database schema, and running migrations to make changes to that schema. Also using react-query for optimistic updating and tracking queries. And of course, I learned a lot about Kendo React and how to integrate it into an application.

What's next for Cambridge Resilience Web

I will work on a Permissions page, where admins can assign edit permissions to certain users, and invite users by email to edit their listings. I am also planning a feature where each individual listing can have their own separate page, where they can add more rich content like images, or embed a signup form. I would also like to get a few more developers involved, and package the application up into a more generic Resilience Webs project, that can be used to deploy similar apps for other cities. Since I'll be moving to a different city to the North of the UK called Durham, I'll be creating once for that place if there isn't something similar created already.

Built With

• graphql
• kendoreact
• next.js
• postgresql
• prisma
• react
• vercel