The project is inspired on the idea to make a website where everyone who is interested in traveling can have the opportunity to share his/her experience.This project is the third part of the milestone project. The system database is made in MongoDB. For the making of the functions it has been programing in Pyhton. The main focus was on the "crud" functions, making the project available to create,read,update and delete data by the users who must register to be able to use the system. The porject has been deploy in Heroku. The technologies used for the making of this project are in this readme file later on. The main goal of this project is to be able to share with other your traveling experiences, where you have been, what you did and if you would recommend the place you've been to anybody else who shares the same interest as you.
The purpose of this site is to :
-
Make available for people to share their travel stories.
-
Exchange experiences about the places they have been to.
-
Advice each other about places they should or not travel to.
-
As a FirstTime Visitor, i want to be able to easy navegate through the site.
-
As a FirstTime Visitor, it must be easy for me to understand what the site is about.
-
As a FirstTime Visitor, i must be able to see different pages of the site .
-
As a FirstTime Visitor, i must read and understand the texts.
-
As a FirstTime Visitor, The site must be responsive in several devices
-
As a FirstTime Visitor, the pictures must have a good resolution.
-
As a FirstTime Visitor, i want to be able to manage information in an easy way
-
As a Returning Visitor, i want to see improvments in the website.
-
As a Returning Visitor, i want to see updates available.
-
As a Returning Visitor, i want to see new features.
-
As a Frequent User, it's important to see the development of the site, that makes it more interesting to come back to.
-
As a Frequent User, i want to be able to comunicate with other members.
-
As a Frequent User, i want to be able to manage my information as easy and fast as possible.
Color Scheme
-
The main color of the website is grey and white for the pages.
-
Red and blue are for input, edit and delete buttons.
-
Cyan is the color for the login and reg user buttons.
-
White with dark text shadow is for the navbar titles and footer texts.
-
The rest of the text are in light-blue and black color.
Dancing Script, cursive is a lively casual script where the letters bounce and change size slightly. Caps are big, and goes below the baseline. Dancing Script references popular scripts typefaces from the 50's. It relates to Murray Hill (Emil Klumpp. 1956) in his weight distribution, and to Mistral (Roger Excoffon. 1953) in his lively bouncing effect. This type of typography suits at it best in friendly, spontaneous and informal look.
Raleway is an elegant sans-serif typeface family. It is a display face and the download features both old style and lining numerals, standard and discretionary ligatures, a pretty complete set of diacritics, as well as a stylistic alternate inspired by more geometric sans-serif typefaces than it's neo-grotesque inspired default character set.
Sans serif it is usually used for titles that seek to make an impact, for headlines that must be read from a distance or for reading bodies that are relatively short.
Imagery is used most for the carousel of the website. The images are the face of this site and reflect at an early stage the purpose of this site. The images are inspired in different cities around the world, each one representing a continent. For now the images are only availbale in the carousel, but in a near future the purpose is to be able to store pictures in tyhe database that every register user might be able to load up.
-
Responsive on all devices.
-
Interactive elements.
-
Responsive navbar.
-
Footer with link to pages related with what the system is about.
-
Carousel, making the site more attractive to users ad easy to understand what it is about.
-
Register page where users can register to make use of the website.
-
Login page where only register users can have access to.
-
Gitpod is used as the enviroment program were the page was made.
-
Github is used as the development platform, you can upload your code and make repositories. This platform, gives other users the opportunity to see your repositories if made as open source code.
-
HTML is the language use to make websites. Since it is the standard markup languages for webpages.
-
CSS is the language used to style the pages made in HTML.
-
W3C validator is the tool we use to check the markup validity in HTML.
-
As mentioned above, this tool is use to check for errors in the css code.
-
Materialize is a modern responsive CSS framework based on Material Design by Google.
-
Jquery jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License.
-
Python is an interpreted, high-level and general-purpose programming language. It's design philosophy emphasizes code readability with its notable use of significant whitespace.
-
MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas.
-
Heroku is a cloud platform as a service (PaaS) supporting several programming languages. Heroku has been in development since June 2007, when it supported only the Ruby programming language, but now supports Java, Node.js, Scala, Clojure, Python, PHP, and Go. Heroku is said to be a polyglot platform as it has features for a developer to build, run and scale applications in a similar manner across most languages.
-
The fonts used in this project are taken from Googlefonts.
-
I use this site to get inspiration from other projects and to search informtaion regarding source code.
-
Font Awesome is a font and icon toolkit based on CSS and Less.
-
Reposinator is use to check how your website look in different devices in responsive mode.
-
Use to search for error in the making of the webpage.
-
PEP 8 is a comprehensive styling guide for your Python code. PEP 8’s aim is to bring all Python together under one styling guide.
-
Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries. It has no database abstraction layer, form validation, or any other components where pre-existing third-party libraries provide common functions.
The language this project such as HTML, CSS, Pyhton were tested for errors and warnings in the code.
1. W3C Validator HTML.
2. W3C validator CSS.
3. Pep8
-
As a first time Visitor, i want to be able to easy navegate through the website.
a. Since the site is very simple build it makes it easy for the user to navigate. -
As a FirstTime Visitor, it must be easy for me to understand what the site is about.
a. The site is easy to understand what it is about due to the homepage that reflect with the carousel what it's about. -
As a FirstTime Visitor, i must be able to see different pages of the site.
a. The website is build with a navmenu that makes it possible for the user to navigate through the website. b. There is also a search box where the user can search by contries that different travelers have been to. -
As a FirstTime Visitor, i must read and understand the texts.
a. The text in this website are for the most labels and messages written in an easy way in english so that everyone can understand. -
As a FirstTime Visitor, The site must be responsive in several devices.
a. The website has been tested in several devices like Iphone, Ipad, Android and Laptop. -
As a FirstTime Visitor, the pictures must have a good resolution.
a. The pictures have been carefully selected and have a good resolution shown in the website. -
As a FirstTime Visitor, i want to be able to manage information in an easy way
a. The site contain oth a register and login section. b. Once logged in, the user have access to other features in the navbar making it possible to manage information. -
As a returning time visitor, i expect to see improvments, updates and new features.
a. There will be updates like change of color, pictures and layouts. b. Also new features like be able to make your own gallery with pictures c. And the search feature will be able not only for countries but also for users and city names -
As a Returning Visitor, i want to see updates available.
a. Updates will be done regulary to improve the system and also to make the use of it more interesting for all the members and at the same time make it more attractive for new visitors to join our page . -
As a Returning Visitor, i want to see new features.
a. We are planning in the development of the site like a personal profile page. b. Also the possibbility to upload images c. The making of a gallery photo album for each user to be able to set up their own pictures -
As a Frequent User, it's important to see the development of the site, that makes it more interesting to come back to.
a. We are planning the possibbility to send messages between members. b. Photo Galleries from different places available not only for members but for visitors as well c. The possibility to log in as a member or as visitor if you just want to see the site and not become a member. -
As a Frequent User, i want to be able to comunicate with other members.
a. The most ambitious project is to make a chat channel so members can communicate direct with each others. b. There site is also expected to be able in different languages making it possible for more people to interact. -
As a Frequent User, i want to be able to manage my information as easy and fast as possible.
a. Just as a first time visitor, Frequent users have also the possibbility to manage their information i an easy way. b. To make this possible, updates will be done like extending the profile page. The sections for adding, update and delete will also be updated. c. The frequent user will also as a member have access in the coming development of the website to the chat channel, not only to speak with other members but also with support in case of any questions. -
During my test period i focus on the user stories.
1. Chrome
2. Firefox
3. Safari
4. Microsoft edge
- The responsive part has also been tested in http://www.responsinator.com/ for
1. Ipad
2. Iphone
3. Android
4. Laptop
Friends and family tested the site by loggin in and writing about there stories. This was also made to point out any bugs and/or user experience issues.
- The footer changes places in the ipad when there are no registers in the profile page.
- In the galaxy S5 the footer text in some parts appears one on top another. Also the buttons in the profile page appears not at the same space.
- Sometimes the date that you have chosen, do not show, but the actaul date. To fix this, push the clear button on the calendary and try again.
To deploy this porject, i used the hosting platform of Github and heroku The step to deploy this project were as follows.
The Project was deployed to Heroku using the following steps...
1. Log in to your Heroku account 2. Choose the project you want to deploy 3. Go to the settings tab and at the domains section, you find the link to deploy your project 4. Copy your app link and paste it in your browser or push the link to direct come toyour project
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...
Log in to GitHub and locate the GitHub Repository
At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
You should now have a copy of the original repository in your GitHub account.
1. On GitHub, navigate to the main page of the repository.
2. Above the list of files, click "Code".
3. Mark the HTTPS tag ad press the copy icon at the end of the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made. Type "git clone", and then paste the URL you copied.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
6. Press enter and you should see the following code on the screen
7. Open the index.html in the folder that you clone the poject.
Code
- Materialize Library used throughout the project in the making of the website and to make it responsive.
Content
The content (this means the coding) for this project was taken from the mini project tutorial from Code Institute, also part of the code is my own code and ideas and guidence from my mentor Antonio Rodriguez.
Media
All Images were taken from the following site:
Acknowledgements
My Mentor Antonio Rodriguez for continuous helpful feedback.
Tutor support at Code Institute for their support and help.
Tim Nelson for the easy to understand tutorial from Code Institute that i use for guidence in this project.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
