Great Wall of Gratitude - GitHub repository: GitHub repository
Visit the deployed site: Great Wall of Gratitude
The Gratitude Wall celebrates World Happiness Day by creating a space for sharing gratitude. This online platform invites users to anonymously express thanks, uplifting stories, and moments of joy.
Our mission is to build a community rooted in gratitude, transforming individual moments of appreciation into a global movement of collective joy.
Central to our mission are user-centric designs that facilitate an intuitive and rewarding experience, making every visit a step towards spreading positivity. "Gratitude Wall" isn't just a site; it's a movement towards acknowledging the beauty in life's small moments and the transformative power of gratitude in building a happier world.
Join us in embracing the power of gratitude. Together, we can make a difference, one thank-you at a time.
Our project, "The Great Wall of Gratitude", is designed to foster a community of positivity by allowing users to anonymously share messages of gratitude. With an intuitive user interface and robust backend, our platform stands as a testament to the power of collective appreciation. We're excited to share how our team has effectively met and exceeded the key project objectives. We're excited to share how our team has effectively met and exceeded the key project objectives:
- We've crafted an immersive and intuitive user interface. This creative approach ensures our design stands out, offering a seamless and engaging user experience.
- Our project's success stems from meticulous planning and execution. We utilized GitHub Projects for organization, complemented by a comprehensive README.md, to keep our development process transparent and on track.
- Our efforts were closely aligned with the Hackathon's theme, bringing forward-looking and creative solutions to the forefront. Our project embodies innovation, setting a benchmark for future endeavors.
- We've achieved a responsive, accessible, and thoroughly tested application, prioritizing user experience across different devices and accessibility needs.
- Our project introduces features and functionality, offering unique value and engagement.
- A cornerstone of our project is the collaborative spirit among our team members. Through active participation, inclusive practices, and a commitment to quality, we've fostered an environment of mutual support and excellence.
- Great Wall of Gratitude
- Introduction
- Criteria
- Goal & UX
- Technology Stack
- Development Process
- Testing
- Prerequisites and Deployment
- Credits and Acknowledgements
Our platform offers a seamless user experience, encouraging easy navigation and interaction. Whether posting a message of gratitude or browsing through others' contributions, users find a space that is intuitive, engaging, and uplifting.
The primary goal of "The Great Wall of Gratitude" is to cultivate an online space where expressions of gratitude can flourish, connecting individuals through shared positivity. Our strategy focuses on user engagement, platform stability, and community growth.
** For Developers:
Create a secure, scalable platform that facilitates the anonymous sharing of gratitude.
** For Users:
Offer a welcoming space to share and discover messages of gratitude, fostering a sense of community and shared joy.
In a digital age often marred by negativity, there's a significant need for spaces that promote positivity, gratitude, and community. "Gratitude Wall" aims to fill this gap by providing an accessible platform for individuals to express and share their gratitude, offering a beacon of positivity.
Our platform is designed for anyone looking to share or discover messages of gratitude. It's a universal space for individuals seeking positivity, connection, and a reminder of the good in the world.
The scope of our project includes the development of a responsive website where users can post and interact with gratitude messages, the implementation of user authentication to ensure privacy, and the creation of an engaging user interface that promotes interaction.
These EPICs collectively cover the journey of users from their initial encounter with "The Great Wall of Gratitude" through their development into engaged members of the community. Each EPIC is designed to address specific needs and behaviours characteristic of new, returning, and frequent visitors, ensuring a comprehensive and satisfying user experience throughout.
- EPIC 1: New Visitor Experience
Goal: To ensure that new visitors can quickly grasp the purpose of "The Great Wall of Gratitude" and easily navigate through its features. - EPIC 2: Returning Visitor Experience
Goal: To enhance engagement and interaction for users who return to the site after their initial visit. - EPIC 3: Frequent Visitor Experience
Goal: To provide a rich and dynamic experience for users who frequently visit and contribute to "The Great Wall of Gratitude".
Pls visit our Kanban board for details.
#### User Stories
This is an excerpt of our user stories, please visit our Kanban board for details.
| User story ID [epicid.usid] | Task | Description | Issue No. |
|---|---|---|---|
| US1.1 | Create Landing Page | A welcoming and informative first page that clearly conveys the website's mission and how users can participate. | issue #7 |
| US1.2 | Create About Us Page | Provides background information about the project and its creators, building trust and connection with new users. | issue #25 |
| US1.3 | Create Navbar | Ensures easy navigation across different sections of the website for a smooth user journey. | issue #22 |
| US1.4 | Viewer of Hackathon Webinar | Allows new visitors to watch a presentation about "The Great Wall of Gratitude", understanding its purpose and the effort behind its creation. | issue #55 |
| US1.4 | Understanding Website in 7 Seconds | Ensures the website's design and content are intuitive enough for new visitors to quickly understand how to use it. | issue #99 |
| US2.1 | Add Like Button | Allows users to interact with posts they appreciate, enhancing engagement. | issue #41 |
| US2.2 | Create 404 Error Page | Ensures that users who encounter dead links or errors are gently guided back to the active parts of the site. | issue #37 |
| US2.3 | Enhance Design of Add Card Popup Window | Improves the user interface for submitting gratitude posts, encouraging more contributions. | issue #66 |
| US2.4 | Revamp Design of Gratitude Cards | Refreshes the appearance of posts for a more appealing and updated look. | issue #67 |
| US2.5 | Make Text Area on Cards Scrollable | Improves user experience by allowing longer messages to be easily read. | issue #86 |
| US3.1 | Create Thank you Page | Rewards users with a dedicated thank you message after they contribute with feed-back. | issue #28 |
| US3.2 | Add Delete Button for Cards | Empowers users to manage their own posts, ensuring content remains relevant and personal. | issue #42 |
| US3.3 | Add Load More Button | Allows users to explore more gratitude posts without overwhelming the initial page load, enhancing site usability. | issue #59 |
| US3.4 | Create Grid Layout for Gratitude Cards | Offers an organized and visually appealing way to browse through the gratitude posts. | issue #64 |
| US3.5 | On Reload, Cards Load in Random Order Sometimes Twice | Addresses a technical challenge to ensure a seamless and predictable user experience. | issue #85 |
#### Feature
The website features three main web pages:
- The landing page, central to the user experience, this page invites users to share their gratitude by posting messages. Each submission becomes part of 'The Wall', a dynamic display of positive sentiments from the community.
- The About Page, offers insights into the "The Great Gratitude Walls" platform and its team members.
- The Contact Page, designed for users to make inquiries or seek assistance, featuring a straightforward form that, upon submission, employs EmailJS to ensure messages are promptly directed to the site administrators.
There are two auxiliary pages:
-
The 404 Page Not Found is a crucial auxiliary page designed to handle instances where a user attempts to access a non-existent section of the website. This page serves not only as a notification of an incorrect or outdated link but also as a gentle guide back to the main content, ensuring users don't feel lost.
-
Upon submitting the contact form, users are directed to the Thank You page, another essential support page that acknowledges their action with gratitude. This page plays a pivotal role in the user interaction cycle by confirming that their message has been successfully sent and is under consideration. It reinforces the platform's community-driven ethos by expressing appreciation for the user's input or inquiry. Additionally, it reassures users that their effort to reach out is valued, with an inviting option to return to the main wall, encouraging continued participation in the platform's positive exchange of messages.
Key Features Include:
- Message Submission with Validation
Users are encouraged to share their gratitude messages through a form. The system checks for prohibited words to maintain the content's positivity and requires all fields to be filled before submission, promoting responsible community interaction.
- Persistent Message Display
Utilizing local storage, messages once posted are stored and displayed even after the page is reloaded, ensuring the permanence of the gratitude expressed.
- Dynamic Interaction
The site integrates a 'like' button for each message, allowing users to interact with and acknowledge others' posts, fostering a supportive environment.
- Post Management
Beyond adding messages, users can also remove their posts, giving them control over their contributions to the wall.
While the site currently does not feature a searchable database or commenting system, its existing framework lays the groundwork for potential expansions, including these and other interactive elements. The clear and concise error handling, alongside a custom 404 page and a thank-you page for form submissions, ensures a smooth user experience.
Through these carefully designed features and a commitment to a positive community ethos, 'The Great Wall of Gratitude' serves as a beacon of appreciation and kindness in the digital landscape."
In no specific order:
- Enable users to create private or public gratitude journals, where they can track daily reflections and growth over time.
- Thematic categorization of messages
- Integration with social media for wider sharing of gratitude.
- Implement features that celebrate user milestones, such as the number of gratitude posts shared or interactions received, enhancing a sense of achievement and community recognition.
- Expand the site's accessibility by offering multilingual support, inviting a broader audience to share and explore gratitude across cultures.
- Partner with wellness apps to enable users to share their gratitude posts directly from other platforms, creating a seamless experience between gratitude expression and personal health tracking.
- Create 405 Error page
#### Wireframe
Our wireframe designs laid the foundation for a user-friendly layout, ensuring that posting and browsing gratitude messages is intuitive and enjoyable. We crafted a responsive design through wireframe planning. This ensured that whether on a smartphone or desktop, users would enjoy a seamless experience. Wireframes also acted as a visual guide during the development process, helping to organize the placement of elements. It has a sleek user interface that clearly displays the site board and control buttons for a seamless navigation experience.
Logo
Landing page
About
Contact page
Thank you page
404
Header
Footer
Style guide
##### Color Scheme
The website features a warm, inviting palette with gradient of each colour that reflects the spirit of gratitude and positivity.
Yellow
Orange
Cabaret
Voodoo
Neutral
Signal (danger, information, success) colour
##### Typography
We've chosen fonts that are easy to read and convey a friendly, welcoming tone, enhancing the overall user experience. The team selected the fonts Poppins, Arial, Helvetica, and employed Sans-serif as a fallback option.
Poppins Light
Poppins Medium
Poppins Extra bold+
We choose images that foster a welcoming, inclusive, and vibrant community space, encouraging users to share, discover, and connect through gratitude. All imagery is from free sources.
Accessibility is a core consideration for "The Great Wall of Gratitude". Our platform is designed to be accessible to users with diverse needs, ensuring everyone can participate in sharing gratitude. We enhanced our website's accessibility by adopting several strategies:
- Implementing semantic HTML to structure content meaningfully.
- Adding hover states to buttons for visual feedback during navigation.
- Selecting sans serif fonts, which are easier for dyslexic users to read.
- Utilizing aria-labelledby attributes and others to aid screen reader users in interacting with dynamic content.
- Styling interactive elements with :hover and :focus in CSS for better keyboard navigation.
- Employing CSS media queries and a flexible grid layout to accommodate various devices, including those with screen magnifiers.
- Relying on textual content and CSS for design, improving accessibility for users with assistive technologies.
The website is fully responsive, providing a seamless experience on devices of all sizes, from smartphones to desktops. Please visit AmIResonsive
### Tools and Libraries
- Am I Responsive? - To show the website image on a range of devices.
- [Bootstrap](https://getbootstrap.com/docs/5.2/getting-started/introduction/) - Responsive design. - Responsive design.
- Coolors - Color generator
- CSS Validation Service - Used to check code ensuring that my CSS is error-free and adheres to the latest web standards.
- DevTools - help in edit pages on-the-fly and diagnose problems quickly.
- Diffchecker - text - used to check code snippets
- Figma - Used to create wireframes.
- Git - For version control.
- Gitpod Streamlines your development process by providing a pre-configured, cloud-based development environment that's instantly ready for coding.
- GitHub Essential for version control, allowing you to track changes, collaborate with others (if applicable), and secure online code storage.
- Google Fonts - To import the fonts used on the website
- Illustrator - Used for graphics, icons i.e. site design
- JSHint - JSHint is a static code analysis tool used in software development for checking if JavaScript source code complies with coding rules.
- LeonardoAI - To produce images for hackathon page and hackathon presentation
- Markup Validation Service - Used to check code ensuring that my HTML is error-free and adheres to the latest web standards.
- Slack - is a cloud-based team communication platform.
- TinyPNG - WebP, PNG and JPEG Compression
- Visual Studio Code - A versatile and powerful IDE that supports Python development well, offering debugging tools, extensions for Python, and integrated Git control. While Gitpod provides its own web-based VS Code editor, one might use the desktop version for local development or when offline.
- Wave
- Web Disability Sim - a google chrome extension that allows you to view your site as people with accessibility needs would see it.
The development of our project follows a structured yet flexible approach, ensuring that we can adapt to changes and feedback while maintaining progress towards our goals. Our methodology emphasizes collaboration, iterative development, and a high degree of transparency both within the development team and with our stakeholders.
For details please visit our project team slack Canvas and our Kanban board
Our project uses Agile methodology, a framework that enables us to respond to the unpredictability of building software through incremental, iterative work cadences, known as sprints. This approach fosters adaptability and encourages a rapid and flexible response to change, which is vital in the dynamic environment of software development.
At the start of each sprint, our team engages in sprint planning to set the direction
for our upcoming work, involving prioritization of the product backlog to address the most critical tasks first, defining clear sprint goals aligned with project milestones, and assigning tasks based on expertise and workload. Throughout development, we navigate trade-offs between scope, quality, time, and resources to maintain a balance between delivering high-quality work efficiently and managing priorities. Adopting Agile methodologies allows us to remain adaptable and focused, ensuring we meet user needs while striving for excellence.
For details please visit our project team slack Canvas and our Kanban board
The team used Slack for quick collaboration purposes and Github projects to track User Stories, Bugs and Time plan.
The Team used slack team channel Canvas to ensure everyone stayed updated on project progress and discussions, see GratiDudes Canvas
The script utilizes a mix of paradigms to structure the logic for managing user interactions and data storage for a message board application, emphasizing sequence, modularity, and responsiveness to events.
The script directly specifies a sequence of operations to execute in order to achieve a desired outcome. This is seen in how functions are structured: a series of steps to manipulate the DOM based on user input or actions, such as adding a post to the display or filtering out prohibited words.
A subset of imperative programming, this paradigm organizes code into reusable procedures or functions. The script embodies this through defined functions like generatePost, addRecentMessage, and addToLocalStorage, which modularize the code for specific tasks, enhancing readability and maintainability.
This paradigm is centered around the handling of user-generated events. The script demonstrates this through the use of event listeners (addEventListener) that trigger specific functions (handleAddButton, initializeAddUserMessage) when the user interacts with the UI, such as clicking buttons or submitting a form.
We performed continuous manual testing of our site while developing it. Validation of HTML, CSS and JavaScript is OK.
The site was developed in VS Code/Gitpod, stored in GitHub as the local repository. Github Pages was used to deploy the live website. The instructions to achieve this are below.
To fork “The Great Gratitude Wall”
-
Log in (or sign up) to Github.
-
Go to the repository for this project, VCGithubCodel/Gratidudes
-
Click the Fork button in the top right corner.
To clone “The Great Gratitude Wall”
-
Log in (or sign up) to GitHub.
-
Go to the repository for this project, VCGithubCodel/Gratidudes
-
Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
-
Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
-
Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
- Sign up for a EmailJS account in the EmailJS website.
- Create an email service in your EmailJS dashboard.
- Install EmailJS Library. You can do this by including the EmailJS script in your HTML file or by installing it via npm if you're using a package manager like npm or yarn.
npm install --save @emailjs/browser
or
$ yarn add @emailjs/browser
- In your EmailJS dashboard, navigate to the "API Keys" section and copy your API key.
- Add this code snippet before your closing tags. Making sure you have added your public key.
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>
<script type="text/javascript">
(function(){
emailjs.init({
publicKey: "YOUR_PUBLIC_KEY",
});
})();
</script>- Create an email template in your EmailJS dashboard. This template will define the content and structure of the emails you'll send.
- Write JavaScript function to send email using EmailJS. Below is a basic syntax for the code:
emailjs.send(serviceID, templateID, templateParams, options);
- Call your function whenever you want to send an email.
Throughout the development and testing phases of the project, Git and GitHub were utilized for version control management, along with the implementation of a Kanban board for task tracking and workflow organization.
### Code Used
/** Function handle load more button using JQuery*/
function handleLoadMoreButton() {
$(".post-it-note").css("display", "none");
$(".post-it-note").slice(0, 9).show();
if ($(".post-it-note:hidden").length != 0) {
$("#load-more-btn").show();
}
$("#load-more-btn").on('click', function (e) {
e.preventDefault();
const currentPage = $(".post-it-note:visible").length / 9;
$(".post-it-note").slice(currentPage * 9, (currentPage + 1) * 9).slideDown();
if ($(".post-it-note:hidden").length == 0) {
$("#load-more-btn").fadeOut('slow');
}
});
}
Can I insert elements to the beginning of an element using .appendChild()?
/* jshint esversion: 11, jquery: true */
let emailFeedBack = document.getElementById('feedback-email');
function sendMail(contactForm) {
if (validateForm(this)) {
emailjs.send("service_8utwynu", "template_t2x0o52", {
"from_name": contactForm.name.value,
"reply_to": contactForm.email.value,
"subject": contactForm.title.value,
"message": contactForm.enquiry.value
})
.then(
function (response) {
emailFeedBack.innerText = "Email succesfully sent!";
contactForm.setAttribute("hidden", true);
},
function (error) {
console.log("FAILED", error);
}
);
return false;
} else {
this.addEventListener('submit', function (event) {
event.preventDefault();
});
}
}
// Form validation
function validateForm() {
let nameInput = document.forms["contact-form"]["name-input"];
let emailInput = document.forms["contact-form"]["email-input"];
let subjectInput = document.forms["contact-form"]["subject-input"];
let enquiryInput = document.forms["contact-form"]["enquiry-input"];
if (nameInput.value === "") {
emailFeedBack.innerText = "Please input name";
nameInput.classList.add("is-invalid");
return false;
} else if (emailInput.value === "") {
emailFeedBack.innerText = "Please input email";
emailInput.classList.add("is-invalid");
return false;
} else if (subjectInput.value === "") {
emailFeedBack.innerText = "Please input a subject to your message";
subjectInput.classList.add("is-invalid");
return false;
} else if (enquiryInput.value === "") {
emailFeedBack.innerText = "Please input your message";
enquiryInput.classList.add("is-invalid");
return false;
} else {
return true;
}
}
This code was inspired by GeeksforGeeks
/* Inner shadow was modified using guidance from: https://devdevout.com/css/css-inner-shadow */
box-shadow:
inset 0 0 0 1px hsla(0, 0%, 0%, .1),
inset 3px 3px 3px hsla(0, 0%, 100%, .2),
inset -3px -3px 3px hsla(0, 0%, 0%, .2),
33px 18px 6px hsla(0, 0%, 0%, .3);/* Sticky note animation. Amended from, */
/* CSS animations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations */
/* The @keyframes Rule and properties: https://www.w3schools.com/css/css3_animations.asp */
/* @keyframes examples: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes */
@keyframes fadeInSpin {
from {
opacity: 0;
transform: rotate(-360deg);
}
to {
opacity: 1;
transform: rotate(0deg);
}
}
/* Pin appears after sticky note stopped spinning */
@keyframes fadeIn {
0% {
visibility: hidden;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}-
[Hero image](Image by storyset on Freepik)
-
Background image - Found on google from exotica.com
The GratiDudes would like to thank
- Our Hackathon organizers
| Dude | Role |
|---|---|
| Amirhossein Bayani | Frontend and Design |
| Vernell C | Scrum master and Frontend/content |
| Patrick Hladun | Design Lead and Frontend |
| Jacqueline K | Frontend and documentation |
| Emma Lamont | Frontend and Project Presentation |
| Mikaela Virtucio | Frontend, Content, Functionality |
| Lauren Y | Frontend |
| Raymond Brien | Frontend and Design |