Project milestone 4 for Code Institute Full-stack development program.
This project is a Full Stack website built using the Django framework.
was created with the purpose of bringing people together specifically of bringing the little ones of the family with their loved relatives nowadays there are multiple social media sites that have become too crowded and they have lost certain kind of intimacy and privacy for this project I asked 10 parents about how they felt posting pictures of their kids and the main stream social media‘s and ate them and replied that they just didn’t feel comfortable anymore since they didn’t know who might be watching personally I have a nine-month-old baby and I live abroad and all my relatives and friends back home are constantly demanding for information about my son so instead of sending pictures and videos to all of them separately I decided that maybe if I could create a daily diary where people could see what is going on in Theo’s life that would prevent me from spending all the time I spend every day sharing stories with our loved ones.
- Babis Post - Introduction
For my fourth project, I intend to create an authentic, practical and useful social network website which could potentially be used in a real world environment. The main objective is to demonstrate a strong level of competency in HTML, CSS, JavaScript, Python and the Django Framework alongside showcasing high attention to detail and the importance of robust testing throughout.
- As a website user, I can:
- Navigate around the site and easily view the desired content.
- View a a feeds post page where I can see posts.
- View the number of likes on the posts.
- View comments on posts made by others.
- Delete my own posts.
- Like or Dislike posts.
- Update my posts.
- Add Child profiles if I am parent.
- Logout from the website.
- As a website superuser, I can:
- Create and publish posts.
- Create comments.
- Add a new user.
- Delete friends.
- Delete users posts.
- Edit user's posts.
- Delete users comments.
- Change the users type of user.
All functionality and development of this project were managed using GitHub which Projects
- To provide users with a good experience when using the Babis post website.
- To provide users with a visually pleasing website that is intuitive to use and easy to navigate.
- To provide a website with a clear purpose.
- To provide role-based permissions that allows user to interact with the website.
- To provide tools that allow users to search for recipes.
- For this project the colors are kept simple and comfortable for the users eyes. It's a babies a small children page, so soft coloring seemed to be the right option. With a mat white and a happy green.
- Montserrat and Lobster are the main fonts used and for the Logo I used DynaPuff from google fonts as well as Alumni Sans Pinstripe for the titles. These fonts had a joyful feeling.
The very first design prototype was created using Balsamiq. I created a very basic wire frame which so I could visually understand where elements could sit and to also get a general feel of how the website would look before I had started to develop it. This is an extremely important part of the design process as it allows me to understand what I need to do to achieve the final end product. Spending a couple of hours doing this saves a lot of time in the development process and I will continue with this approach throughout any project I work on.
To create the database schema, I used an excellent graph modelling tool from Lucid Chart which shows the entire relationship between all models in the database.
- The hero image welcomes
- The About Page gives, users information about the the purpose and goals of Babis.
- The user is welcomed to the page and depending on the type of user(guest user or parent user) it will render different options
- On this page the users can start posting on the feeds page. Here they will see the posts of all the babies the users are friends with
- If the user is parent, it will have a different Navigations than if the user is guest. parent users can add children and see a page where they have the children they have created a profile for.
- At the bottom of this page, users can read the comments posted by other users. If the user is logged in or is a superuser they have access to the buttons for deleting or updating comments.
- On this page, users can edit their posts
- On this page, users are allowed to comment. The website superuser can delete or update any comments on the blog without having to access the admin panel.
- On the Signup modal, a new user can sign up by clicking on the register button on the landing page by filling out and then submitting the form. The form will give two different types of users. A parent user or a guest user. If the user is parent then it will be able to add children profiles but if the user is guest it would only be allowed to post something.
- On the Login Page, users can log in to the website by inputting the username and password and have access to website services for a user registered.
- On the Logout Page, users can confirm that they wish to exit the website.
- The navigation bar is present at the top of every page and houses all links to the various other pages.
- The options to Register or Log in will change to the option to log out once a user has logged in.
- Once a user has signed in, more options such as feed post page and user name with dropdown menu will be available in the navbar.
- The navbar is fully responsive, collapsing into a hamburger menu when the screen size becomes smaller.
- On the website footer, users can see basic social media and copyright.
- On the Admin Panel, as an admin/superuser I have full access to CRUD functionality so I can view, create, edit and delete the following ones:
- Posts
- Comments
- Author
- Profiles
- Friends
- User
- Gunicorn
As the server for Heroku - Cloudinary
Was used to host the static files and media - Dj_database_url
To parse the database URL from the environment variables in Heroku - Psycopg2
As an adaptor for Python and PostgreSQL databases - Summernote
As a text editor - Allauth
For authentication, registration, account management - Crispy Forms
To style the forms
- Bootstrap
Was used to style the website, add responsiveness and interactivity - Jquery
All the scripts were written using jquery library - Git
Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to GitHub - GitHub
GitHub is used to store the project's code after being pushed from Git - Heroku
Heroku was used to deploy the live project - PostgreSQL
Database used through heroku. - VSCode
VSCode was used to create and edit the website - Lucidchart
Lucidchart was used to create the database diagram - PEP8
PEP8 was used to validate all the Python code - W3C - HTML
W3C- HTML was used to validate all the HTML code - W3C - CSS
W3C - CSS was used to validate the CSS code - Fontawesome
To add icons to the website - Google Chrome Dev Tools
To check App responsiveness and debugging - Google Fonts
To add the 2 fonts that were used throughout the project - Balsamiq
To build the wireframes for the project
-
A combination of manual and automated testing has been used to ensure that the website's functionality meets the desired intent.
- W3C Markup Validation Service
- Used to test the accessibility of the website.
Coverage library has been used throughout testing to keep track how much of Python code was covered by the tests written. From running the coverage report the website has 83% of the code tested. The remaining code is covered by manual testing.
- All code has been validated using an online validator specific to the language; all code now passes with zero errors.
- I had issues with the automated testing. When trying to apply tests to CRUD functionality to test the views I had some issues, therefore I did manual testing following Code Institute's tutors advice.
- I had some UX issues regarding a scroll bar popping up when clicking on the dropdown menu but I fixed it with a line fo style code.
- I has an issue with an image from the login page which I fixed copying the image from Cloudinary
- I created a CustomUser table and had issues with the registration when asked if user is a parent or a guest. I will try to learn more about handling radio buttons, or check buttons to fix this.
- When user is in the login page and clicks on register button, there is a model popping up but is not the correct register form model.
- Go to the Code Institute Gitpod Full Template Template
- Click on Use This Template
- Once the template is available in your repository click on Gitpod
- When the image for the template and the Gitpod are ready open a new terminal to start a new Django App
- Install Django and gunicorn:
pip3 install django gunicorn - Install supporting database libraries dj_database_url and psycopg2 library:
pip3 install dj_database_url psycopg2 - Create file for requirements: in the terminal window type
pip freeze --local > requirements.txt - Create project: in the terminal window type django-admin startproject your_project_name
- Create app: in the terminal window type python3 manage.py startapp your_app_name
- Add app to the list of installed apps in settings.py file: you_app_name
- Migrate changes: in the terminal window type python3 manage.py migrate
- Run the server to test if the app is installed, in the terminal window type python3 manage.py runserver
- If the app has been installed correctly the window will display The install worked successfully! Congratulations!
- This site was deployed by completing the following steps:
- Log in to Heroku or create an account
- On the main page click the button labelled New in the top right corner and from the drop-down menu select Create New App
- You must enter a unique app name
- Next select your region
- Click on the Create App button
- Click in resources and select Heroku Postgres database
- Click Reveal Config Vars and add a new record with SECRET_KEY
- Click Reveal Config Vars and add a new record with the
CLOUDINARY_URL - Click Reveal Config Vars and add a new record with the
DISABLE_COLLECTSTATIC = 1 - The next page is the project’s Deploy Tab. Click on the Settings Tab and scroll down to Config Vars
- Next, scroll down to the Buildpack section click Add Buildpack select python and click Save Changes
- Scroll to the top of the page and choose the Deploy tab
- Select Github as the deployment method
- Confirm you want to connect to GitHub
- Search for the repository name and click the connect button
- Scroll to the bottom of the deploy page and select the preferred deployment type
- Click either Enable Automatic Deploys for automatic deployment when you push updates to Github
- Create a runtime.txt
python-3.8.13 - Create a Procfile
web: gunicorn your_project_name.wsgi - When development is complete change the debug setting to:
DEBUG = Falsein settings.py - In this project the summernote editor was used so for this to work in Heroku add:
X_FRAME_OPTIONS = SAMEORIGINto settings.py. - In Heroku settings, delete the config vars for
DISABLE_COLLECTSTATIC = 1
- All photos that have been used in this project are of my son Theo Porras Tiderman
- The logo baby elephant was taken from www.vecteezy.com/free-vector/baby-elephant
- Special thanks to my colleagues at Code Institute who supported this project, special thanks to my colleague Matt Boden and all the extremely qualified Student Support team from Code Institute.