humble
- dan running the UX hype
- judith devving the ops
- kin mastering the scrum
- reggie keeping the quality high
Stack
We are building an app that has a React frontend (see the client folder) with an node/Express backend that serves the React as well as a pSQL store, accessible to the frontend as an API.
Installation
First, clone the repo as usual.
In order to enable deployment but separate concerns as much as possible, we actually have three different npm environments - one at the root, one in the client folder, and one in the server folder. To handle installation for all of this, run the following code:
npm i && cd client && npm i && cd ../server && npm i && cd ..Scripts
You can then run npm run dev:start or npm run dev:build from any directory.
The former will run the Express server on port 3001, and listen for changes.
The latter will first do a fresh production build of the React app in the client folder, and then do the same as above.
Therefore, any changes to the client side code will require a full rebuild in order to see in the browser.
We are not currently using the React development server (booted by running npm start from the client folder) since it breaks without the Express server making the database API available - however, this would not be the case if we were handling our errors properly, so we aim to be able to at a later stage.
Running npm test in the client and server folders will run their respective test suites, while running it from the root of the project will run first the client tests, and then the server tests.
Goals
initial design phase
rapid prototyping
definition workshop
prototyping
humble sign-up user journey
-
As a user I would like to be able to sign up and make an account on humble.
-
As a user a user I would like to know what is expected from me and what I can expect from others on the humble platform.
-
As a user I would like to be able to know that my data is secure and my privacy will be respected.
-
As a user I would like to be able to create a profile that includes my name and postcode and a picture.
-
As a user I would like to be able to upload skills, experience or knowledge that I have to offer.
-
As a user I would like to be able to upload a problem that I would like help with to solve.
-
As a user I would like to be able to see a community map that shows what skills, experience or knowledge is on offer in my area.
-
As a user I would like to be able to search for by category for skills, experience and knowledge that is on offer in my area.
-
As a user I would like to be able to search by category for any problems that people have in my area that I might be able to help with.
-
As a user I would like to be able to sort my search results by trust or location.
-
As a user I would like to be able to look at another users profile and see their name, location and trust rating and history of their connections on the platform, and be able to make contact with them.
-
A a user I would like to be able to see my own profile, edit and delete it.
pre-user test
user testing/insights
1) consistency of styling and UI elements (caps, buttons, teach/learn toggle)
2) wording/language (make contact, teach/learn/skills/problems, onboarding)
3) map/list view default
4) navigation (mostly very easy, add skills/problems menu)
5) not understanding the app's concept??
post-user test
refinements were made
updates were applied
Final Figma
Style Guide
See our style guide here
Sprint #1
Architecture
Schema
Style Guide
See our style guide here
