Developer: Aleksander Kisielewicz

View live website here 💻

Travel Shutter Website was created as Portfolio Project #5 (Advanced front-end/React) for Diploma in Full Stack Software Development at Code Institute. The back-end for this application is provided by the DRF TravelShutter API, which is a part of this project and can be found in separate repository, links below:

• Back-end repository: https://github.com/alexkisielewicz/drf-travelshutter
• Back-end deployment: https://drf-travelshutter.herokuapp.com/

Project purpose:

"In this project, you will design and build a content-sharing web application with React and an API (Django Rest Framework) Back-End. This will allow your users to browse and comment/ like each other's content as well as add, edit and delete their own. The users will also be able to follow one another.

The data is presented in a way that makes it easy for users to find what they're looking for."

Application offers such functionalities as:

• User registration - Users can register in the app filling in the form with username and password
• Sign in/out - Users can conveniently sign in and out of their account
• User Profile - Users can change profile details, username and the password and view own posts in the profile
• Post management - Users can add, update, and delete their posts with ease (CRUD)
• Commenting - Users can leave comments on posts, update or delete them
• Liking - Users can add likes to posts to show their appreciation
• Following - User can follow other users and display filtered content created by followed authors
• Filtering content - Users can apply filters to display categorized posts
• Search option - Users can search posts by title, author, category
• Messages/feedback - Users receive feedback and confirmation to their actions in the app.

• Project
  • Strategy/Scope
  • Agile Methodology for project planning
  • User stories
  • Wireframes
• User Experience (UX/UI)
  • Colour Scheme
  • Typography
• Logic and features
  • Database model and database structure
  • Features
    • Navbar and menu
    • Footer
    • Homepage
    • Side menu
    • Categories panel
    • Profiles to follow
    • Trending posts
    • Sign up/sign in
    • Search bar and categories filter
    • Post page
    • Add/edit post
    • Profile page
    • Feedback messages
    • Loading spinners
    • Not found/404 page
    • Form validation
• React architecture and components
• Technology
  • Languages used
  • Software/frameworks/libraries
• Testing
  • Manual testing
  • Bugs/known issues
    • Resolved
    • Unresolved
• Deployment
  • Github and Gitpod
  • Heroku
• Possible future development
• Credits
  • Code
  • Media
  • Acknowledgements

I opted to develop a web application with real-life usability. My primary objective was always to deliver an exceptional user experience. Hence, I decided to create a web app that is both practical and visually appealing. "Travel Shutter" is a user-friendly website where users can share their travel moments through captivating posts comprising images and text.

The application aims to provide a sleek and intuitive user interface, ensuring easy accessibility and seamless navigation across all features. Moreover, it is designed to be responsive, adapting to various screen sizes and devices.

The website caters to a diverse audience passionate about travel, photography, and sharing their stories through captivating visuals.

To achieve the strategy goals I implemented following features:

• a clean and intuitive user interface for ease of navigation and readability,
• user authentication,
• a menu that provides easy access to all website sections, including personalized content for logged in users,
• cloud hosting of images for optimized website speed and user experience,
• CRUD functionality for posts and comments,
• feedback messages to users for all important actions taken on the website,
• deletion confirmation for posts and comments as a form of defensive programming,
• responsiveness across various platrofms and devices.

During the development of my website, I used the agile methodology. With a focus on delivering essential functionalities, I employed a prioritization system categorizing features as "must-have" or "could-have." This allowed me to allocate resources effectively and plan for future developments.

To guide my development process, I created user stories and added them to the kanban board divided into following sections: "to do", "in progress" "done", "future enhancements" and "bugs" that allowed to visualize all tasks and prioritize next steps. I utilized milestones to group basic functionalities into groups and keep track of them completion. By using agile methodology, I was able to stay organized and focused on delivering the most important features, while also allowing flexibility for future development. This experience gave me valuable insight and lessons that I can apply to future projects.

Project @GitHub

Wireframes - PDF File

The colour palette was selected using the coolors.co generator from a collection of trending colour sets. In my opinion, the chosen colours should work well with the website, which is about holidays, traveling, and photography.

• #8ECAE6 - soft blue, used for background, icons
• #219EBC - strong cyan, used for buttons, tags, spinner
• #023047 - dark navy as colour of body font
• #FFB703 - vivid orange, used for buttons, accent elements
• #FB8500 - pure orange, used for links, accent elements

The Merriweather font is the main font used throughout the whole website with Sans Serif as the fallback. Merriweather is a clean, modern looking and well known font. It is sourced from Google fonts and it's linked to css document via @import method.

The Playfair Display S font was chosen for posts headings. It is a serif typeface known for its elegant and sophisticated appearance. The "S" in Playfair Display S stands for "Small Caps," indicating that it includes small capital letters as an alternative to the regular uppercase letters. This font is often favored for projects that require a classic and timeless look, such as editorial designs, branding, and luxury products.

Example header and paragraph:

Project uses cloud-based PostgreSQL database provided by ElephantSQL as a service. More information can be found in back-end application repository here

The navbar in the app is implemented using Bootstrap. It provides a user-friendly and intuitive navigation experience. Navbar and Footer are the only common elements for all the pages, it is visible in the viewport at all times. The navbar consists of a logo on the left side, and navigation links on the right side. It is designed to be responsive and collapsible on mobile devices, ensuring a seamless user experience across different screen sizes.

Not authenticated users can see sign in and sign up links:

For logged-in users, the navbar displays the profile avatar and username, allowing users to quickly identify their account. Both avatar and username are clickable links that take users to their profiles from where they can browse own posts or change profile details including credentials.

Mobile navbar and menu:

The footer is located at the bottom of the page, it has fixed position and includes social media links and copyright information. It provides users with access to the app's social media profiles, allowing them to connect and engage with the content through various social platforms.

On the home page users will find a layout with two columns for bigger devices that becomes one column on mobile devices.

The left column contains a list of all the posts, and it uses infinite scroll feature for seamless user experience without the need for pagination. At the top of the posts section, there is a dropdown menu containing categories filters, enabling users to filter the displayed posts based on specific categories. Next to that menu, there is a search bar that allows users to search for posts. Clicking on a post will redirect the user to a dedicated page displaying the detailed view of that specific post. Categories menu and search bar are available on mobile devices above list of all posts.

The right column contains a panel with menu specifically designed for logged-in users. This panel includes links to various sections. Users can find links to add a new post, access their personalized user feed, and view their liked posts. The user feed displays a list of posts from the users they follow, ensuring they stay up to date with the content that interests them. The liked posts section gives users a way to revisit the posts they have previously liked. This menu panel on mobile devices is placed above list all posts and takes full width of a screen.

There are also three separate panels displayed in this section. The first panel showcases button with categories, user can click on a selected caategory and will be redirected to the list of posts filtered by selected category. Second panel displays profiles to follow, suggesting users to connect with and explore their posts. The third panel highlights trending posts in the list ordered by criterium of likes count. It allowing users to discover popular and engaging content.

I have decided to include the "Profiles to Follow" panel in the mobile view. It is positioned below the menu component and above the categories filters and search bar. However, only four profiles are displayed in the mobile view, compared to the ten profiles shown in the desktop view. The categories panel and trending posts are not available in the mobile view due to design constraints. The functionality of the categories panel is already accessible through the categories dropdown menu. Placing the trending posts in the single-column view would occupy too much space, which could compromise the user experience before reaching the main feature and purpose of the app, which is the list of posts with images that user share.

The "Profiles to Follow" component displays a list of 10 profiles, ordered based on the number of followers. Each profile includes a follow/unfollow link, allowing users to easily choose to follow or unfollow a particular profile. This component helps users discover and connect with other users of the app.

The "Trending Posts" panel showcases the top five most liked posts. These posts are ordered based on the number of likes they have received. Each post is displayed as a link, allowing users to easily access and explore the popular content.

The sign-up page provides users with a straightforward process to create a new account. The page layout includes cover photo and registration form, which allows users to input their username, password, and password confirmation. The form ensures that the user chooses a unique username and provides a secure password. The password confirmation field serves as an additional step to prevent any typing errors while entering the password. Upon clickin on "Sign Up" button profile is created and user is redirected to sign in page. Additionally, for users who already have an account and need to sign in, there is provided link to sign in page.

The sign-in page allows users with existing accounts to access their personalized content and features. On the page users will find a cover photo, similar in style to the sign-up page and login form, which prompts users to enter their username and password. Click on the "Sign In" button validates credentials and authenticates user to acces the page. For users who don't have an account, there is provided a link to the sign-up.

Above the posts list there are categories filter and search bar. Categories filter is placed in dropdown menu and contains a list of options with all available post categories. User can select any category and will be redirected to the page with posts filtered view. Currently selected category is displayed in the dropdown button, user can remove filter by selecting "Display all" option.

Next to the categories dropdown menu there is a search bar where user can type a keyword and backend application filters are applied. User can search posts by entering post title, user name or post category. A small delay is applied before api request is sent. That prevents requests being sent after each keystroke and in result an excessive use of backend application.

The post detailed view is placed in Bootstrap card component and provides users with all the details about specific post. At the center of the card, there is post image associated with the post. Sharing photos is one of the main purposes of this app, however placeholder image is provided by backend application if user decide not to upload own image.

In the top left corner of the card, there is the post author's avatar and username. On the right users can find the post update timestamp. Below the image, there is a heading that displays the post title. A paragraph below the heading presents the post content, allowing users to read the story or image description provided by the author.

Underneath the post content, the post details section provides more information and includes post category, tags and image exif data. This data provides technical details about the image, such as the camera model, lens, aperture, exposure time, etc. Users who are interested in the technical aspects of photography would appreciate such description.

Bottom section presents icons that represent the likes and comments on the post. These icons are accompanied by the respective counts, indicating the number of likes and comments. Authenticated user can click on a heart to add or remove like. Liking own posts is not allowed, also not-authenticated users are not allowed to interact with likes. In both cases there is an information provided in bootstrap tooltip component.

Authenticated user who is an author of the post can see dropdown menu that allows to edit or delete post.

Modal with confirmation is diplayed before post is deleted to ensure that operation is intended.

Below the post there is a comments section with list of all post comments. It utilizes infinite scroll for seamless user experience without need for pagination. Comment form allows authenticated users to write and add a comment. Each comment is placed in a paragraph containing authors avatar, username and creation time in a user friendly format.

Authenticated user who is an author of a comment can also edit or delete own comment. Deletion confirmation is provided in bootstrap modal component as a form of defensive programming to ensure that comment is not deleted by mistake.

Comment form (and comment edit form) includes helpful characters counter that indicates how many characters left to write in the input field until maximum length of the comment is reached. In case than comment exceeds allowed maximum length of 300 characters, there is message "Comment too long!" displayed and submit button is disabled.

The "Add Post" includes a form that allow users to upload an image and write other details for their post. The image upload is validated to ensure it meets the specified requirements, including a maximum size of 2MB and dimensions of up to 2500px in height and width. Placeholder image is provided by backend if user do not upload own image.

The form includes also following fields; title, category, tags, exif and content. All fields are validated to match specific regular expressions. The tags can be entered as a comma-separated list of words. The backend automatically handles the addition or removal of commas and eliminates duplicate tags. Handy tooltip is available next to the exif input label to provide more information to the user about field purpose.

An authenticated user who is the author of a post has the ability to edit their own post. A similar form is provided, where the existing post image is visible. The user can choose to either change the image or upload a new one. All text fields can be updated, and they are validated using regular expressions. In case of any errors, they are displayed below each input field, providing the user with feedback regarding allowed characters, length restrictions, and file size requirements.

The user profile page features the user's avatar, username, and statistics that includes the number of created posts, count of followers, and following users. In the center there is a section for the user's bio information. Below there are further details such as instagram handle with link to instagram and user's equipment. In the top right corner, there is a follow/unfollow button for interacting with the user's profile. Below the profile container, there is a list of all posts created by the user, it utilizes infinite scroll for seamless experience.

Authenticated users can see dropdown menu in their profiles that allows them to edit profil information and change credentials.

Edit profile form allows user to change existing image and all other text fields. The form is validated and each input is chacked againts regular expression. Errors, if occurs, are displayed below each input giving user feedback information about allowed characters, length, file size, etc.

Feedback messages are displayed in a toast notification that automatically disappears after short time or can be manually dismissed. These messages are shown on various occasions such as logging in or out, creating an account, adding or editing posts, adding or editing comments, and updating profile changes. They provide relevant information to the user about the status or outcome of their actions in a non-obstructive manner.

Loading spinners have been used as visual feedback to the user whenever data is not ready to be displayed in the UI, e.g. app is waiting for backend API response.

The error page is displayed when a user tries to access a page that does not exist. It features a cover image and provides a link that allows the user to return to the home page without relying on the browser's back button.

There is comprehensive form input validation implemented throughout the application to ensure that inputs are entered correctly and meet the intended criteria. This validation process helps prevent errors and ensures the integrity of the data being submitted. It includes checks for required fields, data formats, length restrictions, and other relevant constraints.

One of the main learning outcomes of this project was to use React JavaScript library and its architecture that utilizes reusable components. React is most popular JavaScript library and promotes code reusability, making it easier to maintain and modularize code.

Application UI is broken down into smaller, reusable components. This modular approach enhances code organization, readability, and reusability. With this in mind developer can maintain a uniform look and feel throughout the application. Updates made to a component are applied universally across UI and take effect on parts of the UI when changes occur, leading to faster rendering and an better user experience over all.

Using contexts, hooks, and properties passing between components enables them to collaborate and share information, ensuring that when changes occur, they update accordingly. The application uses a modular system of CSS stylesheets, with one main stylesheet for the entire application, while each component has its own separate stylesheet.

In my application I also aimed to implement reusable components to avoid repetition in the code, unify UI and optimize app performance. List below describes used components:

• Asset: A component used for displaying various assets, such as images or messages.

• Avatar: A component that represents a user's avatar or profile picture, typically displayed alongside their username or in user-related sections such as post, comments, profile, profiles to follow.

• CategoriesPanel: A component that presents a panel with categories buttons for filtering posts.

• Comment: A container that is repetively used to display comments under each post.

• DropdownMenu: A reusable component that creates a dropdown menu interface, allowing users to select options or navigate through different sections, utilizes by authenticated user to manipulate own content, used in user profile, in post detail view for edit/delete options and in comments section to edit/delete comments.

• Footer: Footer is visible on every page across the app with the fixed bottom position. It contains copyright information and social links.

• InputError: A component that displays an error message or validation feedback related to input fields in forms, helping users understand and correct any errors.

• NavBar: A navigation bar component, providing app logo and links and options for users to navigate through different sections of the app.

• Page404: A component that represents an error or "Not Found" page, displayed when a user tries to access a page or route that does not exist.

• PostContainer: A container component used to display individual posts, repetitively used to displayed iterated posts on post list, posts in user profile, Feed and Liked pages.

• Profile: A component representing a user's profile page, displaying information such as the user's avatar, username, statistics, bio, instagram link and equipment. Repetively used for each user.

• SidePanel: A panel component positioned at the side of the application, used to display menu with links for authenticated user.

• TopPosts: A component that displays list of trending posts, based on number of likes criteria.

• HTML5 - markup language used for structuring webpage content
• CSS3 - stylesheet language
• JavaScript - high-level, imperative, programming language.
• JSX - an extension to the JavaScript language syntax, used in React.
• Markdown - markup language used to write README and TESTING documents.

• Axios - promise based HTTP client for the bowser and node.js
• Balsamiq - used to create project wireframes
• Bootstrap 4.6.0 - CSS framework developed by Twitter
• Canva - used to design logo picture
• Coolors.co - was used to create colour palette for terminal display page
• CSS Jigsaw Validator - validation tool for CSS
• ESLint - JavaScript linter, was installed with npm and configured in IDE.
• Favicon.io - tool used to create favicon
• Font Awesome: - Font Awesome icons were used for social links in terminal display page
• 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
• Google Chrome DevTools - used for developing HTML/CSS/DOM navigating/JavaScript console
• Google Fonts - source of project's fonts
• Google Lighthouse - used for testing website performance
• Heroku - online app used to deploy project
• jwt-decode - library that helps decoding JWTs token which are Base64Url encoded
• Lighthouse - chrome extension to test website performance
• npm - JavaScript packet manager for runtime environment, used to install dependencies
• Pexels - was used to source bacground picture for terminal display page
• React-infinite-scroll-component infinite scroll for posts and comments
• React router - enables "client side routing".
• React toastify - toasts for feedback messages
• React JS 17.02 - main JavaScript library used for the project
• Techsini.com - website mockup generator
• W3C HTML Validator - validation tool for HTML
• WAVE - web accessibility online tool
• WebAIM - online tool to check colour contrast/accesibility

Details of manual testing can be found in TESTING.md file.

Minor syntax and spelling errors were eliminated during development in IDE, below is a list of registered issues.

Bug	#37
Description	The issue exists on the 'Add Post' page in the form, specifically regarding image file uploads. When a user attempts to submit the form without selecting an image, an error is returned stating, 'The submitted data was not a file. Please check the encoding type on the form.'
Expected behavior	The user should be able to submit the form even without an image. In this case, the backend should provide a placeholder image.
Investigation	The encoding type is correctly set in the Axios defaults. Upon investigation, it was found that the issue in the code lies in PostCreateForm.js. The problem arises from the line: formData.append("image", imageInput.current.files[0]); The current files list is empty, yet it is still being appended to the formData.
Fix	The bug was resolved by conditionally appending the image to the formData only if the user selected an image. In this case, the file list is not empty and can be successfully appended to the formData.
Updated Code	if (imageInput.current.files.length > 0) { formData.append("image", imageInput.current.files[0]); }
Screenshots	Problem: Original code: Updated code:

Bug:	#38
Description	The fetchPostsByLikes function uses an Axios request to fetch a list of posts and order them based on the number of likes, from most liked to least liked. To verify its functionality, likes were added and removed on multiple posts. However, the result was that the list of fetched posts was incomplete, and the updates in likes were not visible in the TopPosts component.
Expected behavior	Function fetches a list of posts and orders them by likes count.
Investigation	Upon investigating the backend, it was discovered that it was overlooked that the API utilizes pagination to display posts. Consequently, only 10 posts were fetched, and some of the expected posts to which I had added likes were not included.
Fix	To fix the bug, I updated the function code by declaring an array to store all posts and a variable to hold the current page's posts. Now, posts are fetched from all existing pages and appended to the array of all posts. The sorting is then performed on the complete array of posts, ordering them from most liked to least liked.
Screenshots	Original code:

There is an ongoing issue with the app. Some mobile devices, especially those made by Apple, have trouble displaying the app due to cross-domain cookies and cross-domain tracking settings. I encountered this issue on Safari, Chrome, and Brave browsers on Apple devices. The project is deployed on two domains, one for the backend and one for the frontend. While the page can be displayed, users are unable to sign in due to cookie restrictions. The same problem occurs in the original "Moments" walkthrough, and it is a known issue in the CI Slack community (link).

App was deployed to heroku for the first time when React installation was completed to make sure that everything is working correctly at early stage of development.

Note: Repository was created using Code Institute template: https://github.com/Code-Institute-Org/react-ci-template

1. Login to Github and navigate to repository: https://github.com/alexkisielewicz/travel-shutter

2. Click on "Fork button" in upper-right corner and create a new fork in your own account.

3. Open your repository in local IDE or using Gitpod. Preferred way is to used Chrome Gitpod Extension. When you install extension, green "Gitpod" button appears in your repository. Click on it to cread new workspace.

4. If you're not using gitpod you can use command below to clone this repository to your local machine.

   git clone https://github.com/alexkisielewicz/travel-shutter.git 

5. Navigate into the clonned repository's directory and use command below to instal the necessary dependencies:

   npm install

6. Start development server by running command:

   npm start

You should be able to run this react app with this steps, please make sure that Node.js and npm is installed on your machine.

1. Navigate to https://heroku.com/ login to your account and open dashboard. Click button "New" and select "Create new app" button.

2. Enter app name, I used "travel-shutter", chose your region and click on "Create app" button.

3. Click on newly created app and go to "Deploy" tab and then to "Deployment method" section. Authorize and connect your GitHub account, then find and select your repository that was previously forked.

4. No environmental variables are required to run this project, however the app uses backend application that is described here. Deployment process is described in backend app repository. Additional enenvironmtal variables would be required in backend's heroku config to work with react front end due to CORS security mechanism.

   Additional Env vars in backend app:

   Key	Value
   ALLOWED_HOST	yourDeployedBackendApp.herokuapp.com
   CLIENT ORIGIN	https://yourDeployedFrontEndApp.herokuapp.com
   CLIENT_ORIGIN_DEV	https://gitpodsPreviewURL.gitpod.io

5. Select Main branch and click "Deploy branch". After built is done, you should be able to see the button with the link leading to deployed app. In my case http://travel-shutter.herokuapp.com.

If I had more time or decide to develop app further I would add/improve following functionalities:

• Tags in posts: At the moment user can only add tags as a string with words separated with commas. In the future I would change backend post model field to be many-to-many field. This would allow apply additional functionalities to the app like searching posts by tag and display tagged posts.
• Authentication: At the moment app uses simple authentication with username and password. To make it more secure and usefull I would introduce e-mail registration with e-mail confirmation and password recovery option.
• Image optimization: It would be good idea to automatically process uploaded images to optimize their filesize, that would be more efficient for the image hosting and api requests.

• Code Institute's "Moments" walkthrough was used as inpiration and learning resource to create this project.
• CSS for spinner loader was sourced from https://loading.io/css/
• Categories tags were styled with help of the tutorial: https://www.designlabthemes.com/css-tags-how-to-style-post-tags/

• Pexels.com - sign in/up cover photos, and other graphics.
• Alek Kisielewicz Photography - I used my own pictures as a cover images for a number of posts.

• Code Institute course and learning platform
• W3Schools - JS learning resource, help with syntax.
• MDN Mozilla Developer - helped me understand different object methods.
• React - React documentation.
• Bootstrap - Bootstrap documentation for used components e.g. modal, dropdown, tooltip, navbar.

• My Mentor Jubril Akolade for helpful feedback and guidance at all stages of the project.
• Code Institute Slack Community for being invaluable knowledge base.

• Travel Shutter Website was created for educational purpose only.