Welcome to Alternative Travels!
Bored of travelling to famous locations packed with tourists? If yes, Alternative Travels could be what you are looking for. Alternative Travels is a social media app designed to help travellers discover unknow locations and the hidden beauty behind places that could look "decadent" or unconventional at first sight. In these locations you won't find the usual shopping street that looks the same all around the world with Louis Vitton, Zara and HM, but you will get in real contact with the feelings of time and history of the place, you will experience simple and authentic life of some of the locals living there, you will find handcrafted and vintage artifacts and could get lost in those marvelous worlds.
The live link of our Fronted Website can be found here - Alternative Travels
Here below the links to the Backend API:
The site has a clean and simple design to provide users with easy access to essential information for their trips.
The main colors chosen for the website are the following ones.
In the login, signup and notfound pages the wheel displayed is the one of the Amusements Park of the sadly known city of Chernobyl. This location, despite the tragedy that happened in 1986 and before the ongoing war between Russia and Ukraine, has been visited in the recent years by tourists. It symbolizes how decadent or so called "not positive" places can spark the interests of people around the world.
Font used is Roboto. The font was imported via Google Fonts. The back-up font is sans-serif.
The wireframes for the "Alternative Travels" website were created with Figma. Due to lack of time they were designed in a simple way. Their quality will be improved at a later point.
Users can create an account, log in and log out.
View Logged Out User
If a user is not registered to the site, he/she will have only access to check the Posts on the HomePage and the Profile page of the most followed profiles. As in the screenshot below, just the Home, Login and SignUp Icons are displayed to the Logged Out user.
View Logged In User
If a user is registered to the site, he/she will have access to all the Features of the website. As in the screenshot below, all the menu Icons are available in the Navbar to the Logged In user.
Site users can customize their profile by adding a profile picture and a short bio. Moreover, in their Profile, they can as well change their username and password by clicking on the 3 dots in the top right corner. The profile of each user is accessible by clicking on the Profile photo of the user.
A logged in user can create posts with images by clicking on the Post icon in the navbar.
He will then be asked to choose to create a post either with image or video.
When Post with image is selected, the following view will appear to the user. All the fields are to be filled out, otherwise error messages will pop up that field can't be left blank.
A logged in user can create posts with videos by clicking on the Post icon in the navbar. The process is the same as for creating posts with images. The only difference is that the user has to choose the option to create a post with video.
The below is the form to create the post with a video.
Geolocation is a mandatory field to fill out when creating a post with image or video. It can be selected by allowing the GPS of the device the user is using to detect his/her location or it can be selected manually on the world map of the website.
The Map can be accessed via the Map tab. It is one of the main features of the site. On the map the logged in user can view all the geolocations of the posts of other users.
By clicking on each marker, it is possible to check which user did the post and to be redirected to the post by clicking on it.
A logged in user can edit and delete his/her posts by clicking on the image/video of the his/her post and by clicking on the dots in the top right corner. All the fields can be edited.
If the user wants to delete the post, he/she will be asked first, if he/she is sure to take that action.
This is a mandatory field for the user to fill out when creating a post with image or video. Tags have to be entered as comma separated values.
Logged in user can comment posts. If they want to delete a comment, they will be asked if they are sure to take the action.
Logged in user can like posts. They can not like the posts they created, but just those of other users. They can unlike the post they liked before.
Searchbar allows to look for posts by their tag, title or user.
By clicking on the Sell button in the Navbar, logged in users can post an item or artifact they found during a trip, that they wish to sell.
Below is the creation form. All the fields are mandatory.
By clicking on the Market Tab in the Navbar, the logged in users can check all the posts related to artifacts and products that other users wish to sell. By clicking on "check details and contact", a modal will open to highlight all the contact details for the users to get in contact if interested.
A few information about the following fields of Product posts:
Via the Searchbar is possible to filter posts under the market tab via title, condition, status or price. It is not possible to add tags and geolocation to the posts of this section.
Comments and likes information mentioned above are valid as well for the Market Posts. Logged in Users can like and comment Market posts.
Logged in Users can follow other users if they want to keep updated with their content. If they want, they can unfollow them as well.
Here there are all the posts of all the users (but not the Market Posts).
The logged in user will view here all the new posts of the users he/she is following.
The logged in user will view here all the posts he/she liked (but not the Market Posts)
For the future development of the site we want to implement a live notification functionality, so that users could get updated in real time if an other user likes or comments on one of his/her posts, or if new posts have been posted by followed users. This will help creating a community within the website.
Option to write in real time with other users.
We would like to implement a functionality for travellers to organise meet ups between them during their travels. If they are new to a place, this would help them meeting other people. This functionality could include as well an option to organize travels together among users.
We would like to implement the option to be redirected from our website to the available accomodations on Booking/AirBnb if a user is intered to travel to a specific location.
The frontend section of the project focuses on the usage of the website from the perspective of a site user. The User Stories are divided into the following categories:
I used the Kanban Board to build the Alternative Travels Frontend using Agile principles from the start. The user stories created are from the perspective of a site user to follow and test throughout the usage of the site. The Agile Principles helped to organise how to build step by step the whole application.
Each user story has a level of prioritisation using the MoSCoW method. The 2 different levels of prioritization are divided as below:
Expectation (As a site user, I want to...) | Result (As a site user, I...) |
---|---|
view a navbar in every page so that I can navigate easily between pages | can view a navbar in every page and navigate without issues in all the sections of the site |
create an account so that I can get access to all features of the application for signed up users | can access of all the features of the app after creating an account |
sign in to the website so that I can access functionality for logged in users | can have access to all the site features anytime I log in to the website |
keep my logged-in status until I choose to log out so that my user experience is not compromised | can keep my logged in status until I decided to log out |
log out so that I can securely quit my session and keep my profile data safe | can log out from my account and keep it safe |
create a post, so that I can share images and videos about my trips or alternative travels around the world | can create posts either with images or videos of my trips |
click on a post, so that I can view all the posts' details and comments of other users | can view all the post details after clicking on it |
like other users' posts so that I can show my appreciation for travels and activities of other users | can like other users posts |
view the most recent posts, so that I am up to date with the newest content | get the most recent posts in the Home, Feed and Market pages so that I always know what s new about other users |
see posts of followed users, so that I can keep up to date with content of users I like | can see posts of followed users in my feed |
view posts I liked, so that I can find again valuable information and images of interesting travels | can see posts I liked under Liked tab of the navbar |
create, read, update and delete my posts so that I can tailor my posts and profile according to the image I want to give to my followers and the community | can create edit or delete my posts anytime I want |
create, read, update and delete my comments on posts, so that I can leave my opinion on interesting topics or update/delete what I wrote if any change is needed | can create edit or delete my comments anytime I want |
view other user profiles so that I can learn about who they are, read their posts and follow them if I'll find them interesting | can check the other users profiles by clicking on their image |
see a list of the most followed profiles so that I can view which users are popular on the platform and decide if to follow their profiles | can see who are the most followed profiles on the site in the bar on the right side (laptop view) |
follow or unfollow a user, so that I can keep up to date with the user's posts and content | can follow or unfollow users |
edit my profile, so that I can keep up to date my general info, my profile photo and posts | can edit my profile photo and description |
update my password and username so that I can keep my account secure and change my displayed name on the social network | can change my username or password in my profile page |
have the possibility to add a geolocation to my posts so that other users following me can know where I have travelled | can add a geolocation when creating a post |
have a marketplace so that I can buy interesting products and relics from alternative travels of other users on the platform or alternatively I can post items to sell to other users | can access a marketplace with posts about artifacts and products of other travellers with their contact details under the market tab in the navbar. |
The Website was tested on Google Chrome, Microsoft Edge, Safari, and Firefox with no issues.
The Website was tested on the following devices, OnePlusNord10, iPhone13 mini, MacBook, laptop Acer Swift SF314-43 and created for the following screen sizes: 320px, 576px, 768px, 992px, 1024px and up.
The below is the result of the Lighthouse testing. I could not work on improving the results due to lack of time. This will be done at a later stage
I was not able to render the location correctly after a new post was created. The issue was that the component was being rendered before the API data was loaded and therefore undefined values were passed to the subcomponents. This was fixed by adding some logic that helped to load the initil value of latitude and longitude and only update once the user selects a location on the map.
Leaflet map under the Map tab was not rendering correctly. This was fixed by adding some CSS after checking a post on stackoverflow.
When clicking on location, pop up info appearing behind the searchbar. It should be in the front. Not able to fix it due to lack of time.
When creating a new posts, if no tags are entered and we press submit, a toast error message should pop out but it does not.
The icon on large screen is sometimes displayed out of the profile frame. I tried to fix this by adding some CSS, it works fine for the following sizes: 320, 576, 768, 992 and 1024px. But on other sizes might sometimes not be displayed correctly.
Once you have created a new gitpod workspace and set up the new project, you are ready to deploy to Heroku.
Once you have set up the workspace and done a basic deploy to Heroku, you can connect the react workspace to your API, in order to send data to the API
My mentor Antonio for pointing me always in the right direction. 30 minutes with him are worth 30 professional lessons.