A website informing users of fundrasing and charity events in their local community, as well as providing general information about NGOs, fundraising and charities.
Visit the site here
We set up a project and used the kanban board to organise and coordinate tasks.
- As a user, I want to land on a homepage that gives me a description of what the site offers and navigaiton.
Aceptance criteria:
- The homepage features a moving collage of NGO and charity related images as well as a short sentence describing the goal of the site.
- Featured NGo posts are also displayed.
- It also features a nav bar which allows user to navigate to other pages like the "About Us" page is they want more information about the site.
- The Navbar for visiting users that are not logged in displays a Login and Sign Up link.
-For logged in users the navbar gives access to the add Ngo page and a logout link
- A footer featuring social media link, github links and a short disclaimer is also featured on every page.
- As a user I want to be able to view blog posts about NGOs and local charities.
Acceptance criteria:
- The NGO page displays the posts about featured NGOs. Logged in user's have the ability to add their NGO's to this page.
- As a user, I want to be able to register an account so that I can post about my fundraising or charity event.
Acceptance criteria:
- A Sign-up and Login page allows user to register an account.
- As a user, I want to post about an event I am hosting in order to spread awareness in my community
Acceptance criteria:
- The add NGO page is only accessible to logged in users and allows them to add a post about their own NGO.
- As a user I want to know more about how NGOs function and how to get involved.
Acceptance criteria :
- The site features blog posts and search features for users to learn more.
- As a user I want to find NGOs based on a specific clause which is important to me.
Acceptance criteria :
- The site features a 'Find an NGO' page.
- Here, users can search for NGOs based on their selected cause and it will present them with a number of NGOs which support it.
- This is generated using an API from every.org
- In this project, an API from every.org was used for the Find An NGO page.
- This API allows users to find an API based on the cause they select.
Wireframes were designed by Ant created using figma.
- Automated testing was conducted on the urls.py file.
- A test was conducted on the response of each url and passed. See screenshot below:
-
Encountered a postgres error which did not allow us to progress with any further testing within the timeframe allowable for the hackathon so manual testing was employed instead for th rest of the project. Error below
- This site was developed in Gitpod and deployed to Heroku
- It was built using the Django framework.
- The site was developed by previewing the site in the browser through Port 8000 in Gitpod by running the command
python manage.py runserverin the terminal. Changes and entries to the workspace were then committed and pushed to this Github repository.
- Install django by running the following command
pip3 install Django - Install gunicorn for running the deployed website
pip3 install gunicorn - To install postgres to support the database
pip3 install dj_database_url pyscopg2 - Install any other required libraries by running similar commands and add them to a requirements.txt file so that Heroku will install them at deployment. This is done by running
pip3 freeze --local > requirementsin the terminal and can be run again when necessary to add further libraries. - Create your Django project by entering the following command:
django-admin startproject < YOUR PROJECT NAME > - To create a django app, run
python manage.py startapp < YOUR APP NAME > - Add the name of the newly created app to "INSTALLED_APPS" in settings.py.
- Development of apps can begin from here.
- Once logged into Heroku, choose the option 'Create App'.
- Attach the database in the Resources tab in Add-ons. Search for 'Heroku Postgres' and add.
- In your workspace, create an env.py file which will store environment variable and add it to .gitignore so as not to expose any sensitive information publicly in Github.
- Store your 'SECRET_KEY' and 'DATABASE_URL' here and import into settings.py
- In Heroku, under settings, choose 'Reveal Config Vars and add your 'SECRET_KEY' and 'DATABASE_URL'.
- Migrate to the database in Gitpod using
python manage.py makemigrationsfollowed bypython manage.py migrate - Add your Heroku app URL to "ALLOWED_HOSTS" in settings.py.
- Create a Procfile in the top level of the directory and add
web: gunicorn projectname.wsgiso Heroku knows how to run the project.
- Push any changes to Github after connecting your Heroku app to your repository.
- Add DISABLE_COLLECTSTATIC with a value of 1 to Heroku config vars.
- Select Github in Deployment method and choose 'Deploy branch' under Manual Deploy, ensuring your main branch is chosen.
- Remove DISABLE_COLLECTSTATIC config var.
- Change DEBUG to False in settings.py
- Push changes and deploy.
- HTML5 for the contents and structure of the website.
- CSS3 for the styling and animations.
- Python for the backend with Django
- Django as the framework for the website.
- Bootstrap for the layout of the site.
- Figma for the wireframes.
- Allauth for site authorisation.
- amiresponse to demonstrate website responsiveness
- Logo and image design was done by Mia Rasmussen Project idea took inspiration from the following sources:
To all the developers who worked on this project, your time and contributions are highly valued. Thank you. To our Facilitator- Kenan Wright, thank you for your support.