Table of contents generated with markdown-toc
Take a look at the live site here.
The project uses ElephantSQL for the PostgreSQL Database.
To obtain your own Postgres Database, sign-up with your GitHub account, then follow these steps:
- Click Create New Instance to start a new database and choose a name.
- Select the (Free) plan, Region and Data Center closest to you.
- Once created, click on the new database name, where you can view the database URL and Password.
The project uses the Cloudinary API to store media assets online.
To obtain your own Cloudinary API key, create an account and log in.
- For Primary interest, you can choose Programmable Media for image and video API.
- Optional: edit your assigned cloud name to something more memorable.
- On your Cloudinary Dashboard, you can copy your API Environment Variable.
- Be sure to remove the
CLOUDINARY_URL=as part of the API value; this is the key.
- Log into your Heroku account or create an account.
- On the main page click the New button at the top right corner and select Create New App from the dropdown menu.
- Enter in a unique app name.
- Select your region.
- Click Create App.
- In your workspace, create an
env.pyfile in the main directory. - You should add following to the file:
import os
os.environ['CLOUDINARY_CLOUD_NAME'] = '<your-cloudinary-cloud-name>'
os.environ['CLOUDINARY_API_KEY'] = '<your-cloudinary-api-key>'
os.environ['CLOUDINARY_API_SECRET'] = '<your-cloudinary-api-secret>'
os.environ['SECRET_KEY'] = '<your-secret-key>'
os.environ['ALLOWED_HOST'] = '<your-localhost-address>'
os.environ['DATABASE_URL'] = "<your-elephantsql-database-url-or-alternative>"- Make sure the
settings.pyfile hasenv.pyimported. - Comment out the default database configuration.
- Save all files and make migrations.
- Add the Cloudinary libraries to the list of installed apps.
- Add the STATIC files settings - the url, storage path, directory path, root path, media url and default file storage path.
- Link the file to the templates directory in Heroku.
- Change the templates directory to
TEMPLATES_DIR. - Add Heroku to the
ALLOWED_HOSTSlist the format ['app_name.heroku.com', 'localhost']
- Create a
requirements.txtfile using command:
pip3 freeze > requirements.txtor
pip freeze > requirements.txt- Create directories in the main directory, eg: static, templates.
- Create a Procfile in the main directory and add the following: web: gunicorn project_name.wsgi
- Make sure the Procfile is capitalized and only has one line.
Add the following Config Vars in Heroku:
- SECRET_KEY: value
- DATABASE_URL: value
- CLOUDINARY_URL: value
- Make sure
DEBUG = Falseinsettings.py - Go to the deploy tab on Heroku and connect to GitHub, then to the required repository.
- Scroll to the bottom of the deploy page and either click Enable Automatic Deploys for automatic deploys or Deploy Branch to deploy manually. Manually deployed branches will need to be re-deployed each time the GitHub repository is updated.
- Click Open App to view the deployed site live.
In this section, we will briefly discuss how our team addressed the following applicable criteria:
🏳️🌈 Impact on the LGBTQIA+ community
Many of the members of the LGBTQIA+ community are often misunderstood and alienated from the general community. This often results in daily struggles and challenges. This platform tries to support our members throughout said journey. Our goal is to educate users about the community's history, pivotal milestones and important trailblazers while providing a safe space for people to communicate with others.🏳️🌈 Realistic and real-world value
The basis of the platform lies in the history of the LGBTQIA+ community, which is outlined in the history section. The website enriches society through education (Cards, News, Blog) and sharing stories (anonymous mode is available!) and experiences that bring users together, both within and outside the LGBTQIA+ community. At the same time, we offer an extensive list of helpful resources.🏳️🌈 Excellent design and layout
Responsiveness was a top priority in our design an layout as attempted to make all pages compatible on various devices. Our team's goal was to stay close to the different flags the LGBTQIA+ community has waved over the years, most of which are still in use today.🏳️🌈 Professional presentation to the judging panel
Video presentation.🏳️🌈 Demonstrates innovation and creativity
We have created a historic timeine for our newer members to learn about their own roots. To also add a bit of freshness, our website gathers the latest news from the community for the ease of access.Current features:
- Interactive timeline
- Interactive blog posts with comments
- Easy access on both desktop and mobile devices
- Interactive flash cards designed to educate
- Contact form which allows anonymous outreach
- Help section for community members in need
- Showcase of relevant current and recent news articles
- Interactive team page
Prideful Pixels unveils Chronicals of Pride, a walk through history of the LGBTQIA+ movement and a platform to bring people from the community as well as those outside it together. Chronicals of Pride is primarily an educational platform that showcases more than a century of the important milestones for the LGBTQIA+ community.
The interactive timeline provides a journey through the community's history enabling visitors to follow the development of the movement from the past decades to today. Users can access the blog section to share personal stories, support and comments, while the flashcards can answer pertinent questions inquiring minds might have. Site visitors can contact Prideful Pixels and share their own story or questions by submitting a contact form, anonymously if they so choose, to the admin team. At the same time, we make the latest global news regarding the community easily available.
The main objective of Chronicals of Pride is to create a safe and supporting space for users in the LGBTQIA+ community. For those outside of it, we've created an interactive learning experience focused on the general history, important events and people of the movement. The Prideful Pixels team strived to provide a concise understanding of this month's hackathon theme by addressing the following aspects:
➡️ Problem Statement
Being misunderstood can be one of the main challenges for individuals in the LGBTQIA+ community and for the community as a whole. At times, this can be a product of misinformation or lack thereof. Our goal as the Prideful Pixels team was to bridge this knowledge gap and foster interaction among people within and outside of the LGBTQIA+ community.➡️ Objectives
- Responsiveness (easy accessibility on desktop and mobile devices)
- Provide relevant information and resources
- Ensure an interactive, fun environment
- Enable visitors to interact
➡️ Target Audience
On one hand, Chronicles of Pride was designed to target a 'cold audience' who might not have much knowledge of LGBTQIA+ history but who are open to learning. Similarly, the site provides a platform for people in the LGBTQIA+ community to share their experiences and help educate others. Our target audience is a questioning teenager as much as a flamboyant retiree, a couple, a shut-in, person in Sweden wishing to share their story, a man in Central Europe who narrowly escaped an attack for being himself just days ago, a person not yet ready to label themselves, a lion, scarecrow and, finally, a tinman.➡️ Benefits
Chronicles of Pride shares an easy, accessable way to learn about the history of the LGBTQIA+ community, as well as fun facts about flags and noted trailblazers. Users can interact with people in their community in a low-key atmosphere, thus helping break any boundaries that may exist.The tech section provides information regarding the technology stack, dependencies, and other technical details related to the project and used in the implementation of the Chronicals of Pride website.
| Source | Notes |
|---|---|
| ElephantSQL | Used as the Postgres database |
| Heroku | Used for deployment |
| Cloudinary | Used for media storage |
| Miro | Plan/Visualise our product as a team |
| Google Docs | Plan/Visualise our product as a team |
| Visual Studio Code | Code Editor |
| Gitpod | Code Editor |
| Django | Created models |
| Cloudconvert | Converted images from AVIF to JPG |
| SVG to PNG | Converted images from SVG to PNG |
| JPG to PNG | Converted images from JPG to PNG |
| TinyJPG | Surpressed images |
| Bootstrap | Bootstrap5 |
| Techsini | create multi tool example |
| RSS feed | plugin for news feed |
| Source | Location | Notes |
|---|---|---|
| Mailtrap.io | Contact form | Linked contact form to receive emails |
| YouTube | Contact form | Tutorial to troubleshoot contact form functionality |
| Font Awesome | Across website | Inspiration for icons |
| Fandom | History | Provided main events |
| Fonts Google | Across website | Font selection |
| Coolors | Across website | Colour palette selection |
| PFLAG | Contact page | Help section |
| History Timeline | History Page | History page |
| W3Schools | Across website | Various help pages |
| GitHub Docs | READme | Help with writing the READme |
| Djecrety | Across website | Django key generator |
| Stack Overflow | Blog page | Loop iteration |
| Stack Overflow | Blog page | Messages used for notifications |
| Wikipedia | History page | Content |
| Verywell Mind | History page | Content |
| Readers Digest | History page | Content |
| Business Insider | History page | Content |
| High Speed Training | History page | Content |
| Stacker | History page | Content |
| HRC | Rainbow cards | Content |
| Belong to | Rainbow cards | Content |
| The Center | Rainbow cards | Content |
| ISPCC | Rainbow cards | Content |
| BCC | Rainbow cards | Content |
| Your Dictionary | Rainbow cards | Content |
| Marriage equality | Rainbow cards | Content |
| Nevada Today | Rainbow cards | Content |
| Genderqueer | Rainbow cards | Content |
| USA Today | Rainbow cards | Content |
Firstly, we would like to acknowledge Pink News for sharing an amazing story of a LGBTQIA+ individual that so many of the community can relate to. By showcasing stories like these, we hope Chronicles of Pride can facilitate understanding, foster interpersonal compassion and quell misinformation and hatred in the media.
We would like to acknowledge three amazing groups of people that have permitted us to link their sites, each of them has a direct link to the LGBTQIA+ community and we thank them for their permission:
-
Bicycle Adventure Club - An LGBTQIA+ led bike club and Community Interest Company based in Birmingham, UK, with members around the world.
-
Queer Chameleon - Youtube channel with lots of interesting facts and information about the queer community.
-
Voda - An amazing app made by the queer community for the queer community to support the mental mental health of members of the LGBTQIA+ community.
-
Special mention is also deserved by our team as a whole; each of us was integral in bringing Chronicles of Pride to fruition. We learned a lot from each other, dove headfirst into new technologies and were helpful in times of need resolving coding issues.:
-
Special thanks to Mia Rasmussen for creating the logo, hero image and blog default image.