Capstone Project

~ ✧ ~

The Foxglove Tome

A Digital Sanctuary for Mental Wellness

The Heart of the Project

Born from a desire to support those facing mental health struggles, including people close to my heart, The Foxglove Tome is more than a journal. It is a digital sanctuary designed to provide "breathing room" in an often overwhelming digital landscape.

A Space for Reflection

Inspired by the calm and healing nature of a physical garden, the app features a mood tracker that translates emotional check-ins into a visual sanctuary. Instead of sterile charts, the Tome allows users to "plant" flowers in their digital space creating a curated garden that serves as a mirror to their internal world.

The Planned Toolbox

PHP MySQL VS Code React Adobe Illustrator Bootstrap GitHub Figma

~ ✧ ~

Progress Updates:

View the Repo

Week 1 - Conceptualization & Wireframing

Completed the proposal document, wireframe and UML Diagram

Website wireframe and UML diagram for The Foxglove Tome project proposal.

Week 2 - The Logo

Created the logo for The Foxglove Tome using Adobe Illustrator and exported the full package of sizes. Created the database and tables in PHP.

Week 3 - The Database

Created the GitHub repo, started the folder scaffolding and connected to the database.

Database relationship diagram showing links between users, garden, and journal entries.

Started working on the nav bar and home page to test progress.

Screenshot of The Foxglove Tome homepage featuring the deep purple navigation bar and the script title in the hero section.

Started working on the mood category icons using Adobe Illustrator

Screenshot showing the process of adding thorns to brambles for the prickly category.

Week 4 - The Assets

Changed asset strategies for better time management and completed mood category icons

Four circular category icons for the mood categories. A thistle, a wilted leaf, a foxglove in bloom and a rooted tree.

Week 5 - Making Decisions

This week I reached out for some feedback from someone with vision difficulties. I created two visual comfort options to be accessible through an easy to use toggle setting.

A side by side view of the home landing page when not logged in. It shows a high contrast version of black text on white with a dimmed background image and a lower contrast version of white text on slightly see-through black with a vibrant background image.

I also began coding!

Week 6 - Authentication

Added Signup, login, logout and forgot password/reset password

A collage of code snippets showing authentication coding.

Week 7 - Authentication Test and Journal Entries

Added some basic viewing pages to test authentication.

Screenshot of the reset password page showing a successful password change after receiving a 'forgot my password' reset token.

Started working on the journal entries and user dashboard.

Screenshot of the new journal entry page showing the form to create a new journal entry with the mood categories and drop down menu to select the mood.

Screenshot of the user's dashboard showing test journal entries with mood selected.

Week 8 - Landing Page, Journal Entries and Dashboard

Started work on the landing/home page with login button, sign up button and features highlight section.

Screenshot of the landing page/home page with hero image, login button and slogan.

I also continued work on the dashboard, now showing the user's journal entries which are clickable to view the entry in full with edit and delete buttons.

Screenshot of the user's dashboard showing journal entry thumbnails. Includes the start of their Mood Summary at the top.

Week 9 - Appearance, Additional Security, CRUD completion

Added edit functionality for journal entries and improved the appearance of new entry & edit entry

Screenshot of the edit journal entry page showing the form to edit a journal entry with the mood categories and drop down menu to select the mood.

Added delete functionality for journal entries

Screenshot of the delete journal entry confirmation page showing the journal entry to be deleted and a button to confirm deletion.

Added themed tone and clarity to flash messages

Screenshot of the user dashboard showing a green flash message at the top that reads, 'Your thoughts have been safely store in the tome.'

Screenshot of the user dashboard showing a red flash message at the top that reads, 'The keepers could not find that entry. It does not exist within the pages of the tome.'

Got the mood summary up and running, including creating a 2nd test account for the empty state

Screenshot showing the array of quotes that will be randomly selected to show in the mood summary section.

Screenshot of the user's dashboard showing the mood summary at the top with their dominant mood for the week and a quote from the array for their dominant mood's category.

Screenshot of the user's dashboard showing the empty state of the mood summary with a message that reads, 'Your story is still unfolding this week.'

Week 10 - UI, Bottom Nav, Garden and Flower Illustrating

Added the UI for login, signup and forgot password pages

Screenshot of the login page showing the form to log in with email and password.

Screenshot of the forgot password page showing the form to enter your email to receive a password reset token.

Added the bottom navbar with the buttons needed for the visible page

Screenshot of the mobile version of the user's dashboard showing the bottom navigation bar with icons for new journal entry, garden and logout.

Got the garden functioning and started work on the the flowers in adobe illustrator. Using emoji placeholders for now. Also added a button that saves the garden as an image.

Screenshot of the user's garden page showing the flowers they have planted based on their journal entry moods. Features a button to save their garden as an image on their device.

Screenshot of the petunia flower in progress in Adobe Illustrator.

Week 11 - Admin Page, Angular Rebuild & Flower Illustrations

Added the admin page with app stats

Screenshot of the admin page showing the total number of users, total number of journal entries and a the most common mood.

View the Repo