https://secret-refuge-10251.herokuapp.com/
Sangita Sunuwar, Emily Rever, Harry Mead, Artemis Gause
Brickworks & Octopus
As an MVP this product aims to showcase events hosted by Brickworks aiming to bring the local community together to facilitate social actions in the Tollington area. Users can see listed events and register interest in attending them or starting their own via the forms provided.
Emily, Harry
We decided to adapt the design and enhance the website on several fronts upon realising the enormous scope for improvement:
We increased the performance of the webpage in a number of ways. Text compression using parcel-plugin-compress siginificantly reduced the size of our website improving the overall first paint time. We separated all of our stylesheets by media query and code split our router to minimize the effects of render blocking css/script.
We ensured all mouse events could be ennacted using a keyboard. We also ensured full keyboard navigability. We also controlled the focus throughout the app using listeners in the root JS file whilst ensuring the focus order was the same as the html order. We used Aria attributes and labels when necessary.
We've improved the UI & UX to make the site smoother and more aesthetically pleasing
This project was an enomrous learning curve for us all and really helped us get to grips with React and its potential as a Front-end development tool. Here are a few potential ways of improving this product:
One of the main complications when trying to realise this project was imagining the website without users. Full user authentication will make the website close to autonomous.
When users are brought to the party, a whole lot more can be added to the website.
We definitely missed a trick here. Additional performance boost
We only really tested the routes delivering components and not the implementation of various html elements. A lot more testing could be done to guarantee easy future debugging.
Later in the project, when we were more familiar with react and website performance, we came to realise that we could import components only when needed. The same applies with page content and functions. We didn't dig much deeper into this but know that our website's performance could be improved further with code splitting
| Core | Testing | Additional |
|---|---|---|
| Javascript | Jest | Parcel |
| HTML | React-testing-library | Babel |
| CSS | Supertest | Concurrently |
| Express.js | History | React-Router-DOM |
| React.js | Nodemon | GZip |
| Airtables | Eslint | |
| Nodemailer | Heroku |
We feel slightly more intelligent
npm run parcel:watchnpm run parcel: buildnpm run dev
Want to take a look?
- git clone 'this repo'
- npm i
- add a config.env and ask for keys and passwords
- npm run parcel:build //populates dist folder
- npm run dev //to see webpage