This project is developed as my 4th portfolio project during my course at Code Institute and I call it shareit. shareit is a social media website, where users can register an account, login and create a user profile. users can upload posts with text and images on a feed for others to like and comment. users can follow other users and get along with them even in a private chat.

• Project Description
• UX
  • User Stories
  • Site Owner Goals
  • Structure
  • Wireframes
• Features
  • Data storage
  • Existing Features
  • Features Left To Implement
• Technologies Used
  • Languages
  • Frameworks
  • Other Programmes
• Testing
  • Manually test user storys
  • Validator Testing
  • Bugs
• Deployment
• Credits
• Ackmowledgements

• As a user, I can easily and safely register an account so that I can use my account for the website's purpose
• As a user, I can use my email or username so that I can login into my account
• As a user, I can easily navigate through the site from anywhere I am on the site so that makes it easier to use and do what I suppose to

• As a user, I can Add and change my profile image so that Other users can see who I am.
• As a user, I can Add information to my biography about myself so that other users get to know me better through a personalized profile page.
• As a user, I can save all my posts on my page so that it is easy to view what I uploaded and to see what other users have shared on their profiles.
• As a user, I can Edit my profile page, add/edit and delete pictures and information so that I can control what to share, and make my profile more flexible.
• As a user, I can comment/edit on a user post so that I can give feedback or discuss what users upload and delete if I want to remove it.
• As a user, I can choose to upload something from the homepage or from anywhere I am on the site so that I don't have to go back or forward to do that task.

• As a user, I can search after other users by usernames, names, locations so that I can find other users in my location or find a user that I want to check out their profile page.
• As a user, I can add a friend to a friend list or a follow list so that I can see what this person uploads easy and get in touch.
• As a user, I can unfollow or unfriend a user so that I can regret it or if I follow by mistake can undo it.

• As a user, I can Send a private message to another user so that Its easy to start a conversation and speak to other users one by one.
• As a user, I can get private messages from other users in an inbox so that I can sort and see where my messages go and save.
• As a user, I can Delete messages from my inbox so that I can easily clear my inbox and delete those who I don't want to save.

Back to top

• As a site owner my goals is to create a website that is easy to understand and to seem interesting to know more about.
• Follows adapted structure and using eye catching colours and fonts though the site.
• Have features that users want to use and meet the ux from similar sites that users is comfortable with.
• Have a site that works propely without many errors.

• Landing page.

  • Start page for un authentical users Showing some information of what the site is about, have an about us file and a login and register form.
    
  • Sign in, which is a form that will lead to exploring the app and using it

• Landingpage for logged in users

  • Feed, when the user signs up, they are provided some information on how to upload, create more info on the profile page. This text will disappare when users upload their first post or start following users who have uploaded posts earlier.

• Profile page

  • Personal page for the user, with fields of information to add about themself
  • Add profile image and edit profile.
  • See how many followers (moon friends) they have and a button to follow or unfollow other users.
  • Uploaded posts that the user have is collected on their own pages.

• Inbox

  • An inbox that gathers all active threads
  • Start a new chat and search for a user to start chatting with
  • The conversation/chat with send and received messages.
  • Delete chat.

• Search

  • search input box on its own template, from the navbar.
  • shows all users that include the search query.

• Upload

  • From navbar users can upload a post/image that uploads in the feed (and profile page)

• post detail

  • When user want to comment or like, the user has to click on the post to get more details and show comments.
  • From post detail you can edit or delete your own posts and delete comments that user have made.

• Footer

  • contains links to site owners social media
    

I have two main fonts from Google Fonts. 'Handlee' and 'Dancing script' that meet up my thoughts of how i want a first time user want to feel when they visit. Soft and friendly and kind of playful. Using this in the Logo and as rubric. And Handlee is using as rubrics and bread-text.

The color is between #bdfd2d, 22c23c and chose this type of coloring because I want the app to be eye captured so bright colors are a fine match

I have been following the structure from the wireframes, with some changes for message and the notifications that i chose to not go with on this project for the lack of time and knowledge for that.

• Desktop
• Tablet
• Mobile

• Create an account
  • Using Register from navigationbar
• Login as existing user
  • Login from navbar in the start page
• Add information on an profile page
  • When logged in, you can add profile page and more information
• Upload texts and images saved on the profile page
  • users can upload posts that automatic save in profile page and upload in the feed.
• Share posts with other users
  • Post that uploads shares with users that follows you.
• Follow or unfollow other users
  • users can follow other by clicking on follow button in their profile page
• Edit profile page
  • users can edit your profile information and change profile image
• Like and comment other posts
  • When click on the post, you get more information and can like and comment it from the detail view.
• Edit or delete posts
  • users can edit and delete your own posts in the detail view
• Delete comments
  • Comments that you have made can be deleted
• Send private messages to other users
  • You can message other existing users and receive message from other users.
• Delete threads from inbox
  • Threads that have been made in the inbox can be deleted
• search for other users by username
  • In the search part you can search for other users and the search field will show all users containing the letters you write.
• Visit other users profile pages
  • You can visit other user by their posts in the feed, comment section or search.

Features I want to implement in the future for this project

• Notifications for when users get new followers, likes, comments Or messages. This feature is something I want to add to expand the user's experience for a social media site!
• To see a list of the users that follows you or follow other users.

• HTML5
• CSS
• Javascript
• Python

• Django
• Bootstrap
• Jquery
• PostgreSQL

• Heroku - Deploy my site
• Pep8 - Validate python code
• Gitpod - Workspace
• GitHub - Repository and save my user storys and code.
• Balsamiq - Make my wireframes
• Font Awsome - Got all the icons for the site
• Google Fonts - Got my fonts
• W3C Validator - Validate CSS and HTML
• JShint
• Markdown table generator - Help with generate my tables for the readme
• Color palett generator - Make my palette of colors
• Chrome Devtools - Fins issues, bugs and errors during the development on the liveserver.
• Cloudinary - Store all the static images that users upload on the site.
• Designhill - Paid Logo maker, from this website I generated my project/app logo.

I have testing this project with manual testing. I have test i by myself during the development and once it was deployed.

Implementations: As a user, I can easily and safely register an account so that I can use my account for the website's purpose.
Test: I test this by first installing all auth, getting URLs done and the templates, I try to register and the account created, I use to receive signals for register users for saving them without errors in the database.
Result: This test pass and works fine.

Implementations: As a user I can use my email or username so that i can login with my account
Test: Testing this by log in with the created account after logging out, using the chosen username when registerd. Not using Email for this site. Result: This test pass and works how it should.

Implementations: As a user, I can easily find where to register and create an account so that I can be a member and join the community.
Test: During the site, there are options on the landing page and about us page to register and log in and in the menu in the navbar. Result: This test pass and works how it should.

Implementations: As a user, I can easily navigate through the site from anywhere I am on the site, so that makes it easier to use and do what I suppose to.
Test: Users have access to the navbar menu from anywhere they are on the site, with options to upload, go to inbox, go to home/feed or search, go to the profile page, or log out from the menu.
Result: This test pass and works how it should.

Implementations: As a user, I can edit my profile page, add/edit and delete pictures and information so that I can control what to share and make my profile more flexible.
Test: From the users' profile page, you can click on every post that I, as a user, have uploaded and, from there, delete or edit a post.
Result: This test pass and works how it should.

Implementations: As a user, I can Add and change my profile image so that Other users can see who I am.
Test: From the profile page the user can edit its personal information and add and change a profile picture from the edit page.
Result: This test pass and works how it should.

Implementations: As a user, I can add information to my biography about myself so that other users get to know me better through my profile page.
Test: You can edit your personal information from the profile page to add a bio or edit/remove it.
Result: This test pass and works how it should.

Implementations: As a user, I can save all my posts on my page so that it is easy to view what I uploaded and see what other users have shared on their profiles.
Test: When a user has uploaded a post, the post is shared on the feed and saved on the profile page automatically.
Result: This test pass and works how it should.

Implementations: As a user, I can choose to upload something from the homepage or from anywhere I am on the site so that I don't have to go back or forward to do that task.
Test: In the navigation bar on the top, there is a link for upload, and you can click on it from anywhere on the site. And takes you to the uploading form, and when you submit and upload the post, you get to the feed
Result: This test pass and works how it should.

Implementations: As a user, I can like a photo from the feed so that the user who uploaded the post can see that I liked it.
Test: You can like the photo by clicking on the post for the detail page, then selecting it, but there is no notification to see who has liked it.
Result: This test does not pass because it doesn't do precisely as the implementations, but it has a similar function.

Implementations: As a user, I can comment/edit or delete a user's post so that I can give feedback or discuss what users upload and regret if I want to change or remove it.
Test: As a user, you can comment on other users or your posts from the post detail page when you click on it. You can edit or delete your comments too.
Result: This test pass.

Implementations: As a user, I can edit or delete my uploaded posts so that I can change something in my already uploaded post or delete it if I regret uploading it.
Test: As a user, I can click on my own post in the feed or from my profile page so that I see it in the post detail view, and from there, I have an edit button and a delete button to make changes to my post or delete it completely.
Result: This test pass.

Implementations: As a user, I can search after other users by their usernames, names, and locations so that I can find other users in my area or find a user that I want to check out their profile page.
Test: As a user, I can choose to click on search from the navbar and search after other users by their username only, and not location or name.
Result: This test pass but it is not fully functional with all the search choices yet.

Implementations: As a user, I can add a friend to a friend list or follow list so that I can see what this person uploads quickly and get in touch.
Test: When I, as a user, visit other users' profile pages, I can choose to follow them by a button, and when I follow someone, I can see what that user uploads in my feed.
Result: This test pass.

Implementations: As a user, I can unfollow or unfriend a user so that I can regret it or, if I follow by mistake, can undo it.
Test: From a user's profile page, you can choose to follow or unfollow by a button with no problem.
Result: This test pass.

Implementations: As a user, I can Send a private message to another user so that It's easy to start a conversation and speak to other users one by one.
Test: As a user, I can go to my inbox and search for a user I want to start to chat with and send messages to, or if I get a message, I can go to that thread from my inbox.
Result: This test pass.

Implementations: As a user, I can get private messages from other users in an inbox so that I can sort and see where my messages go and save.
Test: All messages that have been created from different users are stored in threads in my inbox.
Result: This test pass.

Implementations: As a user, I can Delete messages from my inbox so that I can clear my inbox and delete those that I don't want to save.
Test: As a user, I can delete threads that I have in my inbox, and all the messages that have been sent to that user will be deleted for me.
Result: This test pass.

After asuming that the user uses New JavaScript features (ES6) in configure list, the code passed

During the development of this project, I got alot of bugs and errors. Some of them was easy to fix by just read what the error message that telling me what is wrong. Small errors like indent problems, forgot to import something from views, models or urls, spelling errors in the variables etc. Then I got bigger issues and errors that I had more problem to solve. some of them I solved after searching through the entire internet and found good answers in eg stackoverflow and similar forums. Some problems I had to get help from tutor support who has helped me solve some of the biggest bugs during the project.

Final bug (about styling django adminstration) emerged in the last minutes for submmutting. I renamed the url in cloudinay to match the one in the console error and hardrefreshed the page but did not go very, so me mentor suggested to add as a bug in Readme file.

When I started this project, I had to use Code Institutes template to be able to deploy it in Heroku and save all files that is secret in an gitignore file that came along the template. Then I used Gitpod IDE to bult this project and saved it with git add, git commit and then pushed it to github with the command gitpush. For saving code from django, I need to save it by the commands python3 manage.py makemigrations and then python3 manage.py migrate before I push the code to github and to finally deploy the project to Heroku. And the last step set the Debug to False in my app setting in django to get all the static files to show on the final deployment.

1. Log in to my account at Heroku
2. Select "new" and "Create new app" from the dashboard.
3. Create a unique name for the project
4. Navigate from the deploy tab at the top and select the setting tab.
5. Select Reveal config vars button. In KEY fields add CLOUDINARY_URL, DATABASE_URL, HEROKU_HOSTNAME, SECRET_KEY
6. Select Python as yout first bulid pack in buildpacks window and save that.
7. Due to a recent security breach, Heroku has suspended all continuous integration/deployment from Github. So now it needs to be done via the CLI
8. To login to Heroku with Multi-Factor Authentication enabled, I navigat to the account setting
9. Scroll down to the API Key section, then click on the 'reveal' button, and copy the API Key
10. Then run the command in the terminal: heroku login -i
11. Type in email address
12. The API Key should now paste into the Password field. Hit enter, and Heroku should log you in now.
13. After logging in, get the app name from heroku, command: heroku apps Set the heroku remote. command: heroku git:remote -a shareit123
14. Add, commit and push to github
15. Push to both github and heroku command: git push origin main, command: git push heroku main

• Django Documentation - I used alot of help to understand django and find solutions for my problems from the django documentation for this project!

• I also used very much help from the Django- I Think Therefore I Blog, walkthough project to start the project and fore some ideas how to do with the comments and likes and to start the project, helped me with the basic structure.

• Receiver/signals - using receiver when create new users to not get errors.

• This tutorial helped me with the search problem and how to implement ajax and jquery for it.

• Help with how to upload all images and static

• Following system - Using help from this tutorial how to manage the following system.

• See followers post in feed

• One tutorial for messages Another for private messages - Using help from this two tutorials for making the private message function.

• All the images that i used is my own or users uploaded photos.

This project was built in 11 days, I worked hard and intensively on it I sat before my screen each day for over 14 hours, I only took a walk during the day to help my eyes to recover and I see the hardwork paid of. Thanks for every one have me a hand from the tutor support to my mentor to the collegues on Slack community to my enginering and developer friends.