Giter VIP home page Giter VIP logo

tritonse / dfm-sideline-sidekick-app Goto Github PK

View Code? Open in Web Editor NEW
0.0 0.0 0.0 2.14 MB

Mobile app to provide information regarding medical situations for volunteers on the sideline of sports games, produced in collaboration with the Division of Sports Medicine at UCSD.

Home Page: https://sideline-sidekick-app.web.app

License: MIT License

JavaScript 22.22% TypeScript 70.77% Shell 3.62% CSS 0.39% HTML 3.01%

dfm-sideline-sidekick-app's People

dfm-sideline-sidekick-app's Issues

Home Page

Implement this page, with the user's bookmarks being displayed rather than "Commonly Viewed". See Bookmarks pr for how to fetch bookmarks. Vinayak will be working on the "view all", so no need to worry about this page.

Also, refactor the bottom bar bookmark icon to be the home icon, and make sure this page routes to the global search page (in V2 Final in Figma):
image

image

Bookmarks

Create a file with functions that allow creating new bookmarks, deleting existing ones, and fetching all bookmarks. These should be stored on device's local storage. The title of the page being bookmarked should be sufficient.

General Principles Main View - Routing

Make buttons on general principles main view clickable, and make them route to specific principles. See which principles are assigned to which category on Figma, and hardcode this for now.

Global Search Page

Begin implementing the Global Search Page, don't worry about showing specific categories, principles, or commonly viewed yet. Do frontend for the search bar, and implement functionality for the search, for now just use a hardcoded array to search in. Search should just be character matching for the titles of stuff - so no need for anything complex, think command+f, and only titles of documents should be checked.
image

Adding Emergency Flow

Implement this page for adding/editing an injury. Exclude the"Preview" and "Save Draft" buttons for now. Contact me if you have any questions about the backend side of things. Also, no need to do the checkboxes with the different emergency types for now, that'll be handled later.

image

Categories Page Component

Create this page, and make it dynamically fetch/display all the categories. Can exclude the sort order for now, and no need to make the edit button work for now, but make the delete button work as well. Note this page should be created as a component, as it also exists in the global search view by category section, so it should be able to display all the categories with type "Principles" or all categoreis with type "Emergencies". It should also be able to display all the emergency pages, not by category. Add backend routes if needed for those. Check figma for more specifics.

Principles view:
image

Emergency categories + all view:
image

Medical Emergency Page Continuation

Once medical emergency page pull request is merged, turn this page into a component that takes in a document following the medical emergency format/schema, and renders it based on the content. I.e, as input, the page should takes in an object following the backend schema.

image

This is an example of this. In this case, "Importance" would be rendered as a header, and the "The cervical spine ..." description would be rendered as text under it. This would all be in the "Overview" tab. If there's an array corresponding to a header, then render this as bullet points.

Backend Setup

The purpose of this task is to establish a model structure for storing the data necessary for our app.
This file contains the data we need to store so far (but later down the line, will be added to/ modified):
https://tritonse.slack.com/files/U02N3DMTG9Z/F065QQQQFNW/sidelinesidekickmastercopy.pdf?origin_team=T579A1F0X&origin_channel=D04AWG4VCAW.

Furthermore, research how to fetch from the mongo database when connected to internet, and download locally onto the device for online use. This should work also to update a user's app, whenever an admin changes anything in the documentation. This framework should do: https://docs.expo.dev/versions/latest/sdk/filesystem/

General Principle Page Continuation

Make general principle page render documents dynamically, just modify the current tsx file to take in a general principle as input and show it correctly. Here is the schema for a general principle:
const generalPrincipleSchema = new mongoose.Schema({
title: String,
overview: {},
content: {},
});
Content is what all the page information contained inside. If content contains an array of objects, so if it looks like the following:
content: {[{ ... }, { ... }, ...]}
The following should be shown, where each array entry is its own page:
image

If content is simply just an object (no array in it), it should show up like the page you have already made. Let me know if you have any more questions about this!

Adding Principle Flow

Implement this page for adding a general principle. Exclude the preview and save draft buttons for now:
image

View All Components

Make the view all component which should be able to be used to view all of a certain category, i.e. general principles or medical emergencies.
image

Search Page, Recent Searches

Implement functionality to store recent pages the user has opened up from the search, and the frontend display for this.

Download Data onto User Device

Start by creating a new directory in the frontend folder that is responsible for interacting with the device's file system. For this task, implement the method that fetch the data from MongoDB and downloads it onto the user's device. First priority is to just make a working method that does this, then if time, implement logic to check if the user's device has the latest version and needs to fetch new data (may need to add version number to mongo database).

If a user has an outdated version, the current info stored on their device should be wiped, and all the documents should be download from mongodb onto their device again. This makes updates simpler, as rather than checking which documents have been deleted/added/newly added, can wipe and readd everything.

Helpful documentation: https://docs.expo.dev/versions/latest/sdk/filesystem/

Category Backend Schema + Routes

Make a "Category" schema with a title, and an array of titles, which are the emergencies/general principles that are in this category. Also there should be a type to distinguish whether this hsould go on the home page or the general principle page.
Example:
{
title: "Inclement Weather",
items: ["Lightning", ...etc],
type: "Emergency" or "General Principle"
}
We need routes for creating a category, deleting one, adding a principle/emergency to a category. For context, these categories will be the ones populating the home page buttons and the general principle ones.

Medical Emergency Page

Implement the page for showing a medical emergency - can just hardcode the page information for now. In the future, this should fetch from the user's device storage, but this will be implemented later once we know exactly how we will store it.

For future reference on fetching from user's device: https://docs.expo.dev/versions/latest/sdk/filesystem/

image

Bottom Bar + Navigation

Implement the bottom bar using the Figma designs, ensure each icon click routes to a new page, can use dummy pages for now. Also make sure the icons are updated when a user clicks as shown in the designs.

Navbar Extended

Make the navbar dropdown menu for general principles populate with the Categories of type "General Principle". See Lillian and Edward's new backend pr for the new routes you can use for this, as well as the Category schema.

Category Add

Make page to view and add items in a category, as well as the flow to add a category. Also implement logic so when anything is changed, i.e. a page is added or deleted, or a category, the version number gets changed:
image

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.