• TravellerWorld is a social trips blog which combines the functionality of social media with the practicality of a trips blog hosting site. Users can sign-up to share their own trip,like other's, and interact with each other through commenting.

Link to the live project hosted on Heroku]

[Link to the project repository hosted on Github]

• Strategy
  • Target Audience
  • User Stories
• Scope
  • Research
  • Future Features
  • Testing
• Structure
  • Wireframes
  • Information Architecture
• Skeleton
  • Current Features
  • Technologies Used
• Surface
  • Design
  • Deployment
• Credits
  • Content
  • Media
  • Acknowledgemnets

• This site is targeted towards anyone who enjoys traveling - beginner or advanced - who would like to either share their own trips with others or search for some new ones to try.

These are staff/admin users who maintain the site and manage it's contents.

• (https://github.com/users/EmanuelMariusNicu/projects/1/views/1?layout=table) As an admin, I can edit and remove trips so that I can manage the site contents.
• (https://github.com/users/EmanuelMariusNicu/projects/1/views/1?layout=table) As an admin, I can read and remove comments so that inappropriate comments can be removed.

These are users who intend to share trips on the platform.

• (https://github.com/users/EmanuelMariusNicu/projects/1/views/1?layout=table) As a trip sharer, I can post my own trips so that I can share them with others.
• (https://github.com/users/EmanuelMariusNicu/projects/1/views/1?layout=table) As a trip sharer, I can set my posted trips to private or public so that I can control who views them.
• (https://github.com/users/EmanuelMariusNicu/projects/1/views/1?layout=table) As a trip sharer, I can edit my posted trips so that I can update any mistakes/changes.
• (https://github.com/users/EmanuelMariusNicu/projects/1/views/1?layout=table) As a trip sharer, I can create an account so that I can interact with other users content and create my own.
• (https://github.com/users/EmanuelMariusNicu/projects/1/views/1?layout=table) As a trip sharer, I can add tags to my trips so that they are more visible to others.

These are users who intend to view trips that others have posted.

• (https://github.com/users/EmanuelMariusNicu/projects/1/views/1?layout=table) As a trip viewer, I can create an account so that I can interact with other users content and create my own.
• (https://github.com/users/EmanuelMariusNicu/projects/1/views/1?layout=table) As a trip viewer, I can search for trips so that I can find one that matches what I'm looking for.
• (https://github.com/users/EmanuelMariusNicu/projects/1/views/1?layout=table) As a trip viewer, I can view the budget information of a trip so that I can make an informed decision based on my possibilities.

• Before any planning, I conducted research into both social media and trip/blog websites and took note of the conventional layouts and formats as well as which features I thought enhanced the user's experience and would be good to include for my target audience(s).

• Either inputted by the poster at time of creation, the trip could be assigned a difficulty (beginner, intermediate or pro) so that user's can select based on their current abilities.

• Similarly to difficulty, the time requirememnts could be added to the trip so that users can select based on their available time.

• Throughout the project, I relied heavily on Chrome Devtools to help me view this project on different screen sizes so that I could adjust elements, create media queries (by adding bootstrap classes) for responsive design.
• Code was also run through validators and automatic tests were run.

• TravellerWorld is a blog-style site with multiple pages which relies on the MVC framework: Django to present information from a trip database and provide CRUD functionality.
• Trips are presented as cards whilst browsing and full page views when viewing.The cards link to the trip viewer.
• Trips can be browsed using words within the post or searching in the search bar in the top right of the navbar.
• The home page displays 2 rows with trip cards.
• All pages are responsive thanks to bootstrap classes.
• Browsing/search results pages present the related trips in a large flex container.

• Sticky
• Logo to the left with 3 navigation buttons: Home button, Browse dropdown with tags and Menu dropdown. When reduced to small screens, logo stay left while navigation hidden in collapsible menu.
• Browse dropdown hosts links to browse trips by tag
• Menu dropdown hosts links to interact with user's whilst logged in(Post a trip feature is available for users) or to login/register when logged out.
• Search bar input which leads to search results page when submitted.

• Copyright
• External links to social medias on center

• Welcomes user and displays either 2 carousel with post trips or 1 side-scrollers depending on screen size

• Up to 3 'pages' with 3 cards on. Less if not enough on the site. Displayed on larger screens.

!

• Cards displayed inline. Displayed on smaller screens and user can swipe to scroll.

• Displays all matching trips as cards in grid view.

• Displays all matching tags as cards in grid view

• Compact view of trip key features.
• Displays trip image, title, caption, likes counter, comments counter and saves counter as well as a stretched link.
• If trips belongs to the user currently logged in, user can show the username on the card trip.

• Suggested to search again if no results found

• Trip image, title, author, budget, tags, route, accommodation, guide, information, created and modified dates and caption displayed in container at bottom.
• Edit and delete buttons presented if viewed by owner. Like and comment available if visit by someone else.
• Route, accommodation, guide and informations displayed in their own containers below

• User or viewer can post a comment and delete it.

• Crispy form
• Inputs: title, image select,budget, route, accommodation, guide and informations and tags

• HTML
• CSS
• Git
• JavaScript
• Python

• os

• cloudinary
• dj3-cloudinary-storage
• gunicorn
• oauthlib
• psycopg2
• whitenoise
• django-crispy-forms

• Django

• Gitpod to alter and manage website files
• Github to create and store website files
• Heroku to deploy web application
• Chrome Devtools to test site throughout process
• Bootstrap to help with styling and responsive design
• Cloudinary for database and staic file storage
• Google Fonts for the website font
• Font Awesome used to add icons
• Favicon.io used to create favicon
• Code Institute fullstack developer course to provide learning materials
• W3Schools for help with common coding issues
• Stack Overflow for help with common coding issues
• Am I Responsive? for device simulations

• The colour-scheme is vibrant but soft to provide a pleasing display and compliment any trips images displayed on the site. The tone of the colours were chosen to compliment the bootstrap light and secondary classes as ashown above.
• Bootstrap border and background colours were used on secondary features. Bootstrap button colours also used.

• Images are uploaded by the users and stored in Cloudinary database.
• There are placeholder images for trips

• All text is readable. It is a display 'Lucida sans serif' with rounded terminals. It is designed for display purposes but kept legible enough to use in small sizes as well. It pairs well with the softer colours and rounded corners of the design.
• Sans serif has been used as the fallback option since it is the closest web-safe font.

• Font Awesome icons were used for navigation buttons.

• This site was developed using Gitpod, stored on Github and deployed with Heroku.

• Testing on Gitpod:

  1. In the terminal, type "python3 manage.py runserver" and press enter to begin the application
  2. Click "Open in Browser" on the pop-up
  3. Once finished, use Ctrl + C in the terminal to close the application

• Deploying on Heroku:

  1. From the homescreen, click "New" and select "Create new app"
  2. Choose app name, select region and click "Create"
  3. Go to "Settings" and add PORT : 8000 to the Config Vars (CLOUDINARY_URL : {cloudinary url}, DATABASE_URL: {postgres url}, SECRET_KEY: {django secure key} also added but excluded from Github for security reasons)
  4. Add heroku/python buildpack
  5. Go to "Deploy" and connect Github repository
  6. Select "Enable Automatic Deploys" and click "Deploy Branch"

• Code Institute lessons
• Retrieving search term from search bar to display matches from https://www.youtube.com/watch?v=AGtae4L5BbI
• Custom error pages from tutorial at https://www.geeksforgeeks.org/django-creating-a-404-error-page/
• Saving new slug when updating a trip at https://stackoverflow.com/questions/33176569/slugfield-in-django-and-overriding-save
• Lking posts as well as counting likes and saves inspired by Code Institute 'I Think Therefore I Blog' walkthrough project.
• Code for multiple forms in one template from https://openclassrooms.com/en/courses/7107341-intermediate-django/7264795-include-multiple-forms-on-a-page
• Idea for holding temporary data and cleaning before saving from https://www.geeksforgeeks.org/multiplechoicefield-django-forms/
• Prepopulating form after failed attempt from https://www.reddit.com/r/django/comments/4oie1d/how_to_automatically_prepopulate_data_in_forms/ and https://docs.djangoproject.com/en/dev/ref/forms/api/#dynamic-initial-values
• Fixing mime-type bug in settings file from https://stackoverflow.com/questions/35557129/css-not-loading-wrong-mime-type-django

• All icons from Font Awesome
• All uploaded images from google(https://www.google.com/)

• Code Institute for providing excellent learning content
• W3Schools for quick and easy tutorials on programming languages
• The users of Stack Overflow
• Other CI students for sharing their work and providing inspiration and guidance through the Slack channels