|
1 | | -# OSCEBossKey |
| 1 | +# O S C E B O S S K E Y |
2 | 2 |
|
3 | | -[](https://travis-ci.org/fac-14/OSCEBossKey) |
| 3 | +[](https://travis-ci.org/fac-14/OSCEBossKey) [](https://codecov.io/gh/fac-14/OSCEBossKey) |
4 | 4 |
|
5 | | -[](https://codecov.io/gh/fac-14/OSCEBossKey) |
| 5 | +:sparkles: **[VIEW THE APP](https://oscebosskey.herokuapp.com/)** :sparkles: |
6 | 6 |
|
7 | | -Weeks 13-16 > Tech for Better project |
8 | | -## [Run in the browser](https://oscebosskey.herokuapp.com) |
| 7 | +## Doctor doctor, I think I'm a bell? |
9 | 8 |
|
10 | | -## Instructions to run the program locally |
| 9 | +:ambulance: Let's see if we can't give this a ring, then. |
11 | 10 |
|
12 | | -**Install Node.js and NPM** |
13 | | -Follow the instructions in [this article](https://blog.teamtreehouse.com/install-node-js-npm-mac) to complete the installation. |
| 11 | +We wanted to make an **OSCE revision app** using the [JAMstack](https://jamstack.org/)... |
14 | 12 |
|
15 | | -**Open Terminal and navigate to the folder in which you want to save the repo** |
| 13 | +... that's **responsive**, **mobile first** and features **swipe functionality**\ |
| 14 | +... that's rendered in **React** on the client side\ |
| 15 | +... that's styled with **SASS** and **styled-components**\ |
| 16 | +... that uses an **Express proxy server** to route our **Airtable** requests and hide our precious API key\ |
| 17 | +... that we can deploy on **Heroku**\ |
| 18 | +... with unit and integration tests with **Jest** & **React Testing Library** |
16 | 19 |
|
17 | | -**Download a local version of the repo** |
18 | | -`git clone https://github.com/fac-14/OSCEBossKey.git` |
| 20 | +## Wait, what's an OSCE? |
19 | 21 |
|
20 | | -**Navigate to the downloaded repo** |
21 | | -`cd OSCEBossKey` |
| 22 | +"An objective structured clinical examination (OSCE) is a modern type of examination often used in health sciences," says Wikipedia. It is a hands-on, real-world test that, in short, has actors roleplay a medical condition while a medical student looks to diagnose. Pretty cool! |
22 | 23 |
|
23 | | -**Install the dependencies needed to run the server** |
24 | | -`npm i` (this could take a couple of minutes depending on internet connection) |
| 24 | +## Our Tech Stack |
25 | 25 |
|
26 | | -**Boot up the server** |
27 | | -`npm start` (this could take a few seconds) |
| 26 | +:love_letter: React (with React Router, HammerJS and Styled Components)\ |
| 27 | +:information_desk_person: Express\ |
| 28 | +:gift: Parcel\ |
| 29 | +:heart_eyes_cat: Babel\ |
| 30 | +:books: Airtable\ |
| 31 | +:relieved: Jest, React Testing Library, Supertest and Codecov\ |
| 32 | +:bulb: ESLint / Prettier\ |
| 33 | +:family: Eve, Martin, Monika & Nathalie |
28 | 34 |
|
29 | | -**Navigate in your browser to the port shown in your Terminal** |
30 | | -URL: `localhost:3333` |
| 35 | +## How do I run this code locally? |
31 | 36 |
|
32 | | - |
| 37 | +**Prerequisites:** Node.js, NPM and no allergies to terminals. |
33 | 38 |
|
34 | | -Don't worry if you have any problems with this, we can fix any problems on Friday. |
| 39 | +```bash |
| 40 | +$ git clone https://github.com/fac-14/OSCEBossKey.git |
| 41 | +$ cd OSCEBossKey |
| 42 | +$ npm i # this will likely take a couple of minutes |
| 43 | +$ echo "AIRTABLE_API_KEY=the_actual_key_here" >> .env |
| 44 | +$ npm test # this will make sure you're all setup and good to go |
| 45 | +$ npm run |
| 46 | +``` |
| 47 | + |
| 48 | +Then point your browser to `localhost:3333` (or the port the server says in your terminal) and you're golden :+1: |
| 49 | + |
| 50 | +## Functionality |
| 51 | + |
| 52 | +The app is divided into four main sections, with our work in this sprint being on creating a full user journey across the **History** section. Here's what they do: |
| 53 | + |
| 54 | +1. **History: A journey where an actor assumes the role of a patient with a medical history - such as a 52-year-old heavy smoker with chest pain.** _(Our focus for this sprint!)_ |
| 55 | +2. **Examinations**: A medical student would follow a procedure without the associated history, such as investigating a hip or ankle. |
| 56 | +3. **Extras**: Additional information and reference about common procedures, such as inhaler technique. |
| 57 | +4. **Stats**: Data visualisations of user journey over time, ultimately to show students which areas they are doing well in and areas that need more attention. |
| 58 | + |
| 59 | +Our _History_ section allows users to either study from a pre-created list, or add (and then revise) their own cases to the list. Swipeable screens allow the actor taking on the role of the patient to understand their medical history while the medical student diagnoses, as well as easily check off the things they observe the medical student doing. |
| 60 | + |
| 61 | +All in all, much easier than lugging around a backpack of heavy textbooks! |
| 62 | + |
| 63 | +## Some of the nicest bits |
| 64 | + |
| 65 | +- **Resuable Components**: We are obsessed by code drier than Jacob's Cream Crackers, so being able to re-use as much as possible - such as in our [api calls](https://github.com/fac-14/OSCEBossKey/blob/2184ff3510355e5429940e707b44a5ac32f85ee9/src/app.js#L29-L41) and [category listing component](https://github.com/fac-14/OSCEBossKey/blob/2184ff3510355e5429940e707b44a5ac32f85ee9/src/components/CategoryListing.js#L76-L85) - gives us major warm fuzzies. |
| 66 | +- **Pure Utility Functions**: We :heart: React, but we also like keeping our functions pure - so we created our [utility functions as testable pure functions](https://github.com/fac-14/OSCEBossKey/tree/master/src/utils) and then imported them into React as necessary. |
| 67 | +- **TDD API calls**: We built our [API responses up with pure TDD](https://github.com/fac-14/OSCEBossKey/blob/master/__test__/app.test.js), which was totally :ok_hand: because they're rock-solid and we can trust they work. |
| 68 | +- **Swipe Right (& Left)**: Our user journeys are mobile-focused, where swipe actions are a normal user behaviour. But browsers still have a bit of a tricky time making them work. We researched a _lot_ of ways around this, and ended up using HammerJS because it had a small footprint, [easy implementation](https://github.com/fac-14/OSCEBossKey/blob/2184ff3510355e5429940e707b44a5ac32f85ee9/src/components/Pages/Revision/RevisionContainer.js#L61-L73) and the functionality we needed. |
| 69 | + |
| 70 | +## Prototyping |
| 71 | + |
| 72 | +As we were a pair-programming duo & a keen PO, we definitely took time to **prototype** everything out in Figma to make sure we were aligned and we could focus on implementing the code in a clean, efficient way - because it would be a little frustrating to realise you need to make an all-important button from scratch because you forgot to plan for it :scream: |
| 73 | + |
| 74 | +Our Figma prototypes served us really well in testing our user journey until we were at a stage where our app got to the point it was able to be demonstrated. Here's how it looked: |
| 75 | + |
| 76 | + |
| 77 | + |
| 78 | +## And the next sprint... |
| 79 | + |
| 80 | +We are **super proud** of the work we managed to do in a single sprint, but there's obviously loads of stuff we weren't able to include. We think we've got a totally kickass MVP but if we had more time we'd look at: |
| 81 | + |
| 82 | +1. Coding out the Examinations and Extras sections - we have basic support in now, but this could be expanded on for sure |
| 83 | +2. More tests! Test ALL THE THINGS! We think we've done a good job here but we're always striving for the best. |
| 84 | +3. Creating a robust authentication system (this is an entire sprint of its own) |
| 85 | +4. With proper user support, we'd love to make a really awesome statistics page - detailing things like average score and most missed marks |
| 86 | +5. Transform our potent webapp into a React Native delight |
0 commit comments