insight•full

The insight•full app allows you to track your meditation sessions and add insights on how your session went. You can then view your practice over time and read your journal of insights gained during your sessions.

Working Prototype

View Node working prototype here: insight•full View React working prototype here: insight•full

Site Map: MVP

UX & User Stories: MVP

Landing Page

As a user, I want to understand what the app is so that I can decide if I want to sign up

Sign Up Page

As a user, I want to sign up so that I can save my information

Log In Page

As a user, I want to log in so I can have access to my tracker

Dashboard Page

As a user, I want to see my meditation stats so that I can have a better idea of how my practice is going

Add Session Page

As a user, I want to add my meditation day so that I can track my practice

Insights Page

As a user, I want to read my journal entries so that I can reflect on my practice

Settings Page

As a user, I want to log out so that I can keep my info safe

Change Password Page

As a user, I want to change my password so that I can keep my info safe

Designs

Landing Page

Landing Page Mobile

Sign Up Page

Log In Page

Log In Page Mobile

Dashboard Page

Dashboard Page Mobile

Add Session Page

Add Session Page Mobile

Insights Page

Insights Page Mobile

Settings Page

Settings Page Mobile

Change Password Page

Change Password Page Mobile

Screenshots: MVP

Technical

Meditation Tracker was built with:

Front End

• HTML5
• CSS3
• JavaScript
• jQuery

Back End

• Node.js
• Express.js
• MongoDB
• Mongoose
• mLab database
• Mocha and Chai for testing

Responsive

This app is built to be responsive to smaller screen sizes using a float-grid css and media screen width breakpoint of 700px for smaller screen sizes

Development Road Map

Features for future iterations include:

• Add ability to view one insight entry on a separate page
• Add filter to Insights page to filter by time, app, date
• Add links to meditation resources
• Add an app timer to meditate with

The typical command lines for capstone projects

Node command lines

• npm install ==> install all node modules
• nodemon server.js ==> run node server
• npm test ==> run the tests

React command lines

• npm install ==> install all node modules
• npm run build ==> build the react files in the "build" folder
• npm start ==> run react server on http://127.0.0.1:8080
• npm test ==> run the tests