BetaMind

A community-led platform for users to reach out to others in their times of need. Users can post about their feelings and their current mood, and others can offer their support by offering their recognition, and communicating with those looking for someone to lean on.

Additionally, users can talk to our own Chatbot, and enjoy uplifting content.

The team members for this project were: Daniel PR, Alissa Troiano, Andrew Curley,Oliver Cadman & Sandra Atino

Deployed website can be viewed here.

Project Goals

The goal of this project is to provide a sleek, intuitive solution for users who need to discuss their emotions, whether negative or positive, with an un-biased, attentive community. The website should intelligently determine whether the user is in need of professional help, through the analysis of key words in the user's text content when making a blog post. If a user requires professional help, they should be presented with a comprehensive list of options to pursue, to help them in a positive direction.

If the user doesn't want to talk about their feelings, they should also enjoy the extra features of the website; our custom ChatBot 'OPPO' and interactive games.

UX Design

Site Owner Goals

1. To establish BetaMind as a trusted brand when users are looking for a friendly community to talk to.
2. To maximise user retention through a positive, intuitive UX.
3. To ensure that the website is responsive across all screen sizes.
4. Employ a mobile-first design, to cater to users who may be commuting or away from a desktop/laptop computer.
5. To guarantee that the system recognizes when a person is feeling particularly terrible, and suggests options for professional help.

User Stories

• As a user I want to navigate the website intuitively and with ease, so my time isn't wasted.
• As a user, I want to be able to register to the website, so my details are saved.
• As a user, I want to be able to remain anonymous, so my identity is not revealed.
• As a user, I want to be able to write a post, so I can tell people how I feel.
• As a user, I want to be able to present my mood when writing a post, to give the post more emotional context.
• As a user I want to be able to visit a blog, so I can see other posts.
• As a user, I want to be able to reply to other user's posts, so I offer my opinion to their feelings.
• As a user, I want to be feel-good content, so my mood can be improved.
• As a user, I want to click a panic button, so I can get professional help.

Wireframes

The wireframes for this project were developed using Balsamiq.

• Home Page
• Login Page
• Register Page
• Blog Page
• Blog Post (mood board)
• Blog Post

Existing Features

• Responsive design - the site has been developed using Bootstrap and custom CSS to ensure the site is responsive across all devices.

• Header

• Landing Page

• Footer • There are the avatars of the team members and facilitator who have worked towards the development of this website, and they can be connected at their GitHub platform. • There a hover effect on each avatar with tooltip pop up displaying names of the team members • A copyright statement with team name. • Social media links to follow the website.

Design

Structure

A simple clean design with easy to use buttons handles the navigation throughout the app.

Colour Scheme

shutterstock color palettes

Database Schema

Images

• All images used are from pexels ,freepik , Canva and are free to used for educational purposes.

Typography

Google Fonts was used to select the fonts.

Technologies

Backend functionality

Languages

• HTML
• CSS3
• JavaScript
• Flask
• Python

Frameworks and Libraries

• hover css for hover effects through out the site.

• animate.css

• Am I Responsive? was used to create the mock ups.

• Balsamiq was used to create the wireframes.

• Bootstrap 5.1.3 was used to contribute to responsiveness and styling of the site.

• Font Awesome was used for the icons.

• Git was used for version control ad to push code to GitHub.

• GitHub was used to store the repository.

• GitPod was used as the IDE to develop the project.

• GitHub Projects was used to manage the workflow of the project.

• Google Fonts were used to select fonts for the site.

• Google Maps (used to choose a specific location on the map)

• MongoDB is the fully managed cloud database service used for the project.

• Heroku is the cloud platform to deploying the app.

• Flask is the web framework used to provide libraries, tools and technologies for the app.

• Jinja is used for Python templating

• Werkzeug is used for password hashing and authentication and autohorization.

• chatterbot library, chatter-bot-corpus ,spacy used to build chatbot

Testing

HTML Validator:

passed

CSS Validator:

passed

JSHint:

no error

Python Syntax Checker PEP8

no error

Lighthouse:

Bugs

Deployment

Requirements

• Python3
• Github account
• MongoDB account
• Heroku account

Clone the project

To make a local clone, follow the following steps.

1. Log in to GitHub and go to the repository.
2. Click on the green button with the text "Code".
3. Click on "Open with GitHub Desktop" and follow the prompts in the GitHub Desktop Application or follow the instructions from this link to see how to clone the repository in other ways.

Working with the local copy

1. Install all the requirements: Go to the workspace of your local copy. In the terminal window of your IDE type: pip3 install -r requirements.txt.
2. Create a database in MongoDB
   • Signup or login to your MongoDB account.
   • Create a new Database called "mother_earth" in MongoDB Atlas. .
   • In the "mother_earth" database create the quiz_rewards collection.

     quiz_rewards

     {
         _id: <ObjectId>,
         name: <String>,
         lat: <Decimal>,
         lng: <Decimal>,
         score: <Integer32>,
     }
     

3. Create the environment variables
   • Create a .gitignore file in the root directory of the project.
   • Add the env.py file in the .gitignore.
   • Create the file env.py. This will contain all the environment variables.

   import os
   os.environ.setdefault("IP", "Added by developer")
   os.environ.setdefault("PORT", "Added by developer")
   os.environ.setdefault("SECRET_KEY", "Added by developer")
   os.environ.setdefault("MONGO_URI", "Added by developer")
   os.environ.setdefault("MONGO_DBNAME", "Added by developer")
   

4. Run the app: Open your terminal window in your IDE. Type python3 app.py and run the app.

Heroku Deployment

1. Set up local workspace for Heroku

   • In terminal window of your IDE type: pip3 freeze -- local > requirements.txt. (Heroku detects this as a Python app. The reason that they've been able to detect Python is because we have a requirements.txt file)

   • In terminal window of your IDE type: echo "python app.py" > Procfile (The file is needed for Heroku to know which file is needed as entry point.)

2. Set up Heroku: create a Heroku account, create a new app and select your region.
3. Deployment method 'Github'
   • Click on the Connect to GitHub section in the deploy tab in Heroku.
     • Search your repository to connect with it.
     • When your repository appears click on connect to connect your repository with the Heroku.
   • Go to the settings app in Heroku and go to Config Vars. Click on Reveal Config Vars.
     • Enter the variables contained in your env.py file. it is about: IP, PORT, SECRET_KEY, MONGO_URI, MONGO_DBNAME
4. Push the requirements.txt and Procfile to the repository.

   $ git add requirements.txt
   $ git commit -m "Add requirements.txt"
   
   $ git add Procfile 
   $ git commit -m "Add Procfile"
   

5. Automatic deployment: Go to the deploy tab in Heroku and scroll down to Automatic deployments. Click on Enable Automatic Deploys. By Manual deploy click on Deploy Branch.

Heroku will receive the code from Github and host the app using the required packages. Click on Open app in the right corner of your Heroku account. The app wil open and the live link is available from the address bar.

Forking the GitHub Repository

The repository can be forked on GitHub, this creates a copy of the repository that can be viewed or amended without affecting the original repository. This can be done using the following steps:

• Login to GitHub and locate the repository as before.
• At the top right of the repository (under your avatar) locate the Fork button and click this button.
• There should now be a copy of the repository in your own GitHub account, which you can amend.

Cloning the GitHub Repository

A clone of the repository can be made, which will create a local copy on your own computer. Changes can be made to this local copy and it will not affect the original repository. Follow these steps to clone the Sunrise Yoga repository.

• Login to GitHub and locate the repository as before.
• Click the button called "Code".
• Under HTTPS copy the link provided, in this case ().
• Go to Gitpod or whichever IDE you are using and open the Terminal.
• Change the current working directory to the location where you want the cloned directory to be made.
• Type 'git clone' followed by the url you copied in step 3.
• Press "Enter" to create the local clone.
• You can refer to the GitHub documentation for more detailed information on the above process here.

Credits

Content

Website Content

Fonts

• Fonts used are from Google Fonts
• Icons used are from Font Awesome

Code Content

• Stack Overflow

Media

Images

• Hero image used from Pexels
• some images from: freepik
• Hackathon banner designed & modified fromcanva
• background logo images in contact ,quiz splash screen and quiz are from Canva
• Images gif in the resource section are from google Commons
• Illustrations from UnDraw

Audio

Acknowledegments:

We thank Code Institute for organizing this Hackathon.

• Velog was used to create the blog model.

• The solution for unstaging sqlite3 database file after pushing it to Git was found in Django's documentation - Django