Purpose • Functionality • Target Audience • App Architecture Design • Dataflow Diagram • Wireframes • Tech Stack • Project Development Log • Application Testing •
In today's fast-paced, digitalised world, mental health has become more crucial than ever. Young people, in particular, are facing unprecedented levels of stress, anxiety, and depression. The pressures of social media, academic demands, and societal expectations have contributed to a growing mental health crisis among the youth.
By providing a structured way to track and understand emotions, Memobanking aims to be a proactive platform in addressing these issues. It encourages self-awareness and emotional regulation, key components in maintaining mental health and preventing the escalation of mental illnesses. Whether for personal growth or mental health management, Memobanking offers users valuable tools to navigate and understand one’s emotional landscape. Through personalised insights and the ability to share experiences, Memobanking not only aids individual users but also fosters a broader conversation about mental health, promoting understanding and support within the community.
-
Emotion Logging
Users can log their emotions by selecting from categories like Joy, Anger, Sadness, Fear, and Disgust. They have the option to write a brief note or reason for their emotion.
-
Emotion History Log
Users can reflect back on their past emotion entries through a history log. Their emotion enteries can be categorised and filtered by date and emotion type for easy tracking and analysis.
-
Graphical Data Visualisation
Users can track their emotional trends over time using graphs, identifying patterns and fluctuations.
-
User Profiles
Users can choose to share their emotion history log and graphs publicly. They have options to control over what information is shared, such as hiding or showing reasons behind their emotions.
-
Individuals with Mental Health Concerns
People dealing with anxiety, depression, or other mental health issues would find the app valuable for understanding their emotion patterns and indentifying potential triggers.
-
Therapy Clients
People who are already seeing therapists or counselors can use the app to track their progress and share data with their mental health professionals.
-
Social Media Users
People who are active on social media might enjoy the feature that allows them to share their emotional data publicly, adding a personal and reflective aspect to their online presence.
Revision 21-07-2024:
- As a user, I want to create an account, so I can save my emotion entries and customise my experience on the platform.
- As a user, I want to log in to my account, so I can access my emotion entries and features.
Brainstorm:
Logo Design:
Sitemap:
Homepage:
Sign Up Page:
Login Up Page:
External Pages: About/Contact
User Profile Page:
Emotion Modal Menu:
Entries Modal Menu:
Account Modal Menu:
| Services | Description |
|---|---|
| React | React is a powerful and widely adopted JavaScript library for building user interfaces. In this application, it used to create reusable UI components that can be easily integrated into application, improving efficiency and flexibility throughout the development process. |
| React Router DOM | React Router DOM is flexible routing library for React apps. It allows developers to define routes and manage navigation within the app. In this application, React Router DOM was used to handle page routing, allowing users to navigate seamlessly across different pages within the application without reloading the entire page. |
| React Icons | React Icons is a library that provides a collection of customisable icons for use in React applications. In this application, React Icons was used for certain buttons across the user interface to simplify development process |
| Axios | Axios is a promise-based HTTP client for making requests to remote servers. In this application, Axios was used to perform HTTP requests to fetch and send data between the frontend and backend API. |
| Date-fns | Date-fns is a date utility library that provides simple functions for manipulating JavaScript dates in browser and Node.js. In this application, Date-fns was used to format the date of emotion entries. |
| Chart.js | Chart.js is a Javascript library for data visualization which supports various types of graphs. In this application, Chart.js was used to display user's emotion entry data to increase user engagement and insight. By visualizing emotion trends and distributions, users can better understand their emotional patterns, which enhances their experience and encourages reflective practices |
| Services | Description |
|---|---|
| Node.js | Node.js is runtime environment for executing sever-side code and manage operations using JavaScript outside the browser. In this application, Node.js was used to write server-side logic, scripts, and install a wide range of libraries through npm, improving efficiency and flexibility throughout the development process.cumbersome compared to traditional backend technologies. |
| Express.js | Express.js is a web application framework for Node.js that simplifies the process of building RESTful API services. In this application, Express.js was used to set up the server, define route handlers, manage routing, and handle middleware. |
| MongoDB Atlas | MongoDB Atlas is a database service that provides a scalable and cloud-based MongoDB database. It allows developers to create applications that can store, query and manage data in a non-relational (noSQL) format. In this application, MongoDB Atlas was used to handle large volumes of data, performing operations such as create, read, update, and delete (CRUD) on NoSQL documents. It is connected to Mongoose in the application's backend to enable efficient interaction with the MongoDB Atlas database. |
| Mongoose | Mongoose is an Object Data Modeling (ODM) tool designed to interact with MongoDB databases using Javascript. It simplifies data validation, querying, and relationships between data models without the need to write raw NoSQL queries. In this application, Mongoose was used to define schemas and models to structure and manage data in MongoDB. Furthermore, Mongoose queries were used to within the application's routes to query for user and emotion documents and create CRUD operations. |
| Dotenv | Dotenv provides a way to manage environment variables in a Node.js application. This library allows developers to keep sensitive data, such as JWT keys and database credentials, secure and organised. In this application, Dotenv was used to load environment variables for connecting to the MongoDB database and for creating and verifying JWT tokens, ensuring that sensitive information was not exposed in the codebase. |
| Cors | CORS is a security feature implemented in web browsers to control cross-origin requests which help prevent unauthorised access to resources. In this application, CORS was configured to allow cross-origin requests from anywhere without restrictions. While this approach is less secure, it allowed me to focus on the application's development and functionality without being constrained by cross-origin issues. |
| JSON Web Tokens | JSON Web Tokens allows developers to add JSON Web Token (JWT) based authentication and authorisation to their application. JWT based authentication means it follows the RFC 7519 standard, which is an internet standard that defines a secure method for transmitting data between a client and a server using JSON format tokens. In this application, JWTs are used to authorize users during login and authenticate them before performing certain CRUD operations. |
| BcryptJS | BcryptJS allows developers to use Bcrypt hashing algorithm to securely store passwords in their database. Bcrypt is a popular cryptographic algorithm designed to hash passwords by converting them into a string of characters that are highly resistant to various password-cracking techniques, such as brute force, rainbow table, and dictionary attacks. It is available in many programming languages and frameworks. In this application, the Javascript version of Bcrypt was used to hash and salt the user's password during registration. This makes the application more secure and protected against unauthorised access to user accounts. |
In this project, I have opted to use a Kanban workflow as my method of planning and tracking the development of my application. Each column represents a different phase of development. Cards flow from one column to the next as they progress towards completion. The workflow involves the following phases: Backlog, To-Do, In-Progress, Review and Completed.
04-07-2024
Trello Kanban:
Checklist: Generate Project Idea
Checklist: Write Project Documentation
Checklist: Design Application UX/UI Design
05-07-2024
Trello Kanban:
Checklist: Write Project Documentation
07-07-2024
Trello Kanban:
15-07-2024
Trello Kanban:
21-07-2024
Trello Kanban:
26-07-2024
Trello Kanban:
27-07-2024
Trello Kanban:
Checklist: Setup Frontend
Checklist: Create App Homepage
28-07-2024
- Setup Frontend [Completed]
- Create App Homepage [2/3]
- ⛙ Github Merge Pull #1: feature/static-site
Trello Kanban:
Checklist: Create User Authentication UI
Checklist: App Homepage
01-08-2024
- Create User Authentication UI [2/3]
- ⛙ Github Merge Pull #2: feature/auth-ui
Trello Kanban:
Checklist: Setup Backend
Checklist: Create User Authentication UI
- Setup Backend [Completed]
- ⛙ Github Merge Pull #3: feature/auth-backend
Trello Kanban:
Checklist: Create User Authentication
Checklist: Create User Module Checklist
02-08-2024
- Create User User Module [1/2]
- Create User Authentication [4/4]
- ⛙ Github Merge Pull #3: feature/auth-backend
Trello Kanban:
03-08-2024
- Create User Authentication UI [Completed]]
- Create User Authentication [Completed]
- ⛙ Github Merge Pull #4: feature/signup-frontend
- ⛙ Github Merge Pull #5: feature/login-frontend
- ⛙ Github Merge Pull #6: feature/auth-api-integration
Trello Kanban:
04-08-2024
- Create User Module [Completed] (Create get user data route and integration)
- ⛙ Github Merge Pull #7: feature/app-routing
- ⛙ Github Merge Pull #8: feature/dashboard-frontend
- ⛙ Github Merge Pull #9: feature/dashboard-backend
- ⛙ Github Merge Pull #10: feature/dashboard-api-integration
Trello Kanban:
05-08-2024
- Create App Homepage[Completed] (Populate app with content)
- ⛙ Github Merge Pull #11: feature/populate-content
Trello Kanban:
06-08-2024
- Create Emotion Module [5/5]
- ⛙ Github Merge Pull #12: feature/emotion-entry-backend
Trello Kanban:
Checklist: Create Emotion Module
07-08-2024
- Create User Dashboard
- ⛙ Github Merge Pull #13: feature/get-entries-integration
Trello Kanban:
08-08-2024
- Create Delete Emotion Feature [Completed]
- Create Add Emotion Feature [Completed]
- Create User Dashboard [Completed]
- Create Emotion Module [Completed]
- ⛙ Github Merge Pull #14: feature/add-entry-integration
- ⛙ Github Merge Pull #15: feature/delete-entry-integration
Trello Kanban:
09-08-2024
- Deploy Application [Completed]
- Create Graphical Data Visualization [Completed]
- Conduct Application Testing [Completed]
- ⛙ Github Merge Pull #16: test/automated-testing-frontend
- ⛙ Github Merge Pull #17: feature/data-visualization
Trello Kanban:
Checklist: Deploy Application
Checklist: Conduct Application Testing
DevTest.04-08-2024: Auth CRUD Operations
DevTest.04-08-2024: User Login and SignUp
DevTest.07-08-2024: GET User Data Route
ProdTest.09-08-2024: Emotions CRUD Operations
ProdTest.09-08-2024: Dashboard
ProdTest.09-08-2024: GET Emotion Count Route
