This project consists of a website for traveler's community WILD ARGENTINA, where users can browse, discover and share experiences lived in different regions of Argentina. WILD ARGENTINA is all about connection to nature, tradition and Argentina's vast diversity. Check out the Live Project

WILD ARGENTINA traveler community does not exist. The creation of this project is purely educative.

• As a First Time Visitor, I expect the purpose of the website to be explicit.
• As a First Time Visitor, I consider smooth navigation through content to be a key aspect.
• As a First Time Visitor, I want the content of the website to be relevant and concise.
• As a First Time Visitor, I would like to browse places, foods and experiences.

• As a Returning Visitor, I expect to see new entries and updates.
• As a Returning Visitor, I want to be able to share my own experiences.
• As a Returning Visitor, I would like to check activity on social media platforms.
• As a Returning Visitor, I want to check each experience geographic location.

• As a Frequent User, I would like to interact with other members of the community.
• As a Frequent User, I want to have access to new features.
• As a Frequent User, I expect to have control over my information.
• As a Frequent User, I want to be able to get the exact location for each experience.
• As a Frequent User, I would like to have the possibility of saving experiences for quick access.
• As a Frequent User, I want to be able to easily share experiences.

To provide WILD ARGENTINA with a presentation website, where its users can can browse, discover and share experiences.

To showcase an attractive, well-designed flask based python application that's easily updated and maintained.

• The project is presented in a multipage layout, based on flask and controlled by python to communicate to a backend database served by MongoDB. Rendered templates customized with HTML5, CSS3, Javascript and Jinja.
• Fully responsive on different screen sizes.
• It counts with a contact form inside a modal pop-up.
• Full CRUD functionality. (Create, Read, Update and Delete experiences and profiles)

• User's travel journal. For those users who would like to read about someone else's adventures.
  • Trip maker functionality with travel map, where users will be able to make a schedule of activities.
  • Saved experiences section.
  • Experience's comment section.
  • Pagination for experiences.
  • Expanded information area for each region, with relevant media and links.
  • Awareness section. Where users can be informed on how to preserve the enviroments visited, and how to help the local communities.
  • Aesthetic animations.
  • Pick location interactive map in "Share" form. (instead of latitude/longitude input fields)

The content is distributed throughout several pages.

• Main page:

  • Image slider showcasing organization's header and the different regions to discover.
  • Navigation section, where the user can choose to Browse, Discover or Share experiences.
  • About WA section, where the mission and objectives of the organization are made known to the user.

• Discover:

  • List of regions, alongside with images and description, for the user to choose one and have access to all experiences in each one.

• Browse:

  • Search bar to query the experience collection in the database.
  • Experiences section, where all latest experiences are displayed in big clickable cards.

• Experience:

  • When an experience is selected, the user will be redirected to the experience page, where pictures, information, upload date and exact geographical location is displayed.

For the wireframes, Figma software has been used to lay out the foundations of the website.

Wireframes

The content is easy to navigate and is neatly divided in sections.

The colour palette is dark, looking to highlight the brightness of the images to attract attention to them.

The fonts are:

• Montserrat. Bold and with a strong connection to the content. "The old posters and signs in the traditional Montserrat neighborhood of Buenos Aires inspired Julieta Ulanovsky to design this typeface and rescue the beauty of urban typography that emerged in the first half of the twentieth century."
• Lora. In order to provide a nice contrast with the headers, with its brushed curves and roots in calligraphy, Lora is a well-balanced contemporary serif.

• HTML5
• CSS3
• JavaScript
• Python

• Jinja 3.0.1
  • Template engine for python.
• Flask 2.0.1
  • Web framework for python.
• MaterializeCSS 1.0.0
  • Responsive design and css styling.
• MongoDB
  • Document oriented database.
• Heroku
  • Cloud platform service.
• Jquery CDN
  • Javascript.
• W3Schools
  • CSS documentation.
• Figma:
  • Figma was used to create the wireframes.
• GitHub:
  • Code repository.
• Gitpod
  • Gitpod was used as IDE and for version control.
• Font Awesome:
  • Font Awesome was used solely for social media icons in footer.
• Google Fonts:
  • Google fonts was used to import "Montserrat" and "Lora" family fonts.
• Chrome Developer Tools:
  • Used to debug and style.
• EmailJS:
  • Provided backend email service to contact form.
• Google Maps JavaScript API:
  • Provided backend map service.

Click here to read testing documentation.

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository, just above the "Settings" button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/jjlg90/Wild-Argentina

7. Press Enter. Your local clone will be created.

1. Log in to MongoDB.
2. Within the "Cluster1" tab selected, click on "Connect".
3. Select "Connect your application".
4. Select Python version 3.6 or later.
5. Copy connection string and then paste it to env.py
6. Create an instance of PyMongo and pass the application to that instance.

• Like: mongo = PyMongo(app)

Preparing Local workspace for Heroku:

1. Create requirements.txt file. CLI: pip freeze --local > requirements.txt

2. Creating Procfile file. Type in file web: python app.py and save.

Create Heroku application:

1. Log in Heroku.
2. Click New button.
3. Select Create a new app.
4. Enter the app name.
5. Select region.
6. Under Settings, click Config Vars to add Configuration Variables from the env.py file.
7. In your CLI install Heroku by typing npm install -g heroku
8. Select Deploy option.
9. Under Deployment method select the GitHub option.
10. Select Automatic deploys from the main branch and select Deploy Branch.
11. Click Open App button located in the top-right corner of your Heroku account.

Pictures and videos were taken from the following websites.

• arg.jpg
• purmamarca.jpeg
• wild.jpg
• cuyo.jpg
• northwest.jpg
• mesopotamia.jpg
• pampas
• patagonia

• My Mentor Oluwafemi Medale who guided me through development.
• Stack Overflow helped me to find answers about structure and styling from other people's inquiries, posts and threads.