A project that aims to help struggling people take the first steps in reaching out to talk to their friends and family for support.
This project is a collaborative effort, made possible by:
Abhisek Joshi 
Table of Contents - Click to Expand
Reach Out is a project designed with the hopes of giving confidence to people who are struggling with a difficult topics of conversation by starting that conversation with someone important to them anonymously. This may include a young person who wants to talk to their parent about gender identity, someone who is suffering with mental illness and isn't confident that their friends would be willing to listen or perhaps a person who is feeling isolated and alone. We believe there are many people out there who first need to hear that their family and friends are happy for them to reach out and connect so that they can get the support they need from the people that matter most.
-
As a user I want to send a message to someone I know, inviting them to talk.
-
I want the message to be anonymous, it will be at my discretion to reveal my identity.
-
As a website we will need users to create accounts and verify their age and email for security.
-
As a user I would like to be able to change my password and delete my account.
-
As a user I would like ideas on how to create my message or see examples from the past to give me confidence.
-
As the initiator or the recipient of the conversation, I need the website to appear professional and trustworthy.
We hope that the project will reach a wide range of demographics unbound by race, sexuality, class, social background, the list goes on. Ultimately, it is up to the users on how they use the website and the issues they are dealing with, but we hope that with enough information and encouragement people of all varieties will make great progress on their struggles from the platform.
The finished website ended up looking quite different to our initial ideas. But the initial ideas helped build what we ended up with and we are happy with the new design choices taken.
The fonts chosen are Nunito and Alegreya from google fonts.
We dicided upon a deep green and complimentary blue as the main colors of choice for the project. Green and Blue are said to have calming effects and are often considered refreshing, relaxing colours. Green has also been found to positively influence not only our emotions but our memories as well and Blue is often seen as a sign of stability and reliability.
Featured Implemented Upon Project Completion
- User Registration
- How to use
- Ability to sent custom/template message anonymously
- Private chat using generated code
- About us
- Support links
- Testimonials
This project makes use of the following languages, frameworks, and libraries:
Languages and Libraries
- Django - Python Framework
- HTML5 - Programming Language
- CSS 3 - Programming Language
- Python - Programming Language
- Jinja - Template Language
- jQuery - JavaScript Library
- Bootstrap v5 - Library Import
- Google Fonts - Typography Import
- Font Awesome - Icon provider
IDE and Version Control
- Git Pod - IDE (Integrated Development Environment)
- Git - Version Control Tool
- Github - Cloud based hosting service to manager my Git Repositories
- Code Institute GitPod Template - Provides GitPod extensions to help with code production
Design and Development
- Google Chrome Development Tools - Design/Development Tools
- Balsamiq - Wireframe designer software
- Coolors - Colour scheme generator
- Lucid App - Diagram creator
- CloudConvert - Image converter used to convert png images to webp
Validation and Testing
- CSS Beautifier - Beautifying CSS Code
- JavaScript Validator - Validating JS code
- Am I Responsive? - Webpage Breakpoint visualizer and image generator
- Black- Code Formatter
- W3C CSS Validation Service
- Browser Stack Responsive Design Tester
- Media Genesis RESPONSIVE WEB DESIGN CHECKER
- Chrome Dev Tools
- Lighthouse
- pylint
HTML
HTML Validation returned with a number of errors, but nothing that would break the project as the errors being returned were the validator not recognizing how we were linking to images.
CSS
Validation was performed using the W3C CSS validation service which returned no errors.
Lighthouse
We managed to achieve high scores on lighthouse. Performance could be improved by converting some of the images into other formats, but the hero images at least are quick and responsive so as not to negatively impact the user experience.
Placeholders
Continuous Deployment practices via GitHub Pages were implemented for this project.
A live version of this site has already been deployed here This site can be deployed using the Heroku app. To do so you will need to:
Create an account on Heroku Once signed in click on the "Create New App" Enter a name for the app and select the appropriate region Click on create app Go to the "Settings" tab Add a config vars with the key: PORT and value: 8000 Click "Add Buildpack" Add "nodejs" and then "python", the order is important here.
If Heroku is functioning with github correctly. Go to the "Deploy" tab Select the Github option and connect to github Search for the name of the github repository Click on Enable Automatic Deploy for automatic deploys or Deploy Branch to manually deploy
If you can't connect to github, you can deploy the code manually to Heroku. To do so: In the terminal, login to Heroku using "heroku login -i" Create your app using "heroku create your_app_name_here" git add and git commit any changes Push your work to Heroku using "git push heroku main" A link to the app will be shown.
Click "View" to view the deployed site The deployed site can also be accessed from the Environment section in the github repository
Much of the layout of the site was designed around templates provided by dJango and Bootstrap.
Links to images used - Click to Expand
https://www.pexels.com/photo/woman-wearing-yellow-button-up-long-sleeved-dress-shirt-774095/
https://www.pexels.com/photo/man-in-red-jacket-1681010/
https://www.pexels.com/photo/smiling-woman-wearing-earrings-and-black-collared-top-1197132/
https://www.pexels.com/photo/woman-smiling-and-holding-teal-book-1181424/
https://www.pexels.com/photo/man-wearing-white-dress-shirt-and-black-blazer-2182970/
https://stock.adobe.com/uk/images/take-care-of-yourself-napkin-concept/218872151?prev_url=detail