Skip to content

Drala-Mountain-Center-App/dmc_front_end

Repository files navigation

Contributors Forks Issues Stars

DMC Logo
timer

Table of Contents

About

The Drala Mountain Center App was made in association with Drala Mountain Center. The App allows users to see scheduled programs, meditate with a meditation timer, view videos embeded in the app, view their meditation stats, view images of DMC, and donate to DMC via their website.
The dmc_back_end application provides a single GraphQL endpoint with all app information. The team chose GraphQL for the simplicity of having a single endpoint with the capability to be flexible and efficient when handling queries from the front end application. The front end chose to React Native for faster development of mobile application.

Built With:

ruby rails postgresql javascript react-native heroku graphql expo

Minimum Viable Product

  • Recreate the feel of Drala-Mounatain-Center's web application as a phone application.
  • Create a link to Drala Mountain Center donation site, Network for Good within our application.
  • Create a meditation timer page that provides user with a soothing experience while meditating.
  • Database of DMC video talks, searchable, possibly using Vimeo.
  • Import program calendar from DMC website backend.
  • Integrate GraphQL as a stretch technology to facilitate API calls to our backend
  • Integrate React Native as a stretch technology to prepare application for IOS deployment.

Possible Extensions

  • Login for user, to allow for statistics collection.
  • User data collection displayed: "Here's your meditation habits, you've watched these videos".
  • Randomized daily quotes from highly regarded figures linked to DMC or lojong slogans.
  • Stripe/Auth.net/square for payment integration (likely prefer Stripe or something that can take apple/google pay, Paypal, Venmo, etc.
  • Hosting on Android and Apple Store.
  • AWS/Docker integration.
  • Like/Love buttons/discussion boards for videos.
  • Specific Advanced Practice Trackers (Ngondro/Stroke Practice).
  • Integrate Web-sockets to add live chat feature.
  • Add collaborative meditation option (using google meetup, facetime or other video app, not sure what the options are)

Application Tour

login calendar videos/photos

Set up

  1. Fork this repo
  2. Clone the repo to your local machine
  3. Go to the app store and install Xcode
  4. Once you've installed, you should be able to type npm i, then npm run ios and open the ios simulator
  5. Pick the simulator model of your choice in the xcode preferences, ie: iPhone 14
  6. The simulator will reload when you make changes

Login Instructions

You are able to use this app without logging in; however, to use functionality of storing and viewing personal meditation stats you can login with the following email address with any password at this stage of production:

Wins:

  • Implementing our first app with React Native
  • Successful collaboration as a cohesive 6-person full-stack team
  • Agile work style embraced with efficiency and adaptability
  • Achievement of Minimum Viable Product (MVP) and subsequent extensions
  • Seamless integration of GraphQL and Apollo Client
  • Animations with meditation timer/stats

Challenges

  • Overcoming cache policy challenges and troubleshooting Apollo Client errors
  • Implementing Cypress end to end testing with React Native
  • AsyncStorage for storing user information with mutation query's
  • Learning curve with implementation of React Native, compatability and styling within components

Wireframe

wireframe

GraphQL Fields:

Queries and Mutations:

  • Example Query:
query{
 allUsers {
   id
   firstName
   lastName
   email
   member
 }
}
  • Example Mutation:
mutation {
    createMeditationByEmail(input: {
        totalSittingTime: 10,
        userEmail: "[email protected]"
    }){
        id
        totalSittingTime
        createdAt
        completedBy {
            id
            firstName
        }
    }
}

List of queries

User Queries
  • queries: allUsers, user(id: user_id), userByEmail(email: "user_email")
  • fields: id, firstName, lastName, email, member, totalMeditations, totalMeditationTime, averageMeditationTime
Video Queries
  • queries: allVideos, videoById(id: video_id)
  • fields: id, title, description, speaker, topic, length, dateRecorded, videoUrl, thumbnailUrl, embedCode, vimeoId
Program Queries
  • query: allPrograms
  • fields: name, startDate, endDate, content, image, price, url, registrationUrl, categories, teachers

List of mutations

User mutations
  • Not yet available for public production use
Meditation mutations
  • mutations: createMeditationByEmail(input: { totalSittingTime: Integer, userEmail: "String"
  • available fields: id, totalSittingTime, createdAt, completedBy { any_user_field }

Schema

DMC Schema Image

Contributors

  • Reid Miller: Linkedin Github
  • Logan Cole: Linkedin Github
  • Alejandro Lopez: Linkedin Github
  • Sarah Moore: Linkedin Github
  • Sam McElhinney: Linkedin Github
  • Carol Bradsen: Linkedin Github

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published