Circles

Welcome to the Circles app, designed to help users find their circles. For the best performance access the circles web application via a Desktop or Laptop. Access the website here: https://circlesapp.netlify.app/.

The Problem

Watch our promo video here: https://www.youtube.com/watch?v=mioXPCu1JEo

Social isolation is becoming more prevalent in today's society and can be caused by a number of reasons. Poverty, grief, illness or disability to name a few. For these reasons, individuals can struggle to integrate into their local communities. This is where social prescribing steps in. Social prescribing, also known as community referral, allows health professionals to refer individuals to link workers who will then connect them to support in their community.

So how can we help link workers, help to combat social isolation and foster wellbeing via shared interests?

The Solution

Our solution was to design a web-based, centralised platform that allows users to quickly access reliable information on their local communities and to facilitate integration into those social circles, allowing them to easily join and keep track of their local events. The Ideation of this application has been designed and heavily influenced by our research and communication with the Social Prescribing Team at Citzens Advice.

Screenshots

Tech Stack

• Languages: Javascript, CSS3, PostgreSQL

• Frameworks: Next.js, React.js, TailwindCSS

• Libraries: Daisy UI, Mamba UI, Swiper, Framer motion, Fuse.js

• Server: Next.js, Prisma

• Authentication: Next/Auth

• Testing: Cypress, React Testing Library, Jest

• Deployment: Netlify

How to run Locally

First, clone the repo,

  cd circles

Install dependencies

setting it up, run:

  npm install or npm i

Start the server

npm run dev

Open http://localhost:3000 with your browser to see the homepage.

Documentation

• Figma
• Miro
• Excalidraw
• Trello
• Google spreadsheets
• Google Presentation

Improvements & Stretch goals

• Scroll bar on the account page needs to disappear when there are no events
• Develop the account platform for the Link workers. Features would include a component that allows Link workers to track their assigned clients.
• Fully responsive on mobile and tablets. MVP achieved as a web app.
• Schedule and carry out more real-world testing and empathy maps with the target audience. Collate feedback and integrate this into a new sprint.
• Group administrators have accounts to set up new groups on the platform. Requests to join groups could be made directly through the app
• Further integration of Next Auth with more tables added to the db for authorisation of different accounts.
• Delve further into accessibility and aim to achieve 100 on Lighthouse reports. Increase the ARIA coverage on the app.
• Build a more comprehensive testing suite which could be integrated into Github tools.

Challenges

• Database connections- Limited to 5 on our free plan. This made running the servers during development a balancing act when we sometimes required more connections.
• Deployment & merging: We had a good merging policy in place but occasionally road blocks appeared along the way. Eg: package-lock errors and empty components
• CSS consistency across the site
• Responsiveness across the site
• Date-Time formatting: Matching the dates produced by the date picker to the storage format in the db.

Authors:

• Camila Brizzi

• Danny Bains

• Gabriel Brocklesby

• Iona Meadows

• Isabelle Francis

• Matt Doherty

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!