Website project – Create Website using Node.js, Mongodb, Angular.js and Express

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 .

Get Code for Free                             Donate by Buying Complete Working Code 

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.

Index :

  1. Various features of travel website – Spotdekho.com

  2. Project Requirements

  3. Folder/File Structure of the Website

  4. Description of Folder Structure

  5. Get Code

  6. Code Flow Diagram

  7. Website Snapshot

  8. Getting Started

  9. Enabling Authentication using Google, Facebook and Twitter – Obtaining API keys

 

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.

 

Project Requirements:

Operating system Ubuntu – 14.04
Database MongoDB
JavaScript run-time environment Node.js
Web-Framework Express
JavaScript framework Angular.js
Server Deployment Google Cloud Engine
Version Control Tool GitHub
Text Editor Atom / Sublime
Automation PERL
Analytics Google Analytics
Web Server Nginx
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/javascripts/app = Self created JS files for Admin pages

public/javascripts/lib = angular.js files, jquery files, dependencies file downloaded from internet

public/javascripts/site = JS files for Front-End

public/javascripts/site/lib = downloaded from internet

public/javascripts/app.js = self written for Front-End

public/javascripts/site/validator.min.js = downloaded from internet

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

 

Get Code

.env
app.js
package.json
web.js
config/passport.js
models/User.js
public/javascripts/app.js
public/javascripts/app/…
public/javascripts/site/…
public/Misc/PerlScript/
routes/…
views/…
views/site/…
views/site/partials/…
views/site/partials/account/…

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 

url : https://www.spotdekho.com

 

– Login Page – User login, so that user can comment, provide ratings, view/update their previous ratings

URL : https://www.spotdekho.com/login

 

– View the details of a tourist spots

URL : https://www.spotdekho.com/venues/-y2uobuyVW 

 

– 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

URL: https://www.spotdekho.com/contactus

– Advertise with US form. So, that users can advertise with the travel website

URL : https://www.spotdekho.com/Advertise-hotels

 

– Admin page, which can Create, Read, Update, Delete various tourist spots and other options : 

 

Getting Started

Please follow below steps to get started :

1.Create Google cloud set up or any cloud services setup.

https://www.techiematerials.com/google-cloud-set-up/

        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.

https://www.techiematerials.com/create-instance-machine-google-cloud-platform-gcp/

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

https://www.techiematerials.com/nodejs-installation-ubuntu-server/

4. Install Mongodb. Below link states the steps to install mongodb in Ubuntu 14.0.4 server.

https://www.techiematerials.com/mongodb-installation-ubuntu-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

cd spotdekho/

sudo npm install

8. Create certificate file and copy it in spotdekho/cert folder :

cd ~

sudo mkdir certificate

cd 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

cd /home/techiematerials/mongodb/data

sudo mongod –dbpath “/home/techiematerials/mongodb/data/db/” –logpath “/home/techiematerials/mongodb/data/logfile” &

10. Start nodeJS

cd /home/techiematerials/spotdekho

sudo nodemon web.js

You will see output as :

[nodemon] 1.11.0

[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 Javascript origins: http://localhost:8080
  • 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 .env

Note: When you ready to deploy to production don’t forget to add your new url to Authorized Javascript origins and Authorized redirect URI, e.g. http://my-awesome-app.herokuapp.com and 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 .env
  • 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
  • Enter http://localhost:8080 under 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 .env file

 

Get Code for Free                             Donate by Buying Complete Working Code 

Leave a Reply

Your email address will not be published. Required fields are marked *