https://api.github.com/repos/ssarahs-lab/project2-moodtracker/contents/{+path}

This soloproject is a mood tracker made using HTML/CSS/Javascript frontend and Python/Flask/Jinja backend, with a PostgresQL database.

MIT License

project2-moodtracker

<div id="readme" class="md" data-path="README.md"><article class="markdown-body entry-content container-lg"><h2 dir="auto"><a id="user-content-mood-tracker-a-user-writes-their-story" class="anchor" aria-hidden="true" href="#mood-tracker-a-user-writes-their-story"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Mood Tracker: a user writes their story</h2>
<p dir="auto">Live site: <a href="https://moodtracker.onrender.com/" rel="nofollow">Mood Tracker app</a></p>
<p dir="auto"><em>Note the live site is currently being migrated from Heroku to Render, hence some bugs might appear and require ironing out, bear with me ;)</em></p>
<p dir="auto">A user wants to track their mood to know what variables affect it, and use it to find out what correlates with mood.
This may include:</p>
<ul dir="auto">
<li>Diet</li>
<li>Exercise</li>
<li>Sleep</li>
<li>Past stressors bothering them now</li>
<li>Future stressors bothering them now</li>
<li>Past activities elevating their mood</li>
<li>Future scheduled activities elevating their mood</li>
<li>User-added variables</li>
<li>Thinking styles that affect their mood</li>
</ul>
<p dir="auto">This tracker would help a user understand themselves better, and increase self awareness / emotional intelligence and the causes behind a high mood or low mood. They can then adjust their lifestyle based on this data.</p>
<h4 dir="auto"><a id="user-content-languages-used" class="anchor" aria-hidden="true" href="#languages-used"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Languages used:</h4>
<ul dir="auto">
<li>HTML/CSS/Javascript</li>
<li>Python/Flask/Jinja</li>
<li>PostgresQL</li>
</ul>
<h3 dir="auto"><a id="user-content-features-included-in-this-version" class="anchor" aria-hidden="true" href="#features-included-in-this-version"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Features included in this version:</h3>
<ul dir="auto">
<li>Login page and sign up page</li>
</ul>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/bb360ad960d603f777b550a9a736c65455d8bcc34ff506da514bcce60810cd60/68747470733a2f2f692e696d6775722e636f6d2f4d355469794f412e676966"><img src="https://camo.githubusercontent.com/bb360ad960d603f777b550a9a736c65455d8bcc34ff506da514bcce60810cd60/68747470733a2f2f692e696d6775722e636f6d2f4d355469794f412e676966" alt="enter image description here" data-animated-image="" data-canonical-src="https://i.imgur.com/M5TiyOA.gif" style="max-width: 100%;"></a></p>
<ul dir="auto">
<li>Form for user to log their moods, saved onto the live server database</li>
</ul>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/6bdd993a064f56150e56d142def0b9a90f90b78ce483733a83e6945f1953e711/68747470733a2f2f692e696d6775722e636f6d2f4c58526e496c4a2e676966"><img src="https://camo.githubusercontent.com/6bdd993a064f56150e56d142def0b9a90f90b78ce483733a83e6945f1953e711/68747470733a2f2f692e696d6775722e636f6d2f4c58526e496c4a2e676966" alt="enter image description here" data-animated-image="" data-canonical-src="https://i.imgur.com/LXRnIlJ.gif" style="max-width: 100%;"></a></p>
<ul dir="auto">
<li>Mood history page</li>
</ul>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/951bcd66397cbbf3ae42047ece780599a55890d9bdf3b8c7ee8f24c05eab0fca/68747470733a2f2f692e696d6775722e636f6d2f574d716e6e4d4f2e676966"><img src="https://camo.githubusercontent.com/951bcd66397cbbf3ae42047ece780599a55890d9bdf3b8c7ee8f24c05eab0fca/68747470733a2f2f692e696d6775722e636f6d2f574d716e6e4d4f2e676966" alt="enter image description here" data-animated-image="" data-canonical-src="https://i.imgur.com/WMqnnMO.gif" style="max-width: 100%;"></a></p>
<ul dir="auto">
<li>Mood history visualised in graph</li>
</ul>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/c8412e0bc09c564c59a2b87c3f21f5d96a60997c40eeed5e19315ef6c3d62bf5/68747470733a2f2f692e696d6775722e636f6d2f6e7078414752762e676966"><img src="https://camo.githubusercontent.com/c8412e0bc09c564c59a2b87c3f21f5d96a60997c40eeed5e19315ef6c3d62bf5/68747470733a2f2f692e696d6775722e636f6d2f6e7078414752762e676966" alt="enter image description here" data-animated-image="" data-canonical-src="https://i.imgur.com/npxAGRv.gif" style="max-width: 100%;"></a></p>
<h2 dir="auto"><a id="user-content-instructions-for-installing" class="anchor" aria-hidden="true" href="#instructions-for-installing"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Instructions for installing</h2>
<p dir="auto">Add <code>.DS_Store</code> to the <code>.gitignore</code> file.</p>
<p dir="auto">Add, commit and push as per usual.</p>
<p dir="auto">If the local database (schema.sql) has been edited, connect database with Heroku:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="heroku psql"><pre class="notranslate"><code>heroku psql
</code></pre></div>
<p dir="auto">Reset database:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="heroku pg:reset"><pre class="notranslate"><code>heroku pg:reset
</code></pre></div>
<p dir="auto">Copy local database to Heroku:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="heroku pg:push moodtracker DATABASE_URL"><pre class="notranslate"><code>heroku pg:push moodtracker DATABASE_URL
</code></pre></div>
<h2 dir="auto"><a id="user-content-code-snippets" class="anchor" aria-hidden="true" href="#code-snippets"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Code snippets</h2>
<h3 dir="auto"><a id="user-content-sign-up-form-flaskpython" class="anchor" aria-hidden="true" href="#sign-up-form-flaskpython"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Sign up form (Flask/Python)</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/526dc37f927f926c7f3b7976b8429861d1b8e823d633ad0c4a5acf7a82904306/68747470733a2f2f692e696d6775722e636f6d2f4c32446b694f392e706e67"><img src="https://camo.githubusercontent.com/526dc37f927f926c7f3b7976b8429861d1b8e823d633ad0c4a5acf7a82904306/68747470733a2f2f692e696d6775722e636f6d2f4c32446b694f392e706e67" alt="signup form" data-canonical-src="https://i.imgur.com/L2DkiO9.png" style="max-width: 100%;"></a></p>
<h3 dir="auto"><a id="user-content-login-form" class="anchor" aria-hidden="true" href="#login-form"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Login form</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/ee31f184a3e9f8eda514fed266fe9cac43fdf9a75517087f0e6505e709541aa8/68747470733a2f2f692e696d6775722e636f6d2f7543644b7869572e706e67"><img src="https://camo.githubusercontent.com/ee31f184a3e9f8eda514fed266fe9cac43fdf9a75517087f0e6505e709541aa8/68747470733a2f2f692e696d6775722e636f6d2f7543644b7869572e706e67" alt="enter image description here" data-canonical-src="https://i.imgur.com/uCdKxiW.png" style="max-width: 100%;"></a></p>
<h3 dir="auto"><a id="user-content-logging-your-mood" class="anchor" aria-hidden="true" href="#logging-your-mood"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Logging your mood</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/cb4c9d1e14e86dc03504570efedb2ffec8430d238960398386995e2a30e36a7e/68747470733a2f2f692e696d6775722e636f6d2f5642564241696d2e706e67"><img src="https://camo.githubusercontent.com/cb4c9d1e14e86dc03504570efedb2ffec8430d238960398386995e2a30e36a7e/68747470733a2f2f692e696d6775722e636f6d2f5642564241696d2e706e67" alt="enter image description here" data-canonical-src="https://i.imgur.com/VBVBAim.png" style="max-width: 100%;"></a></p>
<h3 dir="auto"><a id="user-content-showing-your-mood-history" class="anchor" aria-hidden="true" href="#showing-your-mood-history"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Showing your mood history</h3>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/e64ce97b0874d8ffdc3030bfb39e3f9ac245b12571bcff401bb705d0187ec6b9/68747470733a2f2f692e696d6775722e636f6d2f4c6d3758396b702e706e67"><img src="https://camo.githubusercontent.com/e64ce97b0874d8ffdc3030bfb39e3f9ac245b12571bcff401bb705d0187ec6b9/68747470733a2f2f692e696d6775722e636f6d2f4c6d3758396b702e706e67" alt="enter image description here" data-canonical-src="https://i.imgur.com/Lm7X9kp.png" style="max-width: 100%;"></a></p>
<h2 dir="auto"><a id="user-content-to-be-included-in-future-versions" class="anchor" aria-hidden="true" href="#to-be-included-in-future-versions"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>To be included in future versions:</h2>
<ul dir="auto">
<li>
<p dir="auto">Input for user's medications and associated symptoms</p>
</li>
<li>
<p dir="auto">Input for any unhelpful thinking styles</p>
</li>
<li>
<p dir="auto">“Day with the highest mood”, like a high score factor</p>
</li>
<li>
<p dir="auto">What they ate, exercised, how much they slept</p>
</li>
<li>
<p dir="auto">Events that have occurred in the day of the user</p>
</li>
<li>
<p dir="auto">Main panel displaying mood and lifestyle variables on graphs - think "data is beautiful" styles</p>
</li>
</ul>
<h2 dir="auto"><a id="user-content-issues-to-work-on" class="anchor" aria-hidden="true" href="#issues-to-work-on"><svg class="octicon octicon-link" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"></path></svg></a>Issues to work on:</h2>
<ul dir="auto">
<li>Deployment issues with Heroku, page load takes a while on Render, to be investigated; potential move to fly.io (?)</li>
<li>Improve security measures for users,
<ol dir="auto">
<li>auth0</li>
<li>add validation measures to backend</li>
</ol>
</li>
<li>Form needs a better flow</li>
<li>Make it responsive, i.e. mobile friendly</li>
</ul>
</article></div>

project2 moodtracker

project2 moodtracker