We are building a web-app for InCommon, an organisation that helps connect groups of young people with their older neighbours in retirement homes to learn and build friendships together.
- In-Common
- Table of contents
- Team
- What is the application?
- Design
- Features
- Tech Stack
- Database Schema
- Installation
- Run Cypress tests
- Key Learnings
The web-app will enable InCommon participants (Schools & Retirement homes) to organise events with each other, in the process removing InCommon from the planning process. The web-app aims to create a tool with the sole purpose of event planning, moving the correspondence away from email where invites can be lost or forgotten,
During the design week we used Miro for the project planning and the Wireframing/Usability testing we used Figma
Design included but not limited to:
- User stories
- Usability questions
- Flow layout
- WireFraming research
- Interviews with Users were completed in 30 minute sessions with two members of the development team and one Product Owner present. The questions were asked by one member of the development team while the other took notes.
- Questions were non-leading with the aim of gaining as much insight as possible.
- We had a product owner meetings at the end of each week
- We provided daily updates of our progress to the Product Owners
- Usability testing with 5 users
What can you do?
- Able to register as school/residential home
- Create events linked to Airtable
- See list of current events
- reset password
- Help page for contacting In-Common
- removing event and confirmation
- date-io/date-fns
- emotion/react"
- emotion/styled
- mui/material
- nprogress
- react-dom
- airtable
- firebase
To use this project please follow the steps below
- clone this repo on your device using the command
git clone cdinto thein-Commonfolder- Run
npm installto install dependencies - Create a
.env.localfile in the root folder. It should contain the following:
NEXT_PUBLIC_AIRTABLE_API_KEY=Airtable API Key
NEXT_PUBLIC_AIRTABLE_BASE_ID= Airtable Base ID
- Run
npm run devto run the app
This is a Next.js project bootstrapped with create-next-app.
- Run
npm run testin your terminal, and you should see the Cypress app start up. - By default Cypress looks in the cypress/integration/ directory for test files. It will run anything inside this folder.
- You should see this files show up in the Cypress app under “Integration tests”.
- You can click the file name to run it with Cypress. This should open up a browser with a “test sidebar” on the left.
- In the cypress/fixture/ directory you can find the auth-user.json file, this file contains the email and password we are using for testing.
- In the cypress/support/ directory you can find the commands.js file, this file contains the Cypress configs,the helper functions. We have 2 login function, one for 'test authentication with Firebase' and one for using the UI to log in a dummy user. We are using the UI to test the log in functionality but you can use the Firebase function by uncommenting the code.
- We recommend to logout after each test.
- Using Airtable
- Making login Approval linked with the Airtable API
- Material UI
- Initial Sprint planning
- Finding it hard to take breaks
- Vercel deployment issues
- Deleting or editing
- API keys being visible (Issue resolved) 👍
Deployment of the project to Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.
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!