- Testing Stories for UX
- Validator Testing
- Browser Testing
- Device Testing
- Manual Testing
- Automated Testing
- Bugs
Please note: To open any external links in a new browser tab, please press CTRL + Click
As a User, I can access a navigation bar on every page so that I can easily view desired content
- The navigation bar in the app is an essential tool that is available on all pages. It provides easy access to the main sections of the app, making it simple for users to navigate and find what they need. For users who are not logged in, the navigation bar has been kept minimalistic and straightforward, with no home tab as the logo serves as a way to return to the homepage. This design ensures that the user interface remains clean and uncluttered, allowing users to focus on the important aspects of the app without unnecessary distractions.
Logged out Navigation
Logged in Navigation
- Extensive testing has been carried out to ensure that the app is optimized for mobile devices, providing a seamless and user-friendly experience to users accessing the app from their smartphones or tablets.
As a User, I can log into my account so that I can access functionality for logged-in users
As a User, I can safely log out of my account so that I can disconnect from the site
- A pop-up modal has been implemented to confirm sign-out, providing an extra layer of protection for the user's account and preventing accidental logouts. The modal displays a message asking the user if they really want to sign out, with options to confirm or cancel.
As a logged-in User, I can see my login status so that I know if I am logged in or out of my account
- When a user is logged in, the navigation status is easily recognizable as the side navigation bar is present, and the top navigation bar displays the user's avatar along with the label Profile.
As a logged-in User, I can change my password so that I can keep my account secure
- Users can change their password by accessing the personal profile dropdown menu from their profile page. The password change functionality includes validation checks to ensure that the new password meets the required criteria, contributing to a more secure experience for users.
As a user, I can view posts, without having to sign-up to enjoy the site's content
- Users can view posts without having to sign up, but certain member benefits such as liking, bookmarking, and commenting are only available to authenticated users. To prompt users to sign in, tooltips appear when hovering over these icons, encouraging them to log in to take advantage of the full range of features.
As a logged-in User, I can create posts so that I can add content to the site
- The Add Post tab allows users to easily create a post by selecting an image, title, and content. Once submitted, users are presented with a success notification to confirm that their post has been successfully created. This streamlined process encourages users to engage with the app and contribute their own content, ultimately enhancing the overall user experience.
As a logged-in User, I can edit my post so that I can fix or update my existing content
- The app allows users to edit their posts easily by using the post dropdown menu, which includes an edit and delete icon. Clicking the edit icon will take the user to the edit post page with the prepopulated data, allowing for quick and convenient editing.
- Users can easily remove their posts by clicking on the delete icon present in the post dropdown menu. Upon deletion, users will receive a notification confirming the action.
- The app provides a feature for logged-in users to like posts, which can be done by clicking the heart icon on a post or post detail page. To enhance user experience, tooltips with the text "Click to like post" have been added for intuitiveness. However, the feature also includes measures to prevent the owner of a post from liking their own post. When a user likes a post, they will receive a success notification, and the post will be added to their "Liked" list, which can be viewed by clicking the "Liked" tab in the side navigation bar. Users can also unlike a post by clicking the solid heart icon, which will trigger a notification informing them of their action.
- The app has been designed to prioritize the newest posts by displaying them at the top of the feed, ensuring that users are presented with the most recent content first.
As a User, I can view comments on posts so that I can read other user's feedback
- While anyone can view comments on posts, only authenticated users can write comments. The comment input box is not visible to users who are not logged in, but they can still read existing comments.
- To enable users to manage their own comments, the app uses the
PostDropdownBarcomponent which allows authenticated users to edit and delete their comments easily.
- In the backend repository, I have imported naturaltime to display a more user-friendly timestamp indicating when a comment has been added.
As a User, I can view other user's profiles so that I can see their bio and learn more about them
- All users can view profile pages. If a user has not filled out any fields, a cross icon will be displayed instead.
- A user's avatar can be customized from the
ProfileDropdownBar.jsand selecting Edit Profile.
- A user profile can be edited from the
ProfileDropdownBar.jsand selecting Edit Profile.
- The follow functionality implemented in the app was inspired by Code Institute's 'Moments' walkthrough.
As a logged-in User, I can save a post to a personal list so that I can easily return to it later
- Users can bookmark posts by clicking on the bookmark icon, but owners of the post are not able to bookmark their own posts.
- The search functionality of the app enables users to look up posts and profiles. While currently limited to these options, it is planned to include group search functionality in the future. A loading spinner image of the earth is displayed until the posts are loaded.
- React infinite scroll has been implemented to improve the user experience of navigating through the app. Instead of having to load a new page for more posts, users can simply scroll down to view more content. This not only saves time but also makes the app feel more seamless and intuitive.
As a User, I can contact the site owner so that I can request any information that I might need
- A contact page has been implemented to allow authenticated users to send messages to the backend. Users can provide feedback, report issues, or make inquiries about the app's features and functionalities. A notification is displayed to the user when they successfully send a message with valid data.
As a Site owner, I can add a favicon so that the site looks more distinguishable
- A favicon featuring an earth image has been added to the app to enhance its visual appeal and provide a cohesive theme with the rest of the design. This small but noticeable detail helps improve the user experience by adding a touch of professionalism and aesthetics.
- The process of creating a group is simple and intuitive. Users can access the 'Groups' tab in the side navigation bar and click on the 'Create Group' button to initiate the process.
- A group owner can delete their group by navigating to the group list page and clicking on the 'Delete group' button. If a user is not the owner of the group, the 'View group' option will be displayed instead. While the option to edit a group is not currently available, it could be implemented in the future using the PostDropdownBar component for consistency with other features.
- Group members are displayed with their avatars using the Avatar.js component. While the implementation is not ideal, as the original plan was to use the Profile component, the Avatar component allows for easy display of members. Future improvements include adding the ability for users to click on a member's avatar to be taken to their profile page and adding the ability to follow/unfollow members directly from the group detail page.
| Page | Status | URL |
|---|---|---|
index.html |
pass | result |
The W3C HTML validator was used to test the one HTML file and no errors were reported in the final deployment.
The W3C CSS Validator was used to validate the project, the results are shown below with no errors reported.
JSHint was used to check the JavaScript within the application, the results are shown below with all pages passing and no errors reported.
| Folder | Page | Status |
|---|---|---|
| Components | ||
Asset.js |
pass | |
Avatar.js |
pass | |
NavigationBar.js |
pass | |
PostDropdownBar.js |
pass | |
ProfileDropdownBar.js |
pass | |
SideNavigationBar.js |
pass | |
| Contexts | ||
CurrentUserContext.js |
pass | |
ProfileDataContext.js |
pass | |
| Hooks | ||
UseRedirect.js |
pass | |
useOutsideClickToggle.js |
pass | |
| Pages | ||
| auth | SignInForm.js |
pass |
SignUpForm.js |
pass | |
| comments | Comment.js |
pass |
CommentCreateForm.js |
pass | |
CommentEditForm.js |
pass | |
| contact | ContactCreateForm.js |
pass |
| groups | Group.js |
pass |
GroupCreateForm.js |
pass | |
GroupDetail.js |
pass | |
GroupList.js |
pass | |
| posts | Post.js |
pass |
PostCreateForm.js |
pass | |
PostEditForm.js |
pass | |
PostPage.js |
pass | |
PostsPage.js |
pass | |
| profiles | PasswordEditForm.js |
pass |
PopularProfiles.js |
pass | |
Profile.js |
pass | |
ProfileEditForm.js |
pass | |
ProfilePage.js |
pass | |
UsernameEditForm.js |
pass | |
| Utils | ||
Utils.js |
pass | |
| src | ||
App.js |
pass | |
index.js |
pass |
I have run the website through Google Chrome's Lighthouse audit application and the results are shown below. Mobile testing has been performed too and reported similar results to the desktop but with a lower performance score. With more time I would change the contrast slightly on some of the text throughout the site so that it boosts the accessibility score higher.
| Page | Desktop |
|---|---|
| Home page |  |
SignInForm.js |
 |
SignUpForm.js |
 |
PostsPage.js |
 |
PostCreateForm.js |
 |
PostEditForm.js |
 |
GroupList.js |
 |
GroupCreateForm.js |
 |
GroupDetail.js |
 |
ContactCreateForm.js |
 |
ProfilePage.js |
 |
The Website was tested on Google Chrome, Internet Explorer and Microsoft Edge with no issues reported. Family members and friends were asked to review the site and point out any bugs or problems if encountered.
The website has been viewed on a variety of devices such as Desktop, Laptop, iPad, Oneplus 5t & Samsung Galaxy S21 to ensure that the responsive design worked as intended. Chrome DevTools was used to test the responsiveness on different devices.
The site has been tested through Google's Mobile friendly test with all pages passing.
The process and outcomes of manual testing are described in depth in the following section:
| Page/Status | Element | Action | Expected Result | Pass/Fail |
|---|---|---|---|---|
| Homepage | Navbar | |||
| Information icon | hover | Display 'Information' | pass | |
| click | Open information pop up modal | pass | ||
| WHERE NEXT Logo | click | Redirect to homepage | pass | |
| logged out | Sign-in link | click | Open SignInForm.js page |
pass |
| Sign-up link | click | Open SignUpForm.js page |
pass | |
| logged in | Avatar with Profile | display | Display the current users Avatar | pass |
| hover | 'Profile' text changes colour | pass | ||
| click | Go to current users profile page | pass | ||
| Home link | click | Redirect to homepage | pass | |
| Feed link | click | Display Feed page of posts from followed users | pass | |
| Add Post link | click | Open PostCreateForm.js page |
pass | |
| Bookmarks link | click | Display a page of posts which has been bookmarked by the current user | pass | |
| Groups link | click | Open GroupList.js |
pass | |
| Liked link | click | *Display a page of liked posts from the current user | pass | |
| Contact link | click | Open ContactCreateForm.js |
pass | |
| Sign Out link | click | Open sign out confirmation modal | pass | |
| All nav headings | hover | Display black text & lighter icon colour | pass |
| Page/Status | Element | Action | Expected Result | Pass/Fail |
|---|---|---|---|---|
| Homepage | Search bar | hover | Search icon changes colour | pass |
| type keyword | Loading spinner displayed until results | pass | ||
| no-results | Display no results image with text | pass | ||
| logged-out | Post Component | |||
| Post header | display | Post owner avatar & 'profile' text | pass | |
| display | Post date | pass | ||
| Avatar | click | Profile page of the post owner | pass | |
| hover | text changes colour on 'profile' text | pass | ||
| Main post image | hover | pointer cursor | pass | |
| click | Redirct to post detail page | pass | ||
| Heart Icon | hover | Display 'Log in to like posts' text | pass | |
| Comment Icon | hover | Display 'View Comments' text | pass | |
| click | Redirect to post detail page | pass | ||
| Groups Icon | hover | Display 'Log in to create and join groups` text | pass | |
| Bookmark Icon | hover | Display 'Please login to bookmark posts' | pass | |
| Post Detail page | Comments section | |||
| display | Avatar | pass | ||
| click | Redirct to comment owners profile | pass | ||
| display | Comment date | pass | ||
| no comments | Display no comments message | pass | ||
| logged-in | Post Component | |||
| Heart Icon | hover | If the currently logged-in user is the owner of the post display 'Sorry, you can't like your own posts' text | pass | |
| hover | Display 'Click to like post' text if the logged in user is not the owner of the post | pass | ||
| click | Post saved to 'Liked' list | pass | ||
| Success notification - 'Post liked' | pass | |||
| Solid heart Icon | click | Post removed from 'Liked' list | pass | |
| Notification - 'Post Unliked' | pass | |||
| Groups Icon | hover | Display 'Add a group from the groups tab' text | pass | |
| Bookmark Icon | hover | If the currently logged-in user is the owner of the post display 'You can't bookmark your own post' text | pass | |
| hover | Display 'Click to save post' text if the logged in user is not the owner of the post | pass | ||
| click | Post saved to 'Bookmarks' list | pass | ||
| Success notification - 'Post saved' | pass | |||
| Solid bookmark Icon | click | Post removed from 'Bookmarks' list | pass | |
| Notification - 'Post removed' | pass | |||
| post-owner | Edit/Delete menu | display | If the user is the owner of the post display edit/delete menu | pass |
| hover | Pointer cursor | pass | ||
| Edit icon | hover | Add background colour | pass | |
| click | Redirect to post edit page | pass | ||
| Delete icon | hover | Add background colour | pass | |
| click | Post removed from database | pass | ||
| Notification - 'Post removed' | pass |
| Page/Status | Element | Action | Expected Result | Pass/Fail |
|---|---|---|---|---|
| Add Post page | ||||
| Add image | click | Opens your computer to select an image | pass | |
| Image selected | display | Selected image with a button to change image | pass | |
| Change image button | hover | Change colour | pass | |
| click | Opens your computer to select a new image | pass | ||
| Title | check | Title must be under 200 characters | pass | |
| Field must not be empty | pass | |||
| Cancel button | hover | Change colour | pass | |
| click | Redirect to homepage | pass | ||
| Create button | hover | Change colour | pass | |
| click | With valid data - direct to new post page | pass | ||
| All fields required else error notification & specified error on input field | pass | |||
| Success notifcation of a newly created post | pass | |||
| Edit Post page | Image | display | Prepopulated image with 'Change Image' button | pass |
| Change image button | hover | Change colour | pass | |
| click | Opens your computer to select a new image | pass | ||
| Image selected | display | New image is displayed to upload | pass | |
| Title/Content | display | Prepopulated data | pass | |
| Cancel button | hover | Change colour | pass | |
| click | Redirect to post detail page | pass | ||
| Update button | hover | Change colour | pass | |
| click | With valid data - direct to updated post page | pass | ||
| Notification of updated post | pass | |||
| empty field | Error notification & specified error on input field | pass |
| Page/Status | Element | Action | Expected Result | Pass/Fail |
|---|---|---|---|---|
| Sign up page | Username input box | click | Clicking the username input box allows the user to input alphanumeric characters | pass |
| Password input box | click | Clicking the password input box allows the user to input alphanumeric characters | pass | |
| Confirm password input box | display | Clicking the confirm password input box allows the user to input alphanumeric characters | pass | |
| Sign up button | hover | Change colour | pass | |
| click | If valid data - signup user and redirect to sign-in page | pass | ||
| username-taken | Display error message | pass | ||
| username field blank | Display error message | pass | ||
| password field blank | Display error message | pass | ||
| Success notification | pass | |||
| Sign-in link | hover | Change colour | pass | |
| click | Redirect to sign-in page | pass | ||
| Sign in page | Username input box | click | Clicking the username input box allows the user to input alphanumeric characters | pass |
| Password input box | click | Clicking the password input box allows the user to input alphanumeric characters | pass | |
| Sign in button | hover | Change colour | pass | |
| click | If valid data - signin user and redirect to the home page | pass | ||
| username field blank | Display error notification & message | pass | ||
| password field blank | Display error notifcation & message | pass | ||
| Sign-up link | hover | Change colour | pass | |
| click | Redirect to sign-up page | pass | ||
| Sign out tab/modal | click | Open sign out confirmation modal | pass | |
| Modal | click outside box | Close modal | pass | |
| click modal close button | Close modal | pass | ||
| Cancel button | hover | Change colour | pass | |
| click | Return to homepage | pass | ||
| Sign out button | hover | Change colour | pass | |
| click | Log user out & return to homepage | pass | ||
| Notification of successful logout | pass |
| Page/Status | Element | Action | Expected Result | Pass/Fail |
|---|---|---|---|---|
| GroupList.js | ||||
| Create group button | display | Create group button | pass | |
| hover | Light background/Dark text | pass | ||
| click | Redirect to GroupCreateForm.js |
pass | ||
| Groups | display | A list of user created groups | pass | |
| display | If the user is the owner of the group, display 'Delete group' button | pass | ||
| display | If the user is not the owner of the group, display 'View group' button | pass | ||
| Group title | hover | Darker text | pass | |
| click | Redirect to GroupDetail.js |
pass | ||
| View group button | hover | Light background/Dark text | pass | |
| click | Redirct to GroupDetail.js |
pass | ||
| Delete group button | hover | Light background/Dark text | pass | |
| click | Remove group from the database | pass | ||
| Notification of removing group | pass | |||
| GroupCreateForm.js | Group Name input field | click | Clicking the group name input box allows the user to input alphanumeric characters | pass |
| Description input box | click | Clicking the description input box allows the user to input alphanumeric characters | pass | |
| Cancel button | hover | Light background/Dark text | pass | |
| click | Redirect to GroupList.js |
pass | ||
| Create button | hover | Light background/Dark text | pass | |
| click | Empty field - Display error notification & specified error on input field | pass | ||
If valid title, form will submit & redirect user to new GroupDetail.js page |
pass | |||
| Success notification | pass | |||
| GroupDetail.js | display | Group title, description and members of the group | pass | |
| Members field | display | Avatar for a member of the group | pass | |
| display | If no members, display no members text | pass | ||
| Join group button | hover | Light background/ Dark text | pass | |
| click | User joins group/ added as a member to the database | pass | ||
| Success notification | pass | |||
| User avatar updates in members section | Fail/ pass on page refresh | |||
| Leave group button | hover | Light background/ Dark text | pass | |
| click | User removed from group/database | pass | ||
| Notification of left group | pass | |||
| User avatar removed from members section | Fail/ pass on page refresh |
| Page/Status | Element | Action | Expected Result | Pass/Fail |
|---|---|---|---|---|
| ContactCreateForm.js | 'Add an Enquiry' input field | click | Clicking the input box allows the user to input alphanumeric characters | pass |
| 'Message' input field | click | Clicking the input box allows the user to input alphanumeric characters | pass | |
| Cancel button | hover | White background/Dark text | pass | |
| click | Redirect to Homepage | pass | ||
| Send button | hover | White background/Dark text | pass | |
| click | Empty field - Display error notification & specified error on input field | pass | ||
| If valid enquiry & message, form will submit & redirect user to homepage | pass | |||
| Notification of message recieved | pass |
| Page/Status | Element | Action | Expected Result | Pass/Fail |
|---|---|---|---|---|
| ProfilePage.js | User Avatar | display | A users profile image | pass |
| Profile settings tab | display | Only if the user is the owner of the profile | pass | |
| hover | *Display 'settings' | pass | ||
| logged-out | Posts Count | display | Display a users total posts count | pass |
| Followers Count | display | Display a users total followers count | pass | |
| Following Count | display | Display a users total following count | pass | |
| Personal Information | display | Display Name, Date of birth, Location, Favourite Location & Bio fields | pass | |
| display | If nothing selected, display icon | pass | ||
| Users posts | display | Users posts using the Post component | pass | |
| display | If a user has not uploaded any images display No results found text & image | pass | ||
| logged-in | Posts Count | display | Display a users total posts count | pass |
| When a user adds a new post, the users posts count increments by one | pass | |||
| Followers Count | display | Display a users total followers count | pass | |
| Following Count | display | Display a users total following count | pass | |
| When a user follows a user from the most followed component the following count increments by one | pass | |||
| Follow Button | display | If the user is not the owner of the profile, display a follow button | pass | |
| hover | *White background/ Dark text | pass | ||
| click | User is followed & the users followers count increments by 1 | pass | ||
| Database is updated | pass | |||
| Success notification | pass | |||
| Button changes to unfollow | pass | |||
| Unfollow Button | display | If the user is not the owner of the profile, display a follow button | pass | |
| hover | *White background/ Dark text | pass | ||
| click | User is unfollowed & the users followers count decrements by 1 | pass | ||
| Database is updated | pass | |||
| Notification | pass | |||
| Button changes to follow | pass | |||
| Personal Information | display | Display Name, Date of birth, Location, Favourite Location & Bio fields | pass | |
| display | If nothing selected, display icon | pass | ||
| Users posts | display | Users posts using the Post component | pass | |
| display | If a user has not uploaded any images display No results found text & image | pass | ||
| Profile settings tab | click | Profile dropdown menu opens | pass | |
| Edit profile tab | hover | Dark background | pass | |
| click | Open edit profile page | pass | ||
| Change password tab | hover | Dark background | pass | |
| click | Open change password page | pass | ||
| Change username tab | hover | Dark background | pass | |
| click | Open change username tab | pass | ||
| EditProfilePage.js | Name input field | click | Clicking the input box allows the user to input alphanumeric characters | pass |
| Location dropdown field | click | Open dropdown list of countries | pass | |
| A user is able to select a country | pass | |||
| Favourite Location input field | click | Clicking the input box allows the user to input alphanumeric characters | pass | |
| Date of birth field | click | Open React datepicker component | pass | |
| A user can select a date upon clicking a date and it will minimize with the date selected | pass | |||
| Bio input field | click | Clicking the input box allows the user to input alphanumeric characters | pass | |
| Image input field | display | If the user has already selected an image, prepopulate with the previous image selected | pass | |
| display* | Button to select an image from your computer | pass | ||
| Image select button | click | Open computer to select image | pass | |
| display | When a user selects an image, it is displayed | pass | ||
| Cancel button | hover | White background/ Dark text | pass | |
| click | Redirect to profile page | pass | ||
| Save button | hover | White background/ Dark text | pass | |
| click | With valid data, the profile is updated | pass | ||
| Success notification | pass | |||
| Change Username page | Change username field | click | Clicking the input box allows the user to input alphanumeric characters | pass |
| Cancel button | hover | White background/ Dark text | pass | |
| click | Redirct to profile page | pass | ||
| Save button | hover | White background/ Dark text | pass | |
| click | If correct inputted data, update username and return to profile page | pass | ||
| Success notification | pass | |||
| If the same username exists display error at input field and error notification | pass | |||
| If the field is left empty display error notification | pass |
Unfortunately, due to time constraints, automated testing could not be implemented for this project. However, it will be addressed and added as a future update.
Issues were created on GitHub and noted with a bug label. To view the group of bugs on GitHub, please click here
resolved - 01e48b6 missing name field within <Form.Control
name="username"
resolved - 70f350a
resolved - 8376d42
resolved - eeabc7b
resolved - 5abde3d
resolved - 73770b9
resolved - 8a3c508
resolved - 8415f53
resolved - 5d46312
resolved - b8a7672