Project 3: Interactive Full-MERN-Stack Application

This repository is for group 2's Project3 - Interactive Performant and Scalable Full-MERN-Stack single-page Application: 'Just In Time'. The main purpose of this project to build a full MERN stack single-page application, combined with a scalable MongoDB back end, a GraphQL API, an Express.js and Node.js server with a React front end, implementing user authentication with JWT to build a user-focused platform -all from scratch. This app will execute a design that solves a real-world need, with a focus on data and user demand.

Project Resources

👉Project Live URL - Heroku
👉Project Presentation Deck
👉Project Management
👉Project Issues
👉File a Bug/ Feature Request
👉Project Wire frame/Plan/Proposal
👉Meeting Notes
👉Repository
📖Setting up MongoDB Atlas
📖Deploy with Heroku and MongoDB Atlas
📖Project Management with GitHub Project Boards
📝Project ContactForm Slack Channel

Project Team (Developers)

Brandon Cody Van Buren	Jamel Eggleston	Hannah Brown	Dionne Noella Barretto
Backend	Backend	Frontend	Frontend

Just In Time Motivation

We all have experienced the panic scramble when a loved one is in need of medical attention be it via emergency response services or a guardian or caretaker and we are frantically searching for medicines, allergies, PCP information etc.

👉 Our motivation behind "just-in-time" was to help users like parents/guardians and caregivers organize all medical emergency information in a single page and make it accessible in few clicks!

User Story

AS an admin (for example: authorized parent or guardian)
I WANT to create a profile for my loved one to display all their medical emergency information
SO AS to allow caregivers/nannies/guardians/others authorized to view this information leverage it in time of need should an emergency manifest itself!

Project Requirements

Attempt to apply everything we’ve learnt over the past six months to create a real-world full-mern-stack application that we'll showcase to potential employers. Besides the user story and acceptance criteria our project fulfils the following requirements:

✔️ Use React for the front end.
✔️ Use GraphQL with a Node.js and Express.js server.
✔️ Use MongoDB and the Mongoose ODM for the database.
✔️ Use queries and mutations for retrieving, adding, updating, and deleting data.
✔️ Be deployed using Heroku (with data).
✔️ Have a polished UI.
✔️ Be responsive.
✔️ Be interactive (i.e., accept and respond to user input).
✔️ Include authentication (JWT).
✔️ Protect sensitive API key information on the server.
✔️ Have a clean repository that meets quality coding standards (file structure, naming conventions, best practices for class and id naming conventions, indentation, high-quality comments, etc.).
✔️ Have a high-quality README (with unique name, description, technologies used, screenshot, and link to deployed application).

Technology Used in this Project

Accessibility Testing:

IDE/OS:

Repository Hosting:

Website Cloud Hosting:

Design Tools:

Frontend:

Styling:

Backend:

Queries

Database:

Frameworks:

Linters:

ReadME:

Communication:

App Usage/ Installation Instructions

Depending on whether you are a parent/guardian OR a care giver, you should have the ability to login to the appropriate Portal and have access to either enter information for a Patient /Dependent Profile OR view the entered information for the Patient/Dependent being cared for in under 5 clicks!

Project Future Enhancements

⏭️ Display the nearest hospital, police station and urgent care facility with the shortest route / a direct phone number based on the caretaker’s location
⏭️ Connect the testimonial with the seed / backend database
⏭️ Ability for Admins to create copy template fields
⏭️ Ability to auto pin in the map on the landing page to display the nearest Fire station, Police station, UrgentCare facility based on users browser geolocation
⏭️ Ability for caregivers/ EMS to comment on stale information / request Parents & Guardians for further clarification on medicine/allergy or the diagnosis information
⏭️ Modal alert for the Contact form
⏭️ Ability for caretakers to easily look up medicine information for clarification using the API
⏭️ Continue to Improve Accessibility/Performance Page Scores

Mock-Up (Screenshots & Responsive UI View)

Landing Page:

Login Page:

Sign Up Page:

User Page:

FeatureRequest/BugReport:

Contact Form Page:

Contact Form Acknowledgement:

Patient Profile Pages:





Responsive UI:

AccessibilityScores (LightHouseReports)

Landing Page:

Login Page:

Sign Up Page:

User Page:

Profile Page:

Contact Form Page:

Presentation Requirements

Elevator pitch 🎤: a one minute description of your application
Concept 📖: What is your user story? What was your motivation for development?
Process ♻️: What were the technologies used? How were tasks and roles broken down and assigned? What challenges did you encounter? What were your successes?
Demo 💻: Show your stuff!
Directions for Future ⏭️ Development
Links 🔗: to the deployed application in Heroku and the GitHub repository

Grading Requirements

This project is graded based on the following criteria:

Technical Acceptance Criteria: 25%

🏁 Satisfies the following code requirements:

✔️ Application uses React for the front end.
✔️ Application has a GraphQL API with a Node.js and Express.js server, and uses queries and mutations for retrieving, adding, updating, and deleting data.
✔️ Application uses MongoDB and the Mongoose ODM for the database and protects sensitive API key information on the server.
✔️ Application includes user authentication using JWT.

Concept 10%

✔️ Application should be a unique and novel idea.
✔️ Your group should clearly and concisely articulate your project idea.

Deployment: 20%

✔️ Application deployed at live URL on Heroku and loads with no errors.
✔️ Application GitHub URL submitted.

Repository Quality: 10%

✔️ Repository has a unique name.
✔️ Repository follows best practices for file structure and naming conventions.
✔️ Repository follows best practices for class and id naming conventions, indentation, quality comments, etc.
✔️ Repository contains multiple descriptive commit messages.
✔️ Repository contains a high-quality README file with description, screenshot, and link to deployed application.

Application Quality: 15%

✔️ Application user experience is intuitive and easy to navigate.
✔️ Application user interface style is clean and polished.
✔️ Application is responsive.

Presentation 10%

✔️Your group should present using Google Slides, Powerpoint, or a similar presentation software.
✔️ Every group member should speak during the presentation.
✔️ Your presentation should follow the [Project Presentation Template](https://docs.google.com/presentation/d/10QaO9KH8HtUXj__81ve0SZcpO5DbMbqqQr4iPpbwKks/edit?usp=sharing).

Collaboration 10%

✔️ There are no major disparities in the number of GitHub contributions between group members.

Bonus

Fulfilling all three of the following requirements to turn your app into a PWA will add 10 points to your grade. Note that the highest grade you can achieve is still a 100:

❌ Uses a web manifest
✔️ Uses a service worker for offline functionality
❌ Is installable

How to Submit Your Interactive Full-Stack Project

Each member of your group is required to submit the following for review:

✔️ The URL of the deployed application.
✔️ The URL of the GitHub repository, with a unique name and a README describing the project.