{"id":20657711,"url":"https://github.com/aedoardo1990/eu-bikeplanner","last_synced_at":"2026-04-07T21:31:20.242Z","repository":{"id":218504516,"uuid":"745418339","full_name":"aedoardo1990/EU-BikePlanner","owner":"aedoardo1990","description":"Full Stack Website to organise bike tours across Europe","archived":false,"fork":false,"pushed_at":"2024-02-23T11:47:55.000Z","size":13622,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-09T23:46:20.409Z","etag":null,"topics":["bootstrap","django","javascript","python"],"latest_commit_sha":null,"homepage":"https://eu-bike-planner-4c87e2f122b8.herokuapp.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aedoardo1990.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-19T09:44:33.000Z","updated_at":"2024-06-25T13:48:00.000Z","dependencies_parsed_at":"2024-01-25T12:27:46.958Z","dependency_job_id":"41d00c3a-638f-45c1-ba2e-18925fc0407d","html_url":"https://github.com/aedoardo1990/EU-BikePlanner","commit_stats":null,"previous_names":["aedoardo1990/eu-bikeplanner"],"tags_count":0,"template":false,"template_full_name":"Code-Institute-Org/gitpod-full-template","purl":"pkg:github/aedoardo1990/EU-BikePlanner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aedoardo1990%2FEU-BikePlanner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aedoardo1990%2FEU-BikePlanner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aedoardo1990%2FEU-BikePlanner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aedoardo1990%2FEU-BikePlanner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aedoardo1990","download_url":"https://codeload.github.com/aedoardo1990/EU-BikePlanner/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aedoardo1990%2FEU-BikePlanner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31530641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","django","javascript","python"],"created_at":"2024-11-16T18:22:30.998Z","updated_at":"2026-04-07T21:31:20.213Z","avatar_url":"https://github.com/aedoardo1990.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# EuroBike\n\nWelcome to EuroBike!\n\nEuroBike is a bike planning app designed to help bikers to travel long distance across Europe. The function of the app is twofold: provide biking routes across multiple European States and remove the hassle of what to pack for a long trip. It is targeted towards bikers of all levels (basic, intermediate, pro) offering different packing solutions for each of them. \nThe site acts as a repository for trips where users can store all the data for the organisation of their next trips.\n\nThe live link of our site can be found here - [EuroBike](https://eu-bike-planner-4c87e2f122b8.herokuapp.com/)\n\n## ![Responsive Mockup](static/images/readme/mock-up.png)\n\n## Table of Contents\n- [EuroBike](#eurobike)\n- [Table of Contents](#table-of-contents)\n- [User Experience (UX)](#user-experience-ux)\n- [User Stories](#user-stories)\n- [Design](#design)\n  - [Color scheme](#color-scheme)\n  - [Imagery](#imagery)\n  - [Fonts](#fonts)\n  - [Structure](#structure)\n  - [Wireframes](#wireframes)\n- [Agile Methodology](#agile-methodology)\n- [Data Model](#data-model)\n- [Messages and Interaction With Users](#messages-and-interaction-with-users)\n- [Admin Panel-Superuser](#admin-panel---superuser)\n- [Features](#features)\n  - [Existing Features](#existing-features)\n  - [Future Features](#future-features)\n- [Validation](#validation)\n  - [HTML validator](#html-validator)\n  - [CSS validator](#css-validator)\n  - [PEP8 validator](#pep-8-validator)\n  - [JShint validator](#jshint-validator)\n- [Testing](#testing)\n  - [Manual testing](#manual-testing)\n  - [Lighthouse](#lighthouse)\n  - [Browser testing](#browser-testing)\n  - [Device testing](#device-testing)\n  - [Mentor, family and friends testing](#mentor-family-and-friends-testing)\n- [Bugs](#bugs)\n  - [Fixed bugs](#fixed-bugs)\n  - [Unfixed bugs](#unfixed-bugs)\n- [Deployment to Heroku](#deployment-to-heroku)\n- [Technologies used](#technologies-used)\n  - [Languages](#languages)\n  - [Frameworks - Libraries - Programs Used](#frameworks---libraries---programs-used)\n  - [Django Packages](#django-packages)\n  - [Python libraries](#python-libraries)\n- [Credits](#credits)\n  - [Code used](#code-used)\n  - [Media](#media)\n- [Acknowledgments](#acknowledgements)\n\n## User Experience (UX)\n\nA user of EuroBike would be someone who is passionate about biking long distance and who likes travelling by bike for multiple days. For such trips, packing smartly to reduce weight and use less space is essential. Or alternatively, packing everything you need could be for some bikers top priority rather than weight. \nFurthermore, a visitor of EuroBike can find in the app a map of the chosen route. \n\n### User Stories\n\n#### As a user I want to:\n\n- log in or log out of my account so that my account is safe\n- register an account so that I can create a new bike trip\n- login so that I can access my booked bike tour plans\n- view a list of all the bike routes\n- view the description and map of each route so that I can choose which route suits me\n- select bike routes from a list so that I can plan which route to do\n- select among different options for different categories of items to organise what to pack for the trip\n- add additional items if anything is missing in the preselected packing options\n- view the list of items for the trip so that I can ensure if things need to be added or deleted\n- update a list item so that I can adjust accordingly my iventory for the trip\n- delete a trip from the my booked trips, if I am not going to do it anymore\n- contact Site's Admin so that I can send my questions/ feedback regarding the use of the application\n\n#### As a site administrator I want to:\n- allow only registered users to use the website so that they can only access their own bike trip plans\n- access the admin panel so that I can check and manage the items of the bike tour plans of each user\n- manage the list of bike routes and items so that I can keep up-to-date routes and lists of items\n- review messages sent by users so that I can address their requests\n- delete read \u0026 actioned users messages so that I do not action the same message twice\n\n## Design\n\nThe site has a clean and simple design to provide users with easy access to essential information for their trips. \n\n### Color scheme\n\nThe main colors chosen for the website are those of the Europe Union flag. This aims at conveying the fact that the project wants to help bikers travelling across Europe.\n\n![Colour Palette](static/images/readme/palette.png)\n\nThe background image of the homepage has different shades of blue, aiming at fitting with the blue color of the header and the footer. Blue is a calming color and the image wants to remind bikers of the calming and freeing sensation of biking, with wind in the hair and the feeling that there are no boundaries when you bike. \n\n\nThe Gold metallic color of the European Union flag can be found as well in the footer: social media icons turn to Gold when the user hovers over them. \n\n### Imagery\n\nThe background image of the homepage display 2 bikers in a beautiful natural landscape. The purpose is to motivate bikers to discover Europe and its immense beauty by slow travelling on their bike. Slow travelling can allow to experience at 360 degrees the new surroundings in which someone cycles.\n\nIn the Routes page there is an image for each Route. Different images for each route want to communicate the richness and diversity that exist in Europe, from Stockholm to Rome, from Lisbon to Moscow. \n\nA map with all the Routes is available in the Homepage. Individual map of each Route can be displayed in the site (for more details about it, check the Features section). \n\n### Fonts\n\nThe Font chosen for the site is Montserrat. The font was imported via Google Fonts. The back-up font is sans-serif.\n\n### Structure\n\nThe project consists of one Django application - named bike_planner. The website has the following pages and each page the corresponding functions:\n\n- index.html -\u003e home page containing essential info about the website\n- add-trip.html -\u003e to create a trip by choosing route and selecting which items to pack \n- trip-details.html -\u003e when the trip is booked, the user is redirected to this page, where all the booked info are visible + a map of the selected route\n- my-trips.html -\u003e each logged in user can check here his/her booked trips\n- edit-trip.html -\u003e to edit the details of a booked trip\n- delete-trip.html -\u003e to delete a booked trip from my-trips.html\n- routes.html -\u003e to view a list of all the routes. This page is accessible both from logged in and logged out users. \n- route_details.html -\u003e to check the details of each route (photo, description and map). This page can be viewed both from logged in and logged out users. \n- contact.html -\u003e to allow the user to send messages about the site to Admin. This page can be displayed both from logged in and logged out users. \n- contact-received.html -\u003e when the contact form is sent, this page is displayed\n\nThere are also a few customised pages related to user's authentication option with Alluath:\n\n- login.html\n- logout.html\n- signup.html\n\n\n### Wireframes\n\nThe wireframes for the \"EuroBike\" website were created with Figma.\n\n\u003cdetails\u003e\n\n\u003csummary\u003eHomepage\u003c/summary\u003e\n\n![Homepage](static/images/readme/homepage-figma.png)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRoutes\u003c/summary\u003e\n\n![Routes](static/images/readme/routes-figma.png)\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\n\u003csummary\u003eAdd Trip\u003c/summary\u003e\n\n![Add Trip](static/images/readme/addtrip-figma.png)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eMy Trips\u003c/summary\u003e\n\n![My Trips](static/images/readme/mytrips-figma.png)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eTrip Details\u003c/summary\u003e\n\n![Trip Details](static/images/readme/tripdetails-figma.png)\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eContact\u003c/summary\u003e\n\n![Contact page](static/images/readme/contact-figma.png)\n\u003c/details\u003e\n\n## Agile Methodology \n\nGithub projects was used to manage the development process using an agile approach. Please go to the web address - https://github.com/users/aedoardo1990/projects/3- to view the User Stories in the Kanban board.\n\nA Github Issue was created for each User Story. Each User Story has defined acceptance criteria to make it clear when the User Story has been completed. Not all the User Stories were completed exactly as defined when they were first created. However the differences between the conception of the User Stories and the Final Site are documented in the comments of each User Story. \n\n## Data Model\n\nPrinciples of Object-Oriented Programming were used throughout this project. \n\nDjango AllAuth was used for the user authentication system.\n\nThe main Model of the app is the Trip model. It allows users to add trips. The trip author is a foreign key to the User model given a trip can only have one author.\n\nThe following 9 models are linked by a Foreign Key to the Trip Model and they enable the below actions to a site visitor:\n- Route -\u003e choose a route from a preselected list \n- Bike -\u003e choose a bike type from a preselected list\n- Clothes  -\u003e select clothing equipment from a preselected list\n- Repair -\u003e choose a repair kit from a preselected list\n- Bags -\u003e select a bag type from a preselected list\n- Sleep -\u003e select a sleeping kit from a preselected list\n- Electric -\u003e choose a set of electronics from a preselected list\n- Toilet -\u003e choose a set of toiletries from a preselected list\n- Cook  -\u003e select a cooking kit from a preselected list\n\nThe Route model allows as well to display all the routes under the Routes tab and to view the photo, the description and the map of each route. \n\nOn the top of the mentioned models, there is as well a Contact model, which enables the User to send messages to the Admin, and the Admin to view and manages the messages of site visitors. This model can be accessed by a logged out User too. On the contrary, when the User is logged in, the Name and Email fields will be autopopulated with the User's data.\n\nThe diagram below is a detailed view of the database schema.\n\n![Diagram](static/images/readme/EuroBikeDiagram.png)\n\n## Messages and interaction with users \n\n\u003cdetails\u003e\n    \u003csummary\u003eMessages updating the user when an action has been completed.\u003c/summary\u003e\n\n- Login successful\n![Login](static/images/readme/login.png)\n\n- Trip created\n![Trip created](static/images/readme/trip-created.png)\n\n- Date can not be in the past\n![Date not in the past](static/images/readme/date-past.png)\n\n- Trip edited\n![Trip edited](static/images/readme/trip-edited.png)\n\n- Trip deleted\n![Trip deleted](static/images/readme/trip-deleted.png)\n\n- Contact form sent\n![Contact form sent](static/images/readme/form-sent.png)\n\n- Logout successful \n![Logout successful ](static/images/readme/logout.png)\n\n\u003c/details\u003e\n\n## Admin Panel - Superuser \n\nIn the Admin Panel the Admin/ Superuser has full access to CRUD functionality to create, edit or delete users' trips and the available packing options in the website regarding the following items: bags, bike types, clothes, cooking kit, electronics, toiletries, repair kit, routes, sleeping kit. \nIn the Admin Panel the Superuser can as well address messages sent by site visitors via the contact form.\n\n![Admin Panel](static/images/readme/superuser.png)\n\n## Features\n\n### Existing Features \n\n\u003cdetails\u003e\n\n\u003csummary\u003eWesbite name and logo\u003c/summary\u003e\n\nThey are included on all pages. They are a clickable link to Home page which is a common feature on many websites. The logo was taken from the wikipedia page of EuroVelo - [Wikipedia EuroVelo](https://en.wikipedia.org/wiki/EuroVelo)\n\n![logo-website-name](static/images/readme/logo-websitename.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eNavbar and Call to Action Intro Message\u003c/summary\u003e\n\n- Navbar - Logged out User\n\nWhen the user is logged out, the navbar contains the links to Home, Routes, Contact Form, SignUp and Login. Below the header there is a Call to Action message inviting visitors of the site to register or, if they have already an account, to login. \n\n![navbar-logged-out](static/images/readme/navbar-logged-out.png)\n\n- Navbar - Logged in User\n\nWhen the user is logged in, the navbar includes the links to Home, Routes, Contact Form, and Username. When the User clicks on the Username tab, a dropdown will appear with 3 options: Add Trip (to create a new trip), My Trips (this allows the user to view the booked trips), Logout. \nBelow the header the Call to Action message will invite the logged in user to create a new trip. \n\n![navbar-logged-in](static/images/readme/navbar-logged-in.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRegister\u003c/summary\u003e\n\nIt is located on signup.html. It was taken from Allauth and then customised. It enables the user to register an account using own username and password with an optional input of user's email address.\nIf the user already created an account, there is a link in the page to redirect to the login page. \n\n![Register](static/images/readme/sign-up.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eLogin\u003c/summary\u003e\n\nIt is located on login.html. It was taken from Allauth and then customised. It enables the user to login to the already created account by giving the username and password with an option to remember the username.\n\n![Login](static/images/readme/login-auth.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eIntroduction to the Website\u003c/summary\u003e\n\nBelow the background image of the homepage, there is a brief introduction to how the website help bikers to travel across Europe. A section called \"Routes Map\" follows to introduce the user to the biking routes and to the project of EuroVelo. \n\n![Introduction](static/images/readme/site-description.png)\n\n![Routes Map](static/images/readme/routes-map.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eFooter\u003c/summary\u003e\n\nIt contains icons with links to Youtube, X-Twitter, Pinterest and the Github profile of the author of the site. \n\n![Footer](static/images/readme/footer.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eAdd Trip\u003c/summary\u003e\n\nIt is located on add-trip.html. It contains the form allowing the user to create a new trip with all the requested details. Most of the fields offer the user with a choice from a dropdown list. In the fields of Title and Additional Items, the user can type in anything, in the field of Persons number only numbers can be entered, and in the Date Field only a date.\n\n![Add trip feature](static/images/readme/add-trip-feature.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eView Trip Details and Route Map \u003c/summary\u003e\n\nWhen a trip is booked, the user is redirected to this newly created page with all the data entered by the user for the trip + the map of the selected route.  \n\n![Trip details-1](static/images/readme/trip-details-feature-1.png)\n\nThe user can choose to edit one or more of the fields by pressing the Edit button at the bottom, or to go to the Delete page to cancel the trip by pressing the Delete button. \n\n![Trip details-2](static/images/readme/trip-details-feature-2.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eMy Trips Page\u003c/summary\u003e\n\nIt is located on my-trips.html. This feature allows the user to view all her/his booked trips. \n\n![My booked trips](static/images/readme/my-trips-feature.png)\n\n\u003c/details\u003e\n\n\n\u003cdetails\u003e\n\n\u003csummary\u003eEdit Trip\u003c/summary\u003e\n\nIt is located on edit-trip.html. It enables the user to modify any of the details of a booked trip. \n\n![Edit Trip](static/images/readme/edit-trip-feature.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eDelete Trip\u003c/summary\u003e\n\nIt is located on delete-trip.html. It enables the user to delete a booked trip. Alternatively, the user can press the other button \"Back to my trips\".\n\n![Delete Trip](static/images/readme/delete-feature.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eRoutes Page\u003c/summary\u003e\n\nIt is located on routes.html. This page allows logged in and logged out users to check a list of all the available bike routes. The introducing card of each route includes an image of the route, the title and an excerpt of the route description. \n\n![Routes Page](static/images/readme/routes-feature.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eView Routes Details\u003c/summary\u003e\n\nWhen a User clicks on one of the routes in routes.html, she/he is redirected to a more detailed page of the route. This page will include name, photo, description and map of the route.\n\n![Routes Details 1](static/images/readme/routes-details-1.png)\n\n![Routes Details 2](static/images/readme/routes-details-2.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eContact form\u003c/summary\u003e\n\nLogged in and logged out users can contact the Admin of the Site by sending a form via this page. It is located on contact.html.\n\n![Contact form](static/images/readme/contact-feature.png)\n\nWhen the form has been sent successfully, a confirmation message with a video of a biking person in a forest will be displayed.\n\n![Form sent](static/images/readme/form-sent-feature.png)\n\n\u003c/details\u003e\n\n### Future Features \n\n\u003cdetails\u003e\n\n\u003csummary\u003eIntegration of Google Maps\u003c/summary\u003e\n\nIn the future we would like to replace current maps with interactive Google Maps, that the biker could use to navigate on the route with her/his mobile device and GPS. This functionality will look similar to that of EuroVelo - for an example click \u003ca href=\"https://en.eurovelo.com/ev1\"\u003ehere\u003c/a\u003e. It will have a more interactive and a cleaner style than the version of EuroVelo.\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eMeeting other bikers \u003c/summary\u003e\n\nWe would like to include an option to meet bikers travelling on the same route or in the surroundings. This would allow Users to create a EuroBike community aiming at biking together and sharing the experience provided by EuroBike. This feature could be implemented with a Chat function to be included in the app. \n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eIntegration of booking.com/AirBnB\u003c/summary\u003e\n\nFor bikers who don't plan to sleep in a tent overnight, we would like to include an option on the website to redirect them to offers of hotels/accomodations on the road. This feature would look similar to the one of the site \u003ca href=\"https://www.omio.com/\"\u003eOmio\u003c/a\u003e - details in the screenshot below. They could be redirected to the website of booking.com, AirBnb or CouchSurfing. \n\n![Omio site](static/images/readme/omio.png)\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSelect End Date, select Departure and Arrival Locations\u003c/summary\u003e\n\nSo far in the Add Trip page it is possible to select the Start Date of the Trip. In the future, we would like to add as well the option for the User to select the expected End Date (this might vary, when biking long distance, unexpected things might happen that prolong the trip) and the exact Departure and Arrival Locations(some bikers might want just to do a part of the road and not the whole route).\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\n\u003csummary\u003eSelect Quantity and Weight for each Item\u003c/summary\u003e\n\nThis feature would allow to select a quantity and the weight for each item selected by the user. We could then include a weight calculator, so that the user could ponder if some things need to be removed or others might be added. \n\n\u003c/details\u003e\n\n\n\n## Validation \n\n### HTML Validator\n\u003cdetails\u003e\n\n\u003csummary\u003eThe website was validated by URI into the validator. No errors found.\u003c/summary\u003e\n\n- index.html\n![HTML Validation](static/images/readme/index.png)\n\n- add-trip.html\n![HTML Validation](static/images/readme/add-trip.png)\n\n- my-trips.html\n![HTML Validation](static/images/readme/my-trips.png)\n\n- trip-details.html\n![HTML Validation](static/images/readme/trips-details.png)\n\n- routes.html\n![HTML Validation](static/images/readme/routes.png)\n\n- route_details.html\n![HTML Validation](static/images/readme/routes-details.png)\n\n- contact.html\n![HTML Validation](static/images/readme/contact.png)\n\n\n\u003c/details\u003e\n\n### CSS Validator\n\u003cdetails\u003e\n\n\u003csummary\u003eNo errors found for the CSS validator. There are 6 warnings, code from those lines was taken from the Bootstrap Rosie walkthrough of CI\u003c/summary\u003e\n\n![CSS Validation](static/images/readme/css-validator.png)\n\n\u003c/details\u003e\n\n### PEP 8 Validator\n\u003cdetails\u003e\n\n\u003csummary\u003eNo error found for the PEP8 validator\u003c/summary\u003e\n\n1- bike_project:\n- urls.py\n![PEP8 Validation](static/images/readme/urls-py.png)\n\n2- bike_planner app\n- admin.py - imports from .models have been divided on 2 lines (line 2 and 3 of admin.py) to reduce line 2 to less than 80 digits and to pass PEP validator\n![PEP8 Validation](static/images/readme/admin-py-.png)\n\n- forms.py\n![PEP8 Validation](static/images/readme/forms-py.png)\n\n- models.py\n![PEP8 Validation](static/images/readme/models-py.png)\n\n- views.py\n![PEP8 Validation](static/images/readme/views-py.png)\n\n- urls.py\n![PEP8 Validation](static/images/readme/bike-planner-urls-py.png)\n\n\u003c/details\u003e\n\n### JShint Validator\n\u003cdetails\u003e\n\n\u003csummary\u003eNo errors found for the JShint validator.\u003c/summary\u003e\n\nThere were 2 undefined variables as per the screenshot below. \n\n![JShint Validation](static/images/readme/jshint-before.png)\n\nThe issue was solved by adding the comment on line 12. \n\n![JShint Validation](static/images/readme/jshint-after.png)\n\n\n\u003c/details\u003e\n\n## Testing\n\n### Manual Testing\n\n\u003cdetails\u003e\n\n\u003csummary\u003eTesting User Stories\u003c/summary\u003e\n\n---------------------------------------------------------------\n\n| Expectation (As a user, I want to...)  | Result (As a user, I...)    |\n| :---------------------------------: | :------------------------------:|\n| log in or log out of my account so that my account is safe. | can log in/log out successfully and check my booked trips only when logged-in. |\n| register an account so that I can create a new bike trip. | can register an account successfully and can create a new bike trip immediately in the Homepage when logged-in. |\n| login so that I can access my booked bike tour plans. | can view and access my booked trips by clicking Username \u003e My Trips |\n| view a list of all the bike routes. | see a list of all the bike routes after clicking the Routes Tab. |\n| view the description and map of each route so that I can choose which route suits me. | can check a description and a map of each route after clicking on any route in the Routes page. |\n| select bike routes from a list so that I can plan which route to do. | can choose any route from a dropdown list when filling the form to add/create a new trip. |\n| select among different options for different categories of items to organise what to pack for the trip. | can choose different packing options for the following categories in the form to add/create a new trip: Bike type, Clothes, Repair kit, Bags, Sleeping kit, Electronics, Toiletries, Cooking kit. |\n| add additional items if anything is missing in the preselected packing options. | can add freely any item in the field \"Additional items\" of the Add Trip Form. |\n| view the list of items for the trip so that I can ensure if things need to be added or deleted. | get a summary page with all the information I selected for the trip after submitting the Add Trip Form. |\n| update a list item so that I can adjust accordingly my iventory for the trip. | can decide to edit any item of a trip by following the path MyTrips \u003e Trip Name \u003e Edit Button .|\n| delete a trip from the my booked trips, if I am not going to do it anymore. | can delete a trip from my booked trips by following the path MyTrips \u003e Trip Name \u003e Delete Button .|\n| contact Site's Admin so that I can send my questions/ feedback regarding the use of the application. | can send messages to Site's Admin by filling in the Contact Form that I can find by clicking on the Contact Tab in the navbar.  |\n\n\n| Expectation (As a Site Admin, I want to...)  | Result (As a Site Admin, I...)    |\n| :---------------------------------: | :------------------------------:|\n| allow only registered users to use the website so that they can only access their own bike trip plans. | can allow only registered users to access the website to plan bike trips and each user can access only her/his trips. |\n| access the admin panel so that I can check and manage the items of the bike tour plans of each user. | can access the planned trips of the users in the admin panel (under the category Trips) and edit their items or delete their trips if needed. |\n| manage the list of bike routes and items so that I can keep up-to-date routes and lists of items. | can add, edit or delete the bike routes in the Admin Panel under the category Routes. I can add, edit or delete lists of items under the categories Bagss, Bikes, Clothes, Cooks, Electrics, Repairs, Sleeps, Toilets. |\n| review messages sent by users so that I can address their requests. | can check messages of site visitors by clicking on the category Contacts in the Admin Panel and reply to their requests. |\n| delete read \u0026 actioned users messages so that I do not action the same message twice. | can delete actioned users requests under the category Contacts in the Admin Panel. |\n\n\u003c/details\u003e\n\n\n\n### Lighthouse \n\nHere below the score resulting from Lighthouse testing for the Website.\n\n![Lighthouse testing](static/images/readme/lighthouse.jpeg)\n\n### Browser testing\n\nThe Website was tested on Google Chrome, Microsoft Edge, Safari, and Firefox with no issues.\n\n### Device testing\n\nThe 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, 1240px and up.\n\n### Mentor, family and friends testing\n\nMy mentor, my family and friends checked the site and helped to identify bugs and get a feeling about how the user-experience is perceived by visitors of the site.\n\n## Bugs\n\n### Fixed Bugs \n\n| Bug  | Fix  |\n| ------- | ------- |\n| There was a bug with the database. This bug did not allow me to add routes in the Admin Panel. | I realized that for EuroBike I was using the same database I used to do the CI walkthrough. Therefore I created a new database with Elephant SQL which I used just for EuroBike. |\n| CSS and JS were not loading when deploying to Heroku with Debug set to False | I added a few cloudinary parameters in settings.py and disabled cache. |\n\n\n### Unfixed Bugs\n\nWhen trying to add a new trip via mobile on Firefox, I got a Server Error(500). The trip was then added successufully under My Trips when I reloaded the My Trips page but when I clicked on it, the trip details view was not working and throwing again the Server Error(500). I tried to access the mentioned trip via other browser than Firefox but I got the same Error. I managed to delete this Trip with Server Error from the Admin Panel.  \n\n## Deployment to Heroku\n\nTo deploy this page to Heroku from its GitHub repository, the following steps were taken:\n\n### Create the Heroku App:\n- Log in to [Heroku](https://dashboard.heroku.com/apps) or create an account.\n- On the main page click the button labelled New in the top right corner and from the drop-down menu select \"Create New App\".\n- Enter a unique and meaningful app name.\n- Next select your region.\n- Click on the Create App button.\n\n### Attach the Postgres database:\n- In the Resources tab, under add-ons, type in Postgres and select the Heroku Postgres option.\n- Copy the DATABASE_URL located in Config Vars in the Settings Tab.\n\n### Prepare the environment and settings.py file:\n- In your GitPod workspace, create an env.py file in the main directory.\n- Add the DATABASE_URL value and your chosen SECRET_KEY value to the env.py file. \n- Update the settings.py file to import the env.py file and add the SECRETKEY and DATABASE_URL file paths.\n- Comment out the default database configuration.\n- Save files and make migrations.\n- Add Cloudinary URL to env.py\n- Add the cloudinary libraries to the list of installed apps.\n- Add the STATIC files settings - the url, storage path, directory path, root path, media url and default file storage path.\n- Link the file to the templates directory in Heroku.\n- Change the templates directory to TEMPLATES_DIR\n- Add Heroku to the ALLOWED_HOSTS list the format ['app_name.heroku.com', 'localhost']\n\n### Create files / directories\n- Create requirements.txt file\n- Create the directory templates in the main directory.\n- Create a file named \"Procfile\" in the main directory and add the following: web: gunicorn project-name.wsgi\n\n### Update Heroku Config Vars\nAdd the following Config Vars in Heroku:\n- SECRET_KEY value \n- CLOUDINARY_URL\n- PORT = 8000\n- DISABLE_COLLECTSTATIC = 1\n\n### Deploy\n- NB: Ensure in Django settings, DEBUG is False\n- Go to the deploy tab on Heroku and connect to GitHub, then to the required repository. \n- Scroll to the bottom of the deploy page and click Enable Automatic Deploys for automatic deploys.\n- Click View to view the deployed site.\n\nThe site is now live and operational.\n\n## Technologies used \n\n### Languages\n\n- HTML\n- CSS\n- JavaScript\n- Python\n\n### Frameworks - Libraries - Programs Used\n- [Django](https://www.djangoproject.com/)\n- [Bootstrap](https://getbootstrap.com/)\n- [Heroku](https://www.heroku.com/)\n- [GitHub](https://github.com/)\n- [Gitpod](https://gitpod.io/) \n- [PostgreSQL](https://www.postgresql.org/) - to create database for this project\n- [Crispy Forms](https://django-crispy-forms.readthedocs.io/en/latest/) - to manage Django Forms\n- [W3C](https://www.w3.org/) - for HTML \u0026 CSS Validation.\n- [PEP8 Online](http://pep8online.com/) - to validate the Python code\n- [Jshint](https://jshint.com/) - to validate javascript code\n- [Chrome Dev Tools](https://developer.chrome.com/docs/devtools/) - for overall development of the website\n- [Google Fonts](https://fonts.google.com/)\n- [Font Awesome](https://fontawesome.com/)\n- [draw.io](https://app.diagrams.net/) - to create the Database diagram\n- [Colors](https://coolors.co/) - to create the color palette of the readme\n- [Techsini](https://techsini.com/multi-mockup/index.php) - mockup generator for the readme image at the top showing how the site looks on different screens\n- [iloveimg](https://www.iloveimg.com/) - to compress and crop images\n- [tiny-img](https://tiny-img.com/webp/) - to convert images to webp format - since there are lots of images in the site, the webp format allows the website to be lighter when loading \n- [Figma](https://www.figma.com/)\n- [Pexals](https://www.pexels.com/) - source of the video popping out when the contact form has been sent\n\n### Django Packages\n\n- [Allauth](https://django-allauth.readthedocs.io/en/latest/installation.html) - authentication library used to allow user to create accounts\n- [Summernote](https://summernote.org/) - to manage the Admin Panel\n- [Cloudinary](https://cloudinary.com/)\n\n### Python libraries \n- [datetime](https://docs.python.org/3/library/datetime.html) - Python library to import time to not allow users to set date in the past when selecting start date of a trip\n- [autoslug](https://pypi.org/project/django-autoslug/) - to create slugs\n\n## Credits\n\n### Code used\n- [Walkthrough Project of Code Institute](https://github.com/Code-Institute-Solutions/blog) - this project was very helpful to understand how Django works and to create the Routes and My Trips pages\n- [MyMealPlanner](https://github.com/AliOKeeffe/PP4_My_Meal_Planner/tree/main) - this project was studied in-depth as example for building a Django full stack application \n- [My Pantry Note](https://github.com/WojtekKamilowski/CI_PP4_MPN/tree/main) - this project was another big source of inspiration for EuroBike\n- [Rosie Bootstrap Walkthrough Project of Code Institute](https://github.com/Code-Institute-Solutions/InteractiveFrontendDevelopment-Resume/tree/master) - this project helped me to better understand how Bootstrap works\n- [Stack Overflow](https://stackoverflow.com/)\n- [Bootstrap 5.1](https://getbootstrap.com/docs/5.1/getting-started/introduction/)\n\n### Media \n- [EuroVelo](https://en.eurovelo.com/) - a big thanks goes to EuroVelo for providing the routes and the description and information about each route\n- [Wikipedia](https://www.wikipedia.org/) - for the image of the logo of EuroVelo and the maps of all the EuroVelo routes\n- [OnlyLuxe](https://onlyluxe.com.au/) - for the background image of the Homepage\n- [Pinterest](https://www.pinterest.it/) - for the image used for each route\n- [Cyclingabout](https://www.cyclingabout.com/understanding-the-types-of-touring-bikes-available/) - for the list of bike types in the add trip form\n- [Canyon](https://www.canyon.com/en-it/blog-content/gravel-bike-news/bikepacking-kit-list/b02122021-1.html) - for the list of bags in the add trip form\n- [Bickepacking](https://bikepacking.com/bikepacking-101/pack-list) - for the bikepacking tips about the other categories included int he add trip form\n\n## Acknowledgements\n\nMy mentor Antonio for offering always invaluable insights and advices to improve the quality of my projects. \n\nMy wife, for the passion she shares for my work and for being the number 1 tester of my sites. \n\nSean of Code Institute, he helped me a great deal in solving the CSS JS bug. \n\nKay of Code Institure, for being a passionate and motivating tutor. \n\nMy biking friends of Prague, for all the biking trips we enjoyed together.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faedoardo1990%2Feu-bikeplanner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faedoardo1990%2Feu-bikeplanner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faedoardo1990%2Feu-bikeplanner/lists"}