Check my project board to know where I am at: Click here to view the Board
--- Everything below needs will be updated ---
- Run
yarn start
ornpm start
in project directory to start the Express server on port 5000 cd client
and runyarn start
ornpm start
to start client server in development mode with hot reloading in port 3000.- Client is configured so all API calls will be proxied to port 5000 for a smoother development experience
A web application to acknowledge and lift up one's mood in the morning and create, digitally, a wellbeing routine.
Problem Statement: How to ensure we are in tune with our emotions?
In this repository we are only focusing on one part of this routine project which requires the user to acknowledge her/his feelings to start the day with clarity. In return the user would get an encouraging response, in the shape of a video or a quote, to launch or sustain the day on a positive foot.
This app is composed of 3 components:
-
Parent: Homepage (no use, except from hosting the navigation bar)
-
Two children:
-
A user page where the user can perform the routine
-
An admin page where the user, who's currently its curator, can easily add more materials (responses) into the database
- When opening the page the user sees buttons which each match a certain mood.
- The user clicks on the button that most closely expresses her/his emotions.
- When clicked, the response will be displayed at the bottom of the page, in a banner.
- This response contains a URL which will open in another tab, so the user can view the video or quote.
- This link has been randomly selected for her/him and are attached to one of the available moods.
- This random algorithm was designed via MySQL and added to the endpoint.
When opening the page, the admin user will see a three input form where she/he will:
- select one of the listed moods: blessed, determined, fidgety, sad
- select one of the media format: video or quote
- paste a url
- click on the submit button
The data are held into one MySql's table made of four columns.
When the mood is negative (sad or fidgety) the response should be funny, and dancier. When the mood is positive (blessed or determined) the response should be inspiring and empowering.
Examples:
- Blessed: https://images.app.goo.gl/LCxwkCLjsJwwBkFY6
- Determined: https://youtu.be/VDvr08sCPOc
- Fidgety: https://images.app.goo.gl/BqDQthBbTiScr25P6
- Sad: https://youtu.be/QooqZkNk8Bw
This logic is very subjective.
The table contains the 4 below columns:
Please note the id is autoincremented.
INSERT INTO responses(mood, format, url) VALUES ("blessed", "video", "https://youtu.be/OMGd3mAfl-0"), ("blessed", "quote", "https://images.app.goo.gl/LCxwkCLjsJwwBkFY6"), ("determined", "video", "https://youtu.be/VDvr08sCPOc"), ("determined", "quote", "https://images.app.goo.gl/VHw3vzRA3YnrRD3q8"), ("fidgety", "video", "https://youtu.be/JkVqeHpqIMk"), ("fidgety", "quote", "https://images.app.goo.gl/BqDQthBbTiScr25P6"), ("sad", "video", "https://youtu.be/P00HMxdsVZI"), ("sad", "quote", "https://images.app.goo.gl/FMJKyGggoEJ3uGfx5");
This app has 3 endpoints: Click here to view them
This project was styled using css stylesheet.
The stylesheet is organised into three sections:
- Global styling, shared by several components
- User view styling
- Admin view styling
Each page is composed of four parts, from top to bottom:
- Header
- Main body
- Bottom display (appearing only when needed)
- Navbar
Color codes:
- green: #00cc99
- purple: #78244c
- pink background: #edc7b7
- text-shadow: 0.5px 0.5px rgb(179, 174, 174);
Please head to the stylesheet to find more about the button border colours and the gradients available on the user page.
*. Allowing the user'social circle to update the app's database.
Related user story: As a user and admin of this app, it can feel lonely to be using it on my own. Besides, as social links are key to someone's wellbeing, I want my family and friends to co-curate this app at any time of the day while being on the go.
- From opening up the admin form to new users...
- ...to implementing a full on authentication feature
- Improving the database to make it algorithm wise more flexible and to work out several logics...
- ... No concrete idea of what could that be
*. Ideally the user would know from whom this link comes from
Related user story: As a user, I see this wellbeing app as a wellbeing social link tool and would like to connect the links I receive to the person who sent them to me. Therefore I want to know whom sent me a specific link and thank them accordingly.
*. Embed the content so the user can stay on the app
*. Go beyond the emotional wellbeing and make it be an overall bonding tool between people (e.g. lovers, distant friends or relatives, acquaintances)