Travel Planner 🗺️✈️ (Capstone)

Final Project of the CS50 Web Development with Python and JavaScript

Task 💻

To design and implement a web application of your own with Python and JavaScript. I chose to do a travel planning website that aids users in preparation for any trips while also exploring where they can travel.

Distinctiveness and Complexity 🌟

As part of the requirements, I was supposed to make a project that is very different from all the previous ones done in the course. On top of being a unique idea, it satidfies the distinctiveness and complexity by;

• Allowing multiple data input: The user is not limited to adding one activity to the itinerary or one expense to the budget at a time. They can add multiple activities and add trip expenses all at once. The user is also allowed to make multiple modifications to the itinerary and budget.
• Containing Map integration: Maps were added, one on the Destinations page in the Map view and one on the destination guide for each destgination. For the former, it displays markers for each available destination and for the latter, the markers for each attraction found at each place. The source map is OpenStreetMap and Leaflet was the JavaScript library that allows the addition of maps.
• Forcing One review per user per destination: The app prevents the user from writing multiple reviews for each destination. Once the user has written their review, they can edit it and not add another one for a place.
• Using stars instead of integers for ratings: Using the HiddenInput field, the user selects the number of stats (e.g. 5-star, 4-star etc) and not a number.

The application was built using Django including 7 models in the back-end and utilises 3 different JavaScript scripts along with the aforementioned Leaflet for the maps. Every feature and page is mobile-responsive and this is due to adding Bootstrap 4 and custom CSS.

Specification 📝

These are the features of the Travel Planning website;

• Destination list - this is basically all the destinations that the user can travel to. It is avaliable in both grid view and map view.
• Destination guide - for each destination, there is a description of the place, the map of the destination list of attractions, user reviews and a Plan Trip button for logged-in users.
• Creating a new trip - Speaking of which, in addition to the Plan Trip button from the destination guides, the user can go to the Create New Trip page where they can select the destination, the dates travelled and write their budget for the trip. After that, a page for their newly-planned trip will be generated.
• Writing an itinerary - Users can start adding/modifying items and activities to the itinerary list. This will also include the dates and the cost for each activity.
• Writing a review - Users can give their opinion and rating of a place using stars. They can also edit the same review if they had already wrote one for the destination, instead of writing multiple reviews.
• Trip Budget Planner - Users can monitor their costs and expenses for the trip and see if they are within their budget or above it.

Contents 📁

These are the files and folders that make up the project;

• capstone - main project directory
  • _init_.py - generated by Django
  • asgi.py - generated by Django
  • urls.py - contains project URLs
  • settings.py - Django settings for the project
  • wsgi.py - generated by Django
• travel - main apllication directory
  • migrations - folder storing all the migrations made
  • static/travel - stores all static files (CSS, JavaScript, JSON and images)
    • attraction_images - has pictures of the attractions at each available destination
    • css -
      • styles.css - stylesheet containing custom CSS
    • destination_images - has pictures of the all the available destinations in the project
    • fixtures - contains all JSON files that creates data to be stored in the database
      • attraction_fixture.json - provides all the data about the attractions and is inserted into the database
      • destination_fixture.json - provides all the data about the destinations and is inserted into the database
    • home_icons - contains the icons that appear on the home page
    • js
      • destination_guide.js - JavaScript file that handles map display for all destinations along with the star rating
      • map_view.js - JavaScript file that handles map display on the Map view of the destinations.html file.
      • search_destination.js - hsndles the search ability
  • templates - contains all the application templates (Django HTML files)
    • index.html - template for Home page for unauthenticated users (guest view)
    • layout.html - base template that contains the navigation bar which is extended to other templates.
    • dashboard.html - Home page for logged-in users, shows the user's upcoming trips
    • login.html - template for Login page-
    • register.html - template for Register page
    • trip.html - template forpage that contains all the user's trip details
    • newtrip.html - template that contains form that allows the user to create a new trip
    • destination_guide.html - template that outlines how the destination page will be displayed
    • destination_list.html - template that shows page that displays all the available destinations, grouped by region/continent.
    • create_itinerary.html - template for page that contains form that allows user to add activity along with the date and time.
    • edit_itinerary.html - template for page where the user can edit, add to or delete activities from the itinerary
    • edit_budget.html - template for page where the user can create, edit or delete expenses
  • _init_.py - generated by Django
  • admin.py - used to register models in the Django Admin Interface
  • apps.py - generated by Django
  • forms.py - defines all the model forms used in the application, ItineraryFornmSet and ExpenseFormSet allows more than one form for trip activities and expenses to be displayed
  • models.py- defines all the models used to modify and add to the database using Django
  • tests.py - generated by Django
  • urls.py - contains URLs used in the app
  • views.py - has all the application views
• dbsqlite3 - database that has all the applciation data
• manage.py - generated by Django

How to run the application 💾

1. Clone the repository into your system
2. Ensure that you have Python and Django installed in your system.
3. Run the following ccommand python manage.py makemigrations travel to make migrations for the app.
4. Apply the migrations to the app by writing python manage.py migrate
5. Run python manage.py runserver to start the web server.
6. Visit the website on your web browser http://127.0.0.1:8000/.
   • To log in as a user, the username is paul and the password is 123456.
   • To log in as an admin, the username is pauladmin and the password is Mwan1987!.
   • Alternatively, you can just create an account by going to the Register page.

Functionality ⚙️

Like with all the other projects, a screencast was recorded for demonstation of the travel planning website and how it is used. if you want to see it in action, click the thumbnail below;