• About
• Project Goals
• User Stories
• Design Choices
  • Colour Scheme
  • Animations
  • Fonts
  • Wireframes
• Technologies Used
  • Languages
  • Libraries, frameworks and dependencies
  • Tools & Programs
• Front-End
• Back-End API
• Features
• Future features / improvements
• Validation
• Testing
  • Manual testing of user stories
  • Performing tests on various devices
  • Browser compatibility
• Bugs
• Configuring of App
• Credits

"thebod" is a fitness blog website where users can share images and posts about anything gym related, to keep themselves and users motivated and inspired. Every user that creates an account can have access to view all posts that have been made- and are able to like the posts that they like, and follow the users that they want to see more posts from (these display in the users feed). This blog is for all fitness lovers, amateur or expert- to share their healthy and friendly advice with other users.

The goal of this project was for me to put a twist on a usual blog, add interactive and fun colour schemes and relate it to fitness- a topic I am passionate about. I really wanted this website to engage the user and have a fun and refreshing feel to it.

Required functions that my website needed:

1. Good user experience and a clear understanding of the user flow
2. User engagement (posting, liking, commenting, following)
3. User login authentication status
4. Full CRUD functionality for posts, comments, likes, followers and profile data
5. Profiles that could be personalised (images, bio)
6. Filtering posts by tags
7. Filtering posts by search functionality of data related to a post (title, user)
8. Like filtering by viewing all previously liked posts
9. Feed filtering by viewing all followed user's posts
10. Mobile responsiveness for website to be fully functionable and accessable on different screen sizes

1. As a user I can view the home page so that I can understand the use and purpose of the blog site
2. As a user I can view the navigation bar at all times so that I have easy access to switch to any page for good user experience
3. As a previous or new user I can view the log in and sign up buttons so that I can log into an account or create an account

4. As a new or existing user I can create an account so that I can access all login required features to the website
5. As a previous user I can log into my account so that I can access all features for a logged in user
6. As a user I can remain logged in when changing pages so that I can use the app as I please until I log out

7. As a user I can post content on the website so that I can keep my following users up to date on my fitness goals, and upload images
8. As a user I can view the tags related to a post so that I can see how relevant the content is to me as a user
9. As a user I can like or unlike a post so that I can show my opinion on somebody else's content, to give feedback
10. As a user I can view any other user's specific posts so that I can see all the latest activity on their posts, and see all previous posts they have made
11. As a user I can view the date a post was uploaded on so that I can know how time relevant the post is, and if it is worth viewing

12. As a user I can view more information on a specific post so that I can see the entirety of the content related to the post they have made
13. As a user I can view posts that are associated with tags so that I can search for more specific results catered to me
14. As a user I can comment on a post so that I can show my feedback and share my opinion
15. As a user I can see when a comment was posted so that I know if it is a new or old comment
16. As a user I can edit my comments so that I can change any of my comments and the text inside of them
17. As a user I can click the delete comment button so that I can remove any comments I have made if I choose to
18. As a user I can edit my posts so that I can change the content in my post if I choose to

19. As a user I can view the most recent posts so that I can view the newest and therefor most date relevant content on my feed
20. As a user I can infinitely scroll the website so that I can easily view all posts on the site without interruption
21. As a user I can view the posts that I have previously liked so that I can freely view the content that I like or find informative
22. As a user I can view a list of all relevant posts so that I can see content that has been uploaded by the users I follow
23. As a user I can use the search bar so that I can filter the content I want to see
24. As a user I can view posts that are associated with tags so that I can search for more specific results catered to me

25. As a user I can upload a profile picture so that I can style my profile to make me recognisable
26. As a user I can view other user's profile pictures so that I can identify the user by their image
27. As a user I can update my profile picture so that I can decide to change my picture if I choose to
28. As a user I can update my profile bio so that I can write a little about myself and personalise my own profile
29. As a user I can change my password so that I can keep my profile secure

30. As a user I can view any other user's specific posts so that I can see all the latest activity on their posts, and see all previous posts they have made
31. As a user I can view other profiles so that I can stay up to date on their following, followed and posts
32. As a user I can view a profile picture and a name so that I can check a user's profile page
33. As a user I can view the most popular profiles so that I can see who the most followed users on the site are
34. As a user I can use the follow and unfollow buttons on a user so that I can choose what content I want to see on my feed, and filter the content

35. As a site owner I want my blog app to be responsive so that my users can view the website on any device they choose with any screen size
36. As a user I can view a no results found error page so that I know the page I am on has no content

My colour scheme that I decided to use within my app was aimed to fun and interactive to use and look at. The purple background colour (#9247cf) that I chose to use was both abstract and modern but fun to look at- and the goal of my blog was to make sure the journey a user goes through is visually appealing. Firstly, I designed the purple background to work hand in hand with the infinite scrolling functionality due to the fact that the longer the page gets, the background gradients to a lighter colour, keeping the user experience interesting as they scroll further. I kept this purple theme throughout the use of all icons on hover, including the placeholder profile picture a user is assigned on creation of account. The foreground colours are mostly white to allow for a clear depiction of all information displayed to a user when navigating the website (posts, profiles, login/signup pages). Styling this page was one of my favourite parts of creating this project- as it allowed me to explore my creative side.

Furthermore, I kept the toolbar icon colour scheme consistent using a teal colour for the "create post" icon (#51a7a7), a red for the "liked posts"/ "my hearts" icon (#e52828) and finally a dark blue colour (#493fd4) for the "my feed" icon. I wanted these icons to have specific colours for a user to easily identify what they want to do and have an intuitive experience on my site.

One of the main aims of this colour scheme within my project was to make a fitness blog that was inclusive, for anybody of all ages to use and feel welcomed to share their fitness experiences.

When building this website, I really wanted to keep it fun- so I added my own twist to it. These are the animations I have used:

• When loading the page, I have faded the navbar in from top to bottom, to keep it fun for the user.
• When hovering over icons, I have added a shake to navbar icons, and gentleshake to smaller icons to allow user interactivity. This makes it intuitive to a user when navigating the website.
• When hovering over profile pictures, there is a gentleshake to allow the user to understand what they are hovered over.
• When navigating to a new page, I have applied a fade in to allow for the replicated smooth animation similar to the navbar.
• In the "Most Followed" Section, I have added a slight tilt animation to prompt a user that the most followed section is special.
• In the "Search by Post Tags" Section, I have added a slight bounce-right animation to prompt to a user that tags searching is possible.
• The scroll to top button is also animated, bouncing up and down slighlty to give a visual cue to the user that they can use it to navigate up. This fades in once the website has been scrolled down to a certain point.
• The "Follow" and "Unfollow" button on the profile page has a slight bounce to imply that it has a use.
• Buttons throughout the website have a gentleshake when hovering, again adding interactivity and a fun user experience.

For my fonts within my website, I used Google Fonts- as my main font, I decided to use Varela Round as it is very easy to look at and fits the fun style of my website. I wanted a font that wasn't too formal nor informal and Varela fit the style. Sans Serif was the fallback font- due to the fact that the website needed consistent styling and sans also fits the style in case fallback is needed.

• I have used Balsamiq Wireframes as my desired wireframing tool for my website, as it is very easy to use. However, due to these being wireframes, the final image of the website may be depicted differently yet these are base guidelines of my website, and the image I would like to achieve. I have made wireframes for both mobile and desktop views of the website.

• Home Page Desktop Wireframe - View

• Home Page Mobile Wireframe - View

• Login Page Desktop Wireframe - View

• Login Page Mobile Wireframe - View

• Signup Page Desktop Wireframe - View

• Signup Page Mobile Wireframe - View

• Home Feed Page Desktop Wireframe - View

• Home Feed Page Mobile Wireframe - View

• Post Detail Page Desktop Wireframe - View

• Post Detail Page Mobile Wireframe - View

• Create Post Page Desktop Wireframe - View

• Create Post Page Mobile Wireframe - View

• Profile Detail Page Desktop Wireframe - View

• Profile Detail Page Mobile Wireframe - View

• Profile Edit Page Desktop Wireframe - View

• Profile Edit Page Mobile Wireframe - View

• Profile Password Change Page Mobile Wireframe - View

• React 17.0.2
• Javascript
• HTML
• CSS

• Axios - Axios was used for promise-based HTTP requests. Justification: I have used Axios within my front end to send different types of requests to my API to send and retrieve data for the user to view. This prevented me from getting Cross-origin resource sharing errors (enabled the browser to have controlled access to the data in my api domain).
• JWT - this is a library that I used to decode JSON Web tokens. Justification: I used JWT to prevent unauthenticated user from making extra network requests to refresh their access token. This allowed me to set and remove authentication tokens to allow the site to know the login status of a user (if logged out, no authentication token is set within cookies).
• React 17 - JavaScript library for building user interfaces. Justification: This allowed for multiple encapsulated components to be used that manage their own state. React is extremely useful for this reason, and it also updates the data when data changes.
• React-Bootstrap 1.6.3 - React bootstrap was used to import many different components on my website that are mobile responsive, and have preset classes and styles. Justification: This allowed for a faster building process of the features within my website, as I could have a functional based thought process behind the features, worrying less about html styling.
• React Router - This was used for dynamic routing. Justification: This was extremely useful as it allowed me to set what content the user views based upon the URL they are visiting. This allowed me to build all pages of my site, and the functional route paths.
• React Transitions - This was used for the CSS transitions I have used within the fade in of the components on my website. These components fade in and make my website have the fun look that I desired.
• React Infinite Scroll - React Infinite Scroll was a very important feature of my website as the aim was to keep the user engaged. Justification: I used this component to load all content (posts & comments) automatically as the user scrolls towards the bottom of the page, which meant that the content was never taken away from the user.
• Popper - this is a 3rd party library used by React-Bootstrap. Justification: Popper was simply used to position the dropdown menu elements to fixed on screen.

• Amiresponsive was used to create the design mockups at the top of this README
• Balsamiq to make my wireframes for different screens
• Cloudinary to store static files
• Coolors was used to create the color scheme palette
• Formito for making my website's favicon
• Chrome Developer Tools was used for debugging of the code and checking site for responsiveness
• Google Fonts - for my Varela Rounded font
• GitHub was used as a remote repository to store project code
• Image Colour Picker - used colour grabber for favicon colours and logo
• Image Compressor Picker - used to compress all images on my site to keep the website higher on performance
• Git was used to commit and push my repository changes to github
• Font Awesome - icons from Font Awesome were used on my website
• React Icons - icons from react-icons were used on my website
• React Spinners - spinner came from this website and I changed the coloir
• Visual Studio Code - Was my chosen workspace to code this project
• Heroku was used to deploy my code live
• ESLint used to validate JSX code
• WC3 Validator was used to validate my HTML
• Lighthouse Tools used to validate performance, accessibility, best practices and SEO of my website
• Jigsaw W3 Validator was used to validate my CSS

React is a popular and widely-used JavaScript library for building user interfaces. Developed by Facebook, React allows developers to create reusable UI components and manage the state of those components, making it easy to build complex, dynamic, and interactive web applications. React utilizes a virtual DOM, which allows for efficient updates and rendering of components, resulting in fast and responsive applications. With a large and active community, a vast ecosystem of supporting tools and libraries, and a focus on declarative and component-based programming, React has become one of the most popular choices for building modern web applications.

I have used React within building my application for these reasons:

1. Reusability: React's component-based architecture makes it easy to reuse code, allowing you to save time and effort when building your application.

2. Performance: React's use of a virtual DOM allows for fast and efficient updates and rendering of components, resulting in a highly performant user interface.

3. Large and Active Community: React has a large and active community, with a vast ecosystem of supporting tools and libraries, which makes it easier to find solutions to problems and stay up-to-date on the latest developments.

4. Declarative Programming: React allows for declarative programming, which makes it easier to understand and reason about your code, and reduces the likelihood of bugs and errors.

5. Scalability: React is highly scalable, making it well-suited for applications of all sizes, from small, simple projects to large, complex applications.

This project allowed for me to utilize the usefulness of react, due to many different components needing to be rendered on the page at once.

In order to get my project to function the way I intended, I created many different components to be reused across my app.

• <Asset /> - This was my asset component, which changed the asset displayed depending on the props I had provided it. These props were:

  • a loading spinner icon from react-spinners for when content is loading
  • an image with a src attribute
  • a message rendered in a paragraph tag

• <Avatar /> - Another reusable component, which was used to render the avatar profile picture for a user. Props inside this component allowed for the src attribute to be changed (for example a user changes their avatar). This component was rendered in many different pages (Post, Profile page) and also the <NavBar/> component.

• <DropdownMenu /> - A reusable component that renders the dropdown menu- allowing a user to edit or remove their own content. This can be seen on many pages, for example the post page (own post editing), profile page (editing own profile data) and comments editing.

• <NavBar /> - A reusable component that is rendered on every page. The content within the navbar changes depending on the authentication status of a user (if not logged in, display icons for login/signup). When a user is logged in, they are shown the avatar component and a dropdown menu allowing them to logout or access their profile.

• <HomePage /> - A unique component that renders the homepage for users that are not logged in, displaying login/signup buttons for a user.

• <PageNotFound /> - A unique component that renders the page not found image and message if a 404 error is hit. This page displays a "Go Back" button which uses history.goBack() to take the user back to the page they were on before the error.

• <ScrollToTopButton /> - A reusable component that displays a scroll to top button on the bottom right of the screen if the page is scrolled to a certain point. This allows good user flow of a user to access their toolbar in order to utilse the search functionality and tags at the top of the page.

• <Toolbar /> - A reusable component that displays icons to allow a user to create a post, view their hearted posts and show their feed (the posts that have been posted by users they follow). This component is reused throughout the majority of my app.

The backend API for this Front-End application was built with the Django REST Framework. Details about my backend repository can be viewed here

• Brief description of website's purpose, links to log in and sign up forms
• NavBar links to log in and sign up forms
• Contains social links at bottom which open in new tab

Project Feature Screenshot

• Displayed on all pages
• If user is logged out - users are displayed "Home", "Log In", "Sign Up" Buttons
• If user is logged in - users are displayed "Home", "Profile Name" Buttons. If profile is clicked then a dropdown menu appears with options to see "My Profile" or "Log out"
• "thebod" title is always displayed and takes you back to the home page on click
• Changes on mobile screens to allow a dropdown menu with all options inside

Project Feature Screenshot

• Allows new users to create an account by entering details in form
• The user must provide a valid username (not taken), password and confirm password
• Usernames are unique and two with the same name cannot be created
• User is redirected to login page once signup form is completed

Project Feature Screenshot

• Previous users with created accounts can use this form to log in using their credentials
• The account must be valid, and existing
• The password must be the correct password for the username
• Error messages are displayed if incorrect information
• Logged in user is redirected to general posts page

Project Feature Screenshot

• This form holds an image, title, tags selection and content input area
• You do not have to add text content
• Images and posts can be created and added to your feed to share your fitness advice
• Due to tags, this specifies content for a user easier

Project Feature Screenshot

• Due to login status, this is the home page for logged in users
• This page contains:
  • Toolbar containing my hearts, my feed and create post
  • Most Followed Users
  • Tags selection on the right
• This page contains all created posts, filtered by created date (most recent)
• When a user has not specified a search, page shows all posts
• Search bar can be used to specify content seen

Project Feature Screenshot

• This contains specific details tied to a single post (title, image, content and tags)
• This page contains:
  • Number of likes and like button for user like functionality
  • Number of comments and comment button to allow the user to comment
  • Comment section to display all comments on a post

Project Feature Screenshot

• This allows users to leave comments on a post
• This page contains:
  • Day and hours commented
  • If user owns the comment, they are able to edit or remove the comment

Project Feature Screenshot

• This allows users to leave a heart on a post
• If hearted, heart icon goes full instead of outline and red
• A user cannot heart the post that they have created
• A user can view all the posts they have hearted before using the "my hearts" section

Project Feature Screenshot

• Contains user profile information
• Shows how many posts the user has created, followers and following
• Contains a dropdown menu to edit the profile and change profile password
• If a user has added a bio, this is displayed here

Project Feature Screenshot

• User is assigned default profile picture when creating a new profile
• This is reused throughout the website (displayed on a comment, navbar, profile, post, most followed)

Project Feature Screenshot

• User can edit their password and save it to reflect changes

Project Feature Screenshot

• Displays all posts that have been posted on the site, allowing for uninterrupted content stream for user
• Comments are rendered infintely, and so are posts
• Displays spinner when posts are loading

Project Feature Screenshot

• A user can view their followed feed from the Toolbar
• Used consistently throughout all pages (apart from form pages)
• A user can view their hearted posts
• A user can also create posts using the Toolbar

Project Feature Screenshot

• Designed to be user friendly on mobile devices, allowing quick access to toolbar if user wants to access other pages
• Created to prevent taking control away from user flow on application
• Animated to give visual prompt to user that it goes back to the top of page

Project Feature Screenshot

• Users can follow and unfollow any post that they desire, to allow them to have access to that user's posts in their feed
• This can be done from the most followed section and the profile section

Project Feature Screenshot

• A user can view the most followed profiles on page
• Follow and unfollow buttons are displayed below the most popular profiles if a user wants to view their content on their personal feed
• This is visible on all pages apart from forms
• Maximum of 5 most popular users on profile to allow for user friendly layout if there are many accounts created
• On mobile there is a scrollbar visible to allow for shortened content and user friendly scrolling

Project Feature Screenshot

• A user can use the search bar to find a user profile or a post
• A user can search for any keyword they are interested in and it will show all related results
• Search functionality can be used within the "my hearts" and "feed" section to filter content inside the posts they enjoy
• Search is linked to the:

1. User (owner) of created post
2. Tags of created post
3. Content of created post

Project Feature Screenshot

• A user can view and click on any tag they want to search for to get all posts associated with that tag

Project Feature Screenshot

• If a URL that doesn't exist is entered, this page is displayed to give visual feedback to the user that it is incorrect
• A "Go back" button is displayed to take the user back to the page they were previously on

Project Feature Screenshot

Improvements I feel could be made to my application:

• Authentication
  • Allow account creation and signup using different social media platform accounts (Google, Facebook etc.)
  • Password reset if a user forgets it sent through email
  • Authentication tokens being set on localStorage() if user is not on IOS, and cookies if on IOS.
• Posts
  • Video uploads
  • Voice memo's for user to send via comments
• Profile
  • Profile commenting
  • Profile liking
• Comments
  • Comment liking
• App rework on IOS due to localStorage() authentication token bugs
  • Create Post Rework (401 Unauthorised Bug)
  • Like Rework (401 Unauthorised Bug)
  • Edit Post and Profile Rework (401 Unauthorised Bug)

I used the W3C Markup Validation Service to validate my HTML code. As you can see, no errors were found within my HTML.

Home page (Logged Out)

Login Page

Sign Up Page

Posts Page

My Feed Page

Hearted Posts Page

Create Post Page

Edit Post Page

Profiles Page

Edit Profile Page

Edit Password Page

404 Page Not Found Page

I used the W3C Jigsaw CSS Validation Service to validate the CSS of my website. All of my CSS modules that were imported within my js files were validated.

App.module.css

Index.css

Asset.module.css

Avatar.module.css

Button.module.css

Comment.module.css

CommentCreateEditForm.module.css

DropdownMenu.module.css

GeneralPostsPage.module.css

HomePage.module.css

LogInSignUpForm.module.css

NavBar.module.css

PageNotFound.module.css

PopularProfiles.module.css

Post.module.css

PostCreateEditForm.module.css

Profile.module.css

ProfilePage.module.css

ScrollBar.module.css

ScrollToTopButton.module.css

Toolbar.module.css

I have used ESLint to validate my JSX code. Initially, I had linting errors such as:

• An error with apostrophes, and I had to replace them with '.
• Empty block statements from where I removed my console.log()s. I fixed this by adding return statements to return the errors.
• Missing imports of React, this I fixed by importing React in the appropriate files. Here you can see that I have validated every single page of my JSX code after fixing these issues, and it returned no errors.

Eslint validation for all files

Lighthouse was used to test the performance, accessibility, best practice and SEO of the site. The validation was done for both desktop & mobile.

Home page

General Posts page

Home page

General Posts page

1. As a user I can view the home page so that I can understand the use and purpose of the blog site.

User Story Test Screenshot

2. As a user I can view the navigation bar at all times so that I have easy access to switch to any page for good user experience.

User Story Test Screenshot

3. As a previous or new user I can view the log in and sign up buttons so that I can log into an account or create an account.

User Story Test Screenshot

4. As a new or existing user I can create an account so that I can access all login required features to the website.

User Story Test Screenshot

5. As a previous user I can log into my account so that I can access all features for a logged in user.

User Story Test Screenshots

6. As a user I can remain logged in when changing pages so that I can use the app as I please until I log out.

User Story Test Screenshots

7. As a user I can post content on the website so that I can keep my following users up to date on my fitness goals, and upload images.

User Story Test Screenshots

8. As a user I can view the tags related to a post so that I can see how relevant the content is to me as a user.

User Story Test Screenshots

9. As a user I can like or unlike a post so that I can show my opinion on somebody else's content, to give feedback.

User Story Test Screenshots

10. As a user I can view any other user's specific posts so that I can see all the latest activity on their posts, and see all previous posts they have made.

User Story Test Screenshots

11. As a user I can view the date a post was uploaded on so that I can know how time relevant the post is, and if it is worth viewing.

User Story Test Screenshots

12. As a user I can view more information on a specific post so that I can see the entirety of the content related to the post they have made.

User Story Test Screenshots

13. As a user I can view posts that are associated with tags so that I can search for more specific results catered to me.

User Story Test Screenshots

13. As a user I can view posts that are associated with tags so that I can search for more specific results catered to me.

14. As a user I can comment on a post so that I can show my feedback and share my opinion.

User Story Test Screenshots

15. As a user I can see when a comment was posted so that I know if it is a new or old comment.

User Story Test Screenshots

16. As a user I can edit my comments so that I can change any of my comments and the text inside of them.

User Story Test Screenshots

17. As a user I can click the delete comment button so that I can remove any comments I have made if I choose to.

User Story Test Screenshots

18. As a user I can edit my posts so that I can change the content in my post if I choose to.

User Story Test Screenshots

19. As a user I can view the most recent posts so that I can view the newest and therefor most date relevant content on my feed.

User Story Test Screenshots

20. As a user I can infinitely scroll the website so that I can easily view all posts on the site without interruption.

User Story Test Screenshots

21. As a user I can view the posts that I have previously liked so that I can freely view the content that I like or find informative.

User Story Test Screenshots

22. As a user I can view a list of all relevant posts so that I can see content that has been uploaded by the users I follow.

User Story Test Screenshots

23. As a user I can use the search bar so that I can filter the content I want to see.

User Story Test Screenshots

24. As a user I can view posts that are associated with tags so that I can search for more specific results catered to me.

User Story Test Screenshots

25. As a user I can upload a profile picture so that I can style my profile to make me recognisable.

User Story Test Screenshots

26. As a user I can view other user's profile pictures so that I can identify the user by their image.

User Story Test Screenshots

27. As a user I can update my profile picture so that I can decide to change my picture if I choose to.

User Story Test Screenshots

28. As a user I can update my profile bio so that I can write a little about myself and personalise my own profile.

User Story Test Screenshots

29. As a user I can change my password so that I can keep my profile secure.

User Story Test Screenshots

30. As a user I can view any other user's specific posts so that I can see all the latest activity on their posts, and see all previous posts they have made.

User Story Test Screenshots

31. As a user I can view other profiles so that I can stay up to date on their following, followed and posts.

User Story Test Screenshots

32. As a user I can view a profile picture and a name so that I can check a user's profile page.

User Story Test Screenshots

33. As a user I can view the most popular profiles so that I can see who the most followed users on the site are.

User Story Test Screenshots

34. As a user I can use the follow and unfollow buttons on a user so that I can choose what content I want to see on my feed, and filter the content.

User Story Test Screenshots

35. As a site owner I want my blog app to be responsive so that my users can view the website on any device they choose with any screen size.

User Story Test Screenshots

36. As a site owner I want my blog app to be responsive so that my users can view the website on any device they choose with any screen size.

User Story Test Screenshots

I built and tested this website using Google Chrome Developer tools- which allowed me to test specific breakpoints for different screen sizes.

I tested this website using:

• Samsung Galaxy A54 (mobile)
• My Windows PC (desktop)
• Lenovo M10 (tablet)
• IPhone 11 Pro (mobile)
• IPad Mini (tablet)

Testing has been carried out on the following browsers:

• Googe Chrome
• Firefox
• Microsoft Edge
• IOS

• Bug fix: I had a bug where the navbar profile picture would show, however for an unknown reason the profile pictures that were not specified by the UseCurrentUser() method would not display when tied to the post list and detail views. To fix this, there was lots of trial and error- however I finally discovered that it was down to a very minute detail within the PostSerializer.py file within my API. profile_image = serializers.ReadOnlyField(source='owner.profile.image.id'). After understanding this issue, I had realised the final .id should have been .url- and this fixed the bug once I had committed my changes to my API and pushed them to the deployed project.

• Bug fix: I manually tested every function of my website, however cross tab errors were apparent in the form of user authentication when logged out in one tab, yet accessible in another. In order to fix this, I created a function to log out a user when they make a 401 Unauthorised request to the API. Before this fix, this bug could be replicated by logging in on two different accounts on two tabs (user is assigned two authentication cookies), then one of the tabs logs out and into another account and finally when accessing the previous browser which already had a token assigned, this gave cross tab authentication to the currently logged in user- allowing them to like their own post.

To prevent this bug, I created a function to clear cookies on log out- and if there are no cookies assigned to the browser on data response or request: log out the user. Working around this bug was challenging as it was hard to replicate.

It also must be known that I have added a custom error display only for users that are on connections that are not secure (Secure Sockets Layer disabled). SSL (Secure Sockets Layer) is a security protocol that is used to encrypt data that is transmitted over the internet. SSL works by establishing a secure connection between a web server and a client (such as a web browser), ensuring that any data that is transmitted between the two is encrypted and therefore protected from interception by unauthorized parties.

If a user tries to access the website on a non https:// URL, login functionality will not work as I have created error handling to prevent incorrect routes as no cookies can be applied to any unsecure link.

I created this error handling function to prevent a bug that presented the user with a blank white screen due to a CORS error- as the user would request data from an unencrypted link. CORS is a security mechanism that helps prevent malicious attacks and controls access to resources across different domains on the internet. It is an important tool for any developer to ensure the security and integrity of their applications and websites.

• These are bugs that I have troubleshooted and due to time constraints was unable to fix.

Known Bugs: A major bug I had experienced is the authentication tokens giving a 401 error on mobile, but not on desktop. This bug was very confusing and I had worked relentlessly at attempting to fix it with no avail. When a user attempts to log on my website using IOS, they are presented with an invalid refresh token and redirected back to the login page- which is incredibly confusing due to the full functionality on desktop devices. On desktop, login is authorised and the user is assigned a refresh token.

I had searched for a fix and due to time constraints could not replicate a full fix without ios developer tools. Due to the nature of this bug being only on IOS devices, when accessing the app from an IPhone, I could not debug the source of the issue from the console- and when viewing the logs from the deployed API to see what requests were being posted, it would result in a 401 unauthorised error. When attempting to replicate this bug on desktop, it would post a 200 OK message with the same code. Due to this, I thought it could have been a possible bug with the packages I had installed, or the token refresh logic.

In an attempt to fix this bug, initially I had discovered that localStorage() does not function correctly when working on IOS, and this allowed me to understand the root of the issue more thoroughly. Due to localStorage() not assigning the refresh token to the user on login, the catch block would hit and my user would be redirected back to the login screen, hence the infinite loop of 401 Unauthorised errors.

Firstly, I attempted to use react-device-detect to assign cookies on only IOS, due to the lack of functionality of localStorage- however this presented more bugs and did not function the way I intended it to. Moreover, after many hours of trial and error to fix this bug that only happened on IOS devices, I searched up on forums of ways around using localStorage(), giving me the idea to store the user's refresh token as a cookie on both IOS and mobile using react-cookie. Due to using this solution, the functionality worked correctly on mobile, and login functionality worked on IOS devices.

Due to the workaround I created, this meant that other bugs arose however now login functionality worked on IOS, however other functions did not. On desktop and android devices, my website is fully functional and up to standard.

I am aware of the issues that arise on IOS devices however due to the lack of localStorage() functionality it was very hard to find a workaround. Fixing this bug was very time consuming, as I could not run the changes on localhost to test for IOS functionality- meaning I had to redeploy my respository through Heroku to detect the bugs and changes for IOS.

To deploy this project, I have used Heroku. These are the steps used for deployment to Heroku:

1. Head over to heroku to create new app and click "New" on the top right, select create new app.

Step 1

2. You should be displayed with a page named "Create New App", enter your chosen app name and region closest to you here.

Step 2

3. Once created, go to the new page for your heroku project, and click on the "Deploy" tab- then click on GitHub in the "Deployment Method" section. Once clicked, type in your GitHub repository name and click "Connect".

Step 3

4. You can then click on the black button named "Deploy Branch". This will build and deploy your project using heroku.

Step 4

Make sure you have a Procfile with this line of code in it web: serve -s build to configure your dynos.

5. An "Open App" button will apear on the top right, click it to open your newly deployed project.

Step 5

Your repository is now deployed to heroku!

To store static files within this app, I used Cloudinary as a media library to allow me to get and post images. In order to use Cloudinary, first:

1. Create a Cloudinary account by linking your GitHub Profile.
2. Navigate to "Dashboard" on the left

Step

3. Use this API Environment variable to serve the static files within the settings.py file in your chosen API repository.

4. Add these lines of code to your settings.py file: CLOUDINARY_STORAGE = {'CLOUDINARY_URL': os.environ.get('CLOUDINARY_URL')} MEDIA_URL = '/media/' DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'

5. Make sure that you create and env.py file to store your hidden environment variables, and define the CLOUDINARY_URL here: os.environ['CLOUDINARY_URL'] = 'cloudinary://yourcloudinaryurlhere...'

6. Make sure all related cloudinary packages are installed in your API requirements.txt (can be found here)

In order to host my backend database, I had to use ElephantSQL to allow me to manage administrative tasks of PostgreSQL. Here is a brilliant guide to get you setup.

• Once you have setup your ElephantSQL database, you must go into your backend env.py file, and set os.environ.setdefault("DATABASE_URL", "postgres://yourelephantsqlurlhere...") to your given URL.

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/bodthegod/thebod-app

7. Press Enter. Your local clone will be created.

$ git clone https://github.com/bodthegod/thebod-app
> Cloning into `thebod-app-clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

• Icon upload image from here
• No results found search image (edited) here
• Login/Signup for images (edited) here
• The images that have been posted as placeholder example posts are not my images. Since these are example images they were used for testing, and I found these from google. As this project is a non-profit, education application and there are alot of images, I could not find credits for all- however never use an image without credit or permission if you are creating a profit based project.

• Icon shake animations (edited) here
• Box shadow inspirations here
• Home page blog background here
• CSS Animations inspiration here
• Inspiration of bounce animations here
• 404 Page not found image here

This project was inspired by the 'Moments' social media website which was my final walk-through project with Code Institute. I have created my own styles, animations and functionalities, as to which a user can search my tags that are assigned to any created post by a user. This website could be built apon further as seen in the 'improvements' section.

Building this project was fun, interesting and an enjoyable learning experience throughout the entire process. I cannot wait to build more- my major thanks go out to:

• Mo, my mentor throughout this project who gave me brilliant guidance, insights, support and encouragement throughout every step of this project.