MLINK

Content

• Mission
• Team
• Design Week
• Tech Stack
• Sprint One
• Sprint Two
• Installation
• Documentation
• Bugs
• Next Steps
• Acknowledgement

Mission 🚀

We were set on a mission by our Product Owner, Usama, to create a mobile-first web application that allows health professionals to network with each other.
🎊 We are proud to present our website! (Click here!) 🎊
You can also visit our 👉backend repo 👈 to see how our data was implemented!

Team 💼

• Amber 👼
• Khadija 🧚
• Shaya 🧜‍♀️
• Glenroy - Terence (Terry) 💥

Design Week 🎨

We came up with three different prototypes; the first and second one without our product owner and then a final prototype after taking Usama's goals and MVP priorities into consideration.
👉 View our Figma design process here! 👈

Tech Stack 🥞

• React.js
• Javascript
• Figma
• Jira
• GraphQL
• Hasura
• Heroku
• Netlify
• PostgreSQL

Sprint One

Backend

Sprint Two

Frontend

Installation 💻

• Clone the repo git clone https://github.com/fac20/mlink-frontend.git
• Install npm packages using npm install
• Create a .env file and store the hasura secret key within it
  • The variable name should begin with REACT_APP__ so that you can access it using _process.env.REACT_APP_ without the need to install any packages like _dotenv_ more info in the create-react-app docs

Documentation 📚

• Hasura endpoint: 👉 https://mlink-app.herokuapp.com/v1/graphql 👈

Known Bugs 🐛

• Readmore buttons in profile page - when one of these buttons are clicked it expands all the entries for each button

How to fix this:

• Set a unique state for each component that's using the dropdown

- Data to be displayed on the dashboard and network pages are not being returned even though it's being fetched. - User Id and Location are currenly hardcoded and should be changed once authorisation has been set up. - Authorisation! 🔒

Next Steps ✍️

• Fix all the above bugs
• Tests to be implemented
• Use a GraphQl client like URQL or Apollo for state management to easily fetch, cache, and modify application data, while automatically updating the UI.
• Set up authorisation and social login with Auth0
• Error handling - Create appropriate display messages for when the user encounters unexpected conditions
• Configure CORS on Hasura to be specific to certain domains and subdomains (it's currently default which is *)

Resources

• Using JWTs for GraphQL Authorization with Hasura
• URQL Docs
• Apollo Docs
• Configure CORS on Hasura

Acknowledgement 🥇

Thank you to everyone who helped us - whether it was through code or words of encouragement.

🦸 Special thanks to our heroes: 🦸

• Ivo
• Joe
• Sofia
• Izaak
• Reda

Most importantly, a big pat on the back for us, the dream team! ☁️ 🌠