Skip to content

AureaFlamma/Mindactivity_frontend

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 

Repository files navigation




List of Contents

  1. Introduction and demo
  2. Features
  3. Getting Started
  4. Tech Stack
  5. Running Tests
  6. Authors
  7. Appendix



Mindactivity App For Managing Stress🧘

Welcome to Mindactivity!

Mindactivity (Mindfulness + Activity) is a meditative media app which allows users to time their meditation and deep work sessions. Here's a little demo of the app:

Mindactivity.-.25.August.2022.mp4

This documentation is for the entire Mindactivity app. If you're interested in the backend/API specifically, go to my fork of the backend repository


This is a fork of the Mindactivity frontend repo. Original repos can be found here: frontend & backend. All links from this point onward point to the original repos.




Features🎩

  • Timer for meditation or exercise.
  • Music button playing calming nature sounds.
  • Daily affirmations randomised and displayed from database.
  • Blog posts also randomised and displayed from database.
  • Click- and hover-interactive background simulating a night sky.



Getting Started🏁

Backend

*It is important to get the backend working before you run the frontend in order to use the affirmations and the blog post features

  1. Fork the original backend repository. You can find it here.
  2. Clone the forked repo to your computer. Unless you renamed the repo whilst forking, the command is (insert your GitHub username where indicated):
  git clone https://github.com/<YOUR_GITHUB_USERNAME>/w9_backend-project-mindactivity
  1. Install all the dependencies:
  npm i
  1. Copy your database (e.g. Heroku) URL into the .env file, following the format:
 DATABASE_URL = <Database URL goes here>
  1. Create the affirmations table in your database by running this script in the terminal:
npm run db:createAffirmationsTable
  1. Populate the affrimations table you have just created with data from "/lib/affirmationData.js" by running this script in the terminal:
npm run db:populateAffirmationsTable
  1. Now, repeat the last 2 steps for blog table. First create it...:
npm run db:createBlogTable
  1. ...then populate it with data from "/lib/blogs.js":
db:populateBlogTable
  1. Finally, run the server:
  npm run dev

Frontend

  1. For the original frontend repo. You can find it here
  2. Unless you have renamed the repo when you forked it, you can clone it with this command (insert your GitHub username where indicated)
  git clone https://github.com/<YOUR_GITHUB_USERNAME>/w9_backend-project-mindactivity
  1. Install the dependencies by running this command in the terminal.
  npm i
  1. Navigate to this folder: w9_frontend-project-mindactivity/Mindactivity

  2. Start the app.

  npm start



Client: React, CSS, Howler, React-tsparticles
Server: Node, Express, PostreSQL
Client-side Testing: React Testing Library
Server-side Testing: Supertest, Jest




Running Tests🃏

To run tests, run the following command

  npm test



Authors📚

We are four bootcampers at The School Of Code who teamed up to build an app to help solve bootcamper burnout problem for our mid-course project.




Appendix📝


About

School of Code mid-course project: A meditation timer with interactive background, quote API and blogpost feature.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 64.0%
  • CSS 24.1%
  • HTML 11.9%