The best way to learn new technology is by creating projects using those technology. So, to learn MongoDB, Angular.js, Node.js and Express we will create Travel website.
www.spotdekho.com – is travel website built using MongoDB, Node.js, Angular.js and Express .
Spotdekho.com is full fledged Web application which could locate a list of tourist places in India. The user not only finds all the tourist places in the city, but also he can make a choice of the best tourist spot .The user can also map the location of the nearby famous places on Google Map. User can also provide rating/comment to a particular tourist spot and can view rating/ comments provided by other users.
Various features of travel website – Spotdekho :
1. Admin page, which have below features:
i. Create, Read, Update, Delete various tourist spots.
ii. Create, Read, Update, Delete offers in a tourist spot.
iii. Add sub listing to an existing tourist spots.
iv. Review/ Approve Comments.
v. Upload Image to the server.
2. Search option – to search various tourist spots.
3. Login Page – User login, so that user can comment, provide ratings, view/update their previous ratings.
4. View the details of a tourist spots.
5. Provide/view ratings of a tourist spots.
6. Provide/ view comments/reviews of a tourist spots.
7. Google map for the tourist spot.
8. List places to visit as a sub listing of a tourist spots.
9. Contact-US form.
10. Advertise with US form. So, that users can advertise with the travel website.
11. List Multiple pics for a tourist spots.
12. Secure website – Used Let’s encrypt for https.
|Operating system||Ubuntu – 14.04|
|Server Deployment||Google Cloud Engine|
|Version Control Tool||GitHub|
|Text Editor||Atom / Sublime|
|SSL Certificates||Let’s Encrypt|
Folder/File Structure of the Web-Application (Spotdekho.com )
File and folder structure of the web-application can be seen in below snapshot:
Description of Folder Structure
.git = This folder is automatically created by git, and contain files of version control tool “git”.
cert = certificates file (specific to website & company)
config = Contain passport.js file, required during login.
models = Contain User.js file, required during login.
node_modules = dependencies (installed by “npm install” from “package.json” file)
public/css = Contain bootstrap files. Files related to styling of the website.
public/fonts = Contains files related to fonts of the website.
public/img = Contains images viewed in this website.
public/stylesheets = css file for styling
routes/ = Self written JS files for routing and other usage
views/ = Jade files which is converted to HTML and viewed in the browser.
package.json = contains list of dependencies
Code Flow Diagram of travel website : spotdekho.com
Travel website (spotdekho) code flow diagram can be viewed at: SP-code-flow-diag
As mentioned this website has comment section, where users can view/ add there comments for a particular tourist spot. You can view code flow diagram of this functionality at: Comment-code-flow-diag
Code flow diagram for ContactUs functionality is available at: Contact-US-code-flow-diag
Code flow diagram for Login functionality can be found at: Login-code-flow-diag
As this website has search option with autocomplete feature. Code flow diagram for search is available at: Search-dest-code-flow-diag
Travel Website (Spotdekho) Snapshot:
– Search option – to search various tourist spots
– Login Page – User login, so that user can comment, provide ratings, view/update their previous ratings
– View the details of a tourist spots
– Provide/view ratings of a tourist spots
– Provide/ view comments/reviews of a tourist spots.
– Google map for the tourist spot
– List places to visit as a sub listing of a tourist spots
– Contact-US form
– Advertise with US form. So, that users can advertise with the travel website
– Admin page, which can Create, Read, Update, Delete various tourist spots and other options :
Please follow below steps to get started :
1.Create Google cloud set up or any cloud services setup.
Note : If you are using local system then this step is not required.
2. Create instance / machine in google cloud or in any other cloud services.
3. Install NodeJS. ( I am using Ubuntu 14.0.4 machine from Google cloud ). Below link states the steps to install mongodb in Ubuntu 14.0.4 server
4. Install Mongodb. Below link states the steps to install mongodb in Ubuntu 14.0.4 server.
5. Install git
sudo apt-get install git
6. Clone repo from git
git clone “https://github.com/TechieMaterials/spotdekho.git”
7. Run npm install
sudo npm install
8. Create certificate file and copy it in spotdekho/cert folder :
sudo mkdir certificate
sudo openssl genrsa -des3 -out server.key 2048
sudo openssl rsa -in server.key -out server.key.insecure
sudo mv server.key server.key.secure
sudo mv server.key.insecure server.key
sudo openssl req -new -key server.key -out server.csr
sudo openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
sudo bash -c “openssl rsa -in server.key -text >> private.pem”
sudo bash -c “openssl x509 -inform PEM -in server.crt > public.pem”
sudo mv private.pem privatekey.pem
sudo cp server.csr certrequest.csr
sudo openssl x509 -req -in server.csr -signkey privatekey.pem -out certificate.pem
sudo cp /home/techiematerials/certificate/certificate.pem /home/techiematerials/spotdekho/cert/
sudo cp /home/techiematerials/certificate/certrequest.csr /home/techiematerials/spotdekho/cert/
sudo cp /home/techiematerials/certificate/privatekey.pem /home/techiematerials/spotdekho/cert/
9. start mongodb :
sudo mkdir -p /home/techiematerials/mongodb/data/db
sudo mongod –dbpath “/home/techiematerials/mongodb/data/db/” –logpath “/home/techiematerials/mongodb/data/logfile” &
10. Start nodeJS
sudo nodemon web.js
You will see output as :
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node web.js`
Your application is up and running, check by opening IP_addr:8080 in your web browser.
Enabling Authentication using Google, Facebook and Twitter – Obtaining API keys
Follow below steps and then get API keys, so that authentication with google, facebook and twitter works. Once you receive the key, update .env file with the same.
To use any of the included APIs or OAuth authentication methods, you will need to obtain appropriate credentials: Client ID, Client Secret, API Key, or Username & Password. You will need to go through each provider to generate new credentials.
- Visit Google Cloud Console
- Click on the Create Project button
- Enter Project Name, then click on Create button
- Then click on APIs & auth in the sidebar and select API tab
- Click on Google+ API under Social APIs, then click Enable API
- Next, under APIs & auth in the sidebar click on Credentials tab
- Click on Create new Client ID button
- Select Web Application and click on Configure Consent Screen
- Fill out the required fields then click on Save
- In the Create Client ID modal dialog:
- Application Type: Web Application
- Authorized redirect URI: http://localhost:8080/auth/google/callback
- Click on Create Client ID button
- Copy and paste Client ID and Client secret keys into
http://my-awesome-app.herokuapp.com/auth/google/callback respectively. The same goes for other providers.
- Visit Facebook Developers
- Click My Apps, then select *Add a New App from the dropdown menu
- Select Website platform and enter a new name for your app
- Click on the Create New Facebook App ID button
- Choose a Category that best describes your app
- Click on Create App ID button
- In the upper right corner click on Skip Quick Star
- Copy and paste App ID and App Secret keys into
- Note: App ID is clientID, App Secret is clientSecret
- Click on the Settings tab in the left nav, then click on + Add Platform
- Select Website
http://localhost:8080under Site URL
Note: After a successful sign in with Facebook, a user will be redirected back to home page with appended hash
#_=_ in the URL. It is not a bug. See this Stack Overflow discussion for ways to handle it.
- Sign in at https://apps.twitter.com
- Click Create a new application
- Enter your application name, website and description
- For Callback URL: http://127.0.0.1:8080/auth/twitter/callback
- Go to Settings tab
- Under Application Type select Read and Write access
- Check the box Allow this application to be used to Sign in with Twitter
- Click Update this Twitter’s applications settings
- Copy and paste Consumer Key and Consumer Secret keys into