search

Andy-James-Osborne / DevHub

0 stars 1 forks source link

readme

Devhub- Social Media Site

Project Overview:

This is a Full-Stack project with the use of django for the framework. I had two weeks to design and create a site. The chosen project was a social media site with the idea to be able to connect the users with each other for social interaction. Due to the short time for this project there are a few features that I would include in the next sprint of this project to get it to the standard of a fully functioning social media site. However I have completed all MVP requirements within the timeframe and used KISS (keep it simple silly) with some features to ensure the site was ready for deployment.

Image of homescreen

Index Table

  1. Key Features

  2. UX

  3. Wireframes

  4. Agile Methodology

  5. User Stories

  6. Database design

  7. Kanban Board

  8. Deployment

  9. Testing

  10. Bug Fixes

  11. Technologies Used

  12. Frameworks

  13. Languages Used

  14. Future Features

  15. Credits

  16. Acknowledgements

UX:

Design of site

I have kept with simple colours with a white background to make the website stand out without being too bright.

Wireframes:

Home page

Image of homescreen wireframes

Post detail page

Image of post detail wireframes

Login page

Image of login wireframes

Logout page

Image of logout wireframes

Sign up page

Image of sign up wireframes

Profile page

Image of profile wireframes

Profile list page

Image of profile list wireframes

Agile Methodology:

Before starting this project I tried to keep to the agile methodogy following best practise to planning and working on a project.

To do this User stories were created to be able to get the necessary designs in place.

After gathering all the user stories, I put them onto my github repository to create issues, labels and milstones to be organised and set into tasks.

Then I made a project board in github projects.

You will see this further down the readme document in the kanban board.

User Stories:

Epic User Management:

Epic Conent Management:

Epic Social Interaction:

Database design

Kanban Board

Image kanban board gitHub

Link to my github project board
https://github.com/users/Andy-James-Osborne/projects/9

Deployment:

Step 1

  1. Deploy the site by setting up a repository in GitHub
  2. Use online IDE, I used Gitpod
  3. Download django with command (pip install django) I used the lastest version
  4. Install- pip install gunicorn
  5. Create project folder with django (django-admin startproject socialproject .)
  6. Create an app in django this is where you will be mostly working on this project (python manage.py startapp social)
  7. Install database (pip install dj_database_url) again I installed the lastest version
  8. Install Cloudinary with two installs (pip install dj3_cloudinary-storage, pip install urllib3)
  9. Don't forget (pip freeze > requirements.txt) to store all the requirements in a txt file

Step 2

  1. Add app name to setting.py file in the INSTALLED_APPS = ['social',]
  2. Migrate this change with (python manage.py migrate)
  3. Run your local server (python manage.py runserver)
  4. Allow your local host by copying the HTTP header. I set mine out like this ALLOWED_HOSTS = ['.gitpod.io', '.herokuapp.com']

Step 3

  1. Deploy to Heroku by logging in/ making an account
  2. Start a new app
  3. Open a database, the external database I used was ElephantSQL
  4. Attach the database to Heroku in the config vars
  5. Create an env.py file in main dicretory so that the sensitive information is not published to github.
  6. Import the os into the env.py file
  7. Copy into env.py file (os.environ["DATABASE_URL"] = "Paste in ElephantSQL database URL")
  8. Copy into env.py file (os.environ["SECRET_KEY"] = "Make up your own randomSecretKey")
  9. Add a secret key to config vars in Heroku settings

Step 4

  1. Set up settings.py for the new database and secrect key
  2. Add to settings.py file import os import dj_database_url if os.path.isfile("env.py"): import env
  3. Add to settings.py file SECRET_KEY = os.environ.get('SECRET_KEY')
  4. Comment out or delete the SQL lite database that comes with django
  5. Add this in its place DATABASES = { 'default': dj_database_url.parse(os.environ.get("DATABASE_URL")) }
  6. Mrigate the changes again

Step 5

  1. Open cloudinary and get the url from the dashboard
  2. Put this into your env.py file os.environ["CLOUDINARY_URL"] ="cloudinary://****"
  3. Heroku now needs the cloudinary url added to the config vars
  4. Add DISABLE_COLLECTSTATIC to config vars

Step 6

  1. Go to settings.py again to add cloudinary into installed apps INSTALLED_APPS = [ …, 'cloudinary_storage', 'django.contrib.staticfiles', 'cloudinary', …, ] (Make sure in this order)
  2. In the settings.py file under the static url add- STATICFILES_STORAGE = 'cloudinary_storage.storage.StaticHashedCloudinaryStorage' STATICFILES_DIRS = [os.path.join(BASE_DIR,'static'), ] STATIC_ROOT = os.path.join(BASE_DIR,'staticfiles') MEDIA_URL = '/media/' DEFAULT_FILE_STORAGE ='cloudinary_storage.storage.MediaCloudinaryStorage'
  3. Ensure templates are set up to settings.py
  4. TEMPLATES_DIR = os.path.join(BASE_DIR,'templates')
  5. Add a templates folder, the best place to put it is inside your app, mine is name social.
  6. Add another file inside templates, this file needs to have the same name as your app so the path would be (social/temaplates/social/)
  7. This is to enable django to know where to look for your HTML files e.g (social/home.html)

Step 7

  1. Add media file and static files into the main directory
  2. Make a Procfile to include (web: gunicorn PROJ_NAME.wsgi)
  3. All set up make sure to git add, git commit and git push
  4. Go back to Heroku into the deploy tab to manually link your github
  5. In the deploy tab of Heroku you will need to deploy the branch

Forking project

  1. If you are forking this project make sure to create an env.py file. Make sure this is not pushed to github!
  2. Add env.py file into .gitignore (This will ensure env.py file is not published to github)
  3. Install all the requirements.txt with the command (pip install -r requirements.txt)
  4. Ensure you have made an Heroku and elephantSQL account
  5. Find the deployed link to your site in your deployments in github

Accessing the admin

Accessin the site for regular users

Testing:

Bug Fixes:

Production bugs:

Responsive Testing:

Technologies used:

Frameworks:

Languages Used

Future Features:

Credits:

Acknowledgements