z-branch_description.txt

Notice: 
- (git) if we make a change in branch2, but not stage/commit or already commit but not push, you will lose all the changes if you switch to other branches
- (mongoose) Cat.find returns array, whereas Cat.findById return 1 object
- (git) fastforward. seems like the master branch got fast forward due to no changes between merges. happens during v4. commit c2212c1..8baf3ef (8baf3efc44d94f08bfde541c0b794d5a7941558e)
- (req.user vs currentUser) 
	+ the ejs files {like /view/partials/header.ejs or views/campgrounds/show.ejs} can access currentUser but not req.user
	+ Vice versa, the js routes/files (like /routes/campgroundRoutes.js) can access req.user but not currentUser
- useful redirect: res.redirect('back');
- notice the EDIT/UPDATE route (name in form needs to match the schema of the mongoose db that needs to be updated)
---------------------------------------------
TECHNOLOGY
	* user profile page (1-name, 2-avatar or template photo, 3-content created by user)
	* admin account creatiion using secretCode checking when creating account, admin privilege
	* creation time using moment js
	* google maps API (maps js API + geocoder API)
	* css advance (background slider, ultimate footer)
	* flash message (connect-flash) using express-session, flash message for authentication
	* authorization using middleware, hiding buttons, refactor middleware
	* authentication using express-session, passportjs, passport-local, passport-local-mongoose (register, login, logout)
 	* mongoose (schema, connect mongodb, refactor, seed file seeds.js), data associations(change schema, req.user, save author’s name to a campground, comment automactically)
	* RESTful routes (INDEX, NEW, CREATE, SHOW, EDIT, UPDATE, DESTROY)
	* nodejs, expressjs routes (sub-route /campgrounds/comments), expressjs template ejs, expressjs partials template (header.ejs, footer.ejs), expressjs refactor routes
	* html, css (bootstrap)
---------------
DEVELOPMENT
	* user profile page (1-name, 2-avatar or template photo, 3-content created by user) (v18)
	* admin account creatiion using secretCode checking when creating account, admin privilege (v17)
	* creation time using moment js (v16)
	* google maps API (maps js API + geocoder API) (v15) 
	* style login/register using bootstrap, flash message for login authentication (v14)
	* css ultimate footer, add db camprgound price property (v13)
	* css background slider (v12)
	* refactor middleware, flash message (connect-flash) (v11)
	* campgrounds and comment RESTful routes (EDIT, UPDATE, DESTROY), authorization using middleware, hiding buttons (v10)
	* data associations between users and campgrounds (change schema, req.user, save author’s name to a campgroundautomactically) (v9)
	* data associations between users and comments (change schema, req.user, save author’s name to a comment automactically) (v8)
	* refactor routes (comments, camgrounds, user) (v7)
	* user schema, user RESTful routes (NEW, CREATE), passpord (register, login, logout) (v6)
	* style with bootstrap (v5)
	* comment RESTful NESTED routes (NEW, CREATE), expressjs partials template (header.ejs, footer.ejs) (v4)
	* refactor db (mongoose), seed file seeds.js, comment schema (v3)
	* campground RESTful routes(NEW, CREATE, SHOW), mongoose (schema, connect mongodb) (v2)
	* bootstrap, nodejs, expressjs routes, ejs, RESTful INDEX (v1)
---------------------------------------------
version 18
- branch: master (merge from v18userProfile)
- new development: add user profile page. Each profile page has 1-name, 2-avatar or template photo, 3-campgrounds created by user
- 4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
User profile
- add avatar, first name, last name, email to /models/campground.js
- modify register form to have the new attributes in /views/profile/register.ejs 
- modify the route NEW/CREATE user in /routes/userRoutes.js
- create new route router.get(/users/:id)…/views/profile/route_show.ejs
- modify to add <a> to user in /views/campgrounds/route_show.ejs and the header too


---------------------------------------------
version 17
- branch: master (merge from v17admin)
- new development: admin account creatiion using secretCode checking when creating account, admin privilege
- 4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
Add admin privilege and functions to admin	Add admin privilege 
- Modify db to add admin property {isAdmin: {type: Boolean, default: false} }
- Modify creation form to add admin secret code {/views/profile/route_register.ejs}  
- Modify route file to process the new input {routes/userRoutes.ejs}

Make edit/delete campground activated for admin
- Modify to activate button in view {/views/campgrounds/route_show.ejs }
- Modify middleware so admin can access the edit/update/delete routes

Make edit/delete comment activated for admin
- similar to above


---------------------------------------------
version 16
- branch: master (merge from v16createTime)
- new development: creation time for campground/ comment using moment js
- 4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
Show creation time 
- Install package moment
- include package in app.js (above passport config code)
- Update Campground and Comment Models {add createdAt}
- Use Moment in Your show.ejs File {for campground, and comment}


---------------------------------------------
version 15
- branch: master (merge from v15googleApi)
- new development: Maps js API + Geocoder API
- 4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
Resources
- https://www.youtube.com/watch?v=B4OuCjQLJ9k
- https://webdev.slides.com/nax3t/yelpcamp-refactor-google-maps#/
- https://github.com/nax3t/google-maps-api
- (official) https://developers.google.com/maps/documentation/

Setup Geocoder API + Add the secretKey to env
- Create a new project
- Enable Geocoder API
- Get key for Geocoding API {key2Secret no restrictions}
- install package dotenv. Add the GEOCODER_API_KEY=<key2Secret> to .env file
- protect the key2Secret from github by updating .gitignore file
- Add to application as ENV variable {GEOCODER_API_KEY=<key2Secret>}
- set env for heroku {heroku config:set GEOCODER_API_KEY=<key2Secret>}

Use Geocoder API (get coordinate from location)
- install package node-geocoder. include the mandatory package include to code /routes/campgrounds.js
- Modify campground model {add location:String, lat:Number, and lng:Number}
- Modify new and edit forms, add location input field {/views/campgrounds/route_new.ejs and route_edit.ejs}
- Update campground routes. modify campground create route (post), update route (put route) to get the coordinate data

Setup Maps js API 
- Select the same project
- Enable Maps js API
- Get Maps js API Key {like credentials, key1Public}
- Restrict Google Maps API Key {can add both local and heroku to key1}
- Add Google Maps scripts to your application {/views/campgrounds/route_show.ejs, edit to use key1Public}

Use Maps js API (show map on website)
- Display the campground location in show.ejs {add div for map in route_show.ejs, modify css /public/stylesheets/main.css}

Remove localhost from restriction. 
- Avoid people to take advantage of the public API key embedded in route_show.ejs
- Remove localhost from restriction in GCP Credentials page


---------------------------------------------
version 14
- branch: master (merge from v14uiImprovement)
- new development: flash message for authentication 
- 4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
Resources
- http://slides.com/nax3t/yelpcamp-refactor-ui

UI Improvements 
- template for all website with <div class="container"></div> in header and footer. Remove all container from all other files in views folders
- apply bootstrap to style login and register page
- add active class for login/register using ejs
- add flash message for login authentication using http://www.passportjs.org/docs/authenticate/


---------------------------------------------
version 13
- branch: master (merge from v13campgroundPrice)
- new development: css footer and db camprgound price property 
- 4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
Resources
- https://github.com/nax3t/dynamic-price
- https://webdev.slides.com/nax3t/yelpcamp-refactor-pricing#/

Add price to campground model
- Add price to campground model as a String datatype
- Add price to views/campgrounds/new.ejs and views/campgrounds/edit.ejs (new and edit forms)
- Add price to views/camprounds/show.ejs (campground show page)


---------------------------------------------
version 12
- branch: master (merge from v12backgroundSlider)
- new development: css background slider from Ian
- 4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
Resources
- https://github.com/nax3t/background-slider
- https://github.com/nnguyen-uark/yelpcamp-backgroundSlider

Refactor landing page
- Add background slide
- nn add icon and navbar brand for index, landing pages


---------------------------------------------
version 11
- branch: master (merge from v11flaskUi)
- new development: refactor middleware to seperate file, flash messages feature
- 4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
Refactoring Middleware
- /middleware/index.js

Flash Message: Adding Bootstrap	Adding in Flash
- demo working version
- install and configure connect-flash
- add bootstrap alerts to header {/views/partials/header.ejs}


---------------------------------------------
version 10
- branch: master (merge from v10updateDestroy)
- new development: RESTful routes (edit, update, destroy) for nested route comments
- 4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
Campground Edit and Update.	Editing Campgrounds
- add method-override {install package}
- add edit route for campgrounds {app.get(‘/campgrounds/:id/edit’)… /views/campgrounds/route_edit.ejs…build route_edit.ejs }
- add update route {app.put(‘/campgrounds/:id’) }
- add link to edit page {/views/campgrounds/route_show.ejs }
- fix $set problem

Campground Destroy.	Deleting Campgrounds
- add destroy route {app.delete(‘/campgrounds/:id’) }
- add delete button {/views/campgrounds/route_show.ejs }
- notice that we need to delete comments associated with the deleted campground link

Campground Authorization Part 1.	Authorization Pt 1: Campgrounds
- user can only edit his/her campgrounds {
 + idea is to use both grounds 1.middleware for the route 2.hide buttons
 + modify /routes/campgroundRoutes.js routes app.get(/edit) first
 + build middleware function checkCampgroundOwner for both edit and delete }
- user can only delete his/her campgrounds

Campground Authorization Part 2.	Authorization Pt 1b: Campgrounds
- hide/show edit and delete buttons {modify show views/campgrounds/route_show.ejs }

Comment Edit and Update.	Editting Comments
- add edit route for comments {
 + define edit route app.get(/campgrounds/:id/comments/:comment_id/edit }
- add edit button {
 + /views/campgrounds/route_show.ejs 
 + new file /views/comments/route_edit.ejs, then build it }
- add update route {
 + define update route app.put(/campgrounds/:id/comments/:comment_id, then build it }

Comment Destroy.	Deleteing Comments
- add destroy route {define route app.delete(/campgrounds/:id/comments/:comment_id) }
- add delete button {modify /views/campgrounds/route_show.ejs }
- notice that we need to delete in comments array within the campground link

Comment Authorization.	Authorization Part 2: Comments
- user can only edit his/her comments {checkCommentOwnership in commentRoutes.js}
- user can only delete his/her comments
- hide/show edit and delete buttons {modify /campgrounds/comments/route_show.ejs }


---------------------------------------------
version 9
- branch: master (merge from v9campgroundUser)
- new development: data associations (save author’s name to campgrounds automactically)
- 4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
YelpCamp: User Associations: Campground. User + Campgrounds
- prevent an unauthenticated user from creating a campground {add middleware to routes/campgroundsRoutes.js}
- save username & id to newly created campground {
 + comment out campground section in seeds.js
 + modify campgroundSchema- add author with id-referring data and username
 + modify routes/campgroundRoutes.js to add author
 + modify views/campgrounds/route_show.ejs to show author name }


---------------------------------------------
version 8
- branch: master (merge from v8commentUser)
- new development: data associations (save author’s name to a comment automactically)
- 4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
YelpCamp: User Associations: Comment. Users + Comments
- associate users and comments {
 + change commentSchema…author has id- Referencing data and username
 + change comment route router.post(/)
 + remove author field from the form /views/comments/new.ejs}
- save author’s name to a comment automactically

YelpCamp: User Associations: Comment	Users + Comments
- associate users and comments {
 + comment out comment section in seeds.js
 + modify commentSchema…author has id- Referencing data and username
 + modify routes/commentRoutes.js router.post(/)
 + modify comment display in /views/campgrounds/route_show.ejs
 + remove author field from the form /views/comments/new.ejs}
- save author’s name to a comment automactically


---------------------------------------------
version 7
- branch: master (merge from v7refactorRoutes)
- new development: refactor routes
- 4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
YelpCamp: Refactoring Routes	Refactor the routes
- use pexress router to reorganize all routes {/routes/index.js…campgrounds.js…comments.js, pass params in comments.js}


---------------------------------------------
version 6
branch: v6auth
new development: auth (express-session, passportjs, passport-local, passport-local-mongoose)
4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
YelpCamp: Adding Auth Pt 1	Add User Model
- install all packages needed for auth {sess, passport, passport-local, passport-local-mognoose, include in app.js}
- define user model {models/user.js has username-password, add passport-local-mongoose }

YelpCamp: Adding Auth Pt 2	Register
- configure passport 
- add register routes {app.get(/register)…app.post(/register) }
- add register template {register.ejs, build form }

YelpCamp: Adding Auth Pt 3	Login
- add login routes {app.get(/login)…app.post(/login) }
- add login template {app.post(/login), build form }

YelpCamp: Adding Auth Pt 4	Logout/ Navbar
- add logout route {app.get(/logout) }
- add links to navbar {for login, sign up, logout }
- prevent user from adding a comment if not signed in {build middleware function, protect 2 routes for comments}

YelpCamp: Adding Auth Pt 5	Show/ Hide Links
- show/hide auth links in navbar correctly


---------------------------------------------
version 5
branch: master (merge from v5styleShowPage)
new development: custom css file
---------------
YelpCamp: Styling Comments Pt1.	Style Show Page
- add sidebar to show page {bootstrap grid 3-9, comment well}
- display comments nicely
- customize photo

YelpCamp: Styling Comments Pt2
- include stylesheet css file {:mainProject/public/stylesheets/main.css…app.js…header.js}
- in show page, image padding and width


---------------------------------------------
version 4
branch: master (merge from v4comments)
new development: nested routes
4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
YelpCamp: Creating Comments Pt1	Comment New/Create. Start of v4
- discuss nested routes
	NEW	/campgrounds/:id/comments/new	GET
	CREATE	/campgrounds/:id/comments		 POST

- add the comment new routes {
	* Have 2 folders now views/campgrounds and comments. Change files location
	* Update app.js render, header/footer for route files 
	* build new route app.get(/campgrounds/:id/commentes/new…comments/new.ejs}
- add the new comment form (update form action, method)

YelpCamp: Creating Comments Pt2	
- add the Create route {lookup campground using id, create new comment, connect comment to campground, redirect campgrounds show page, app.post(/campgrounds/:id/comments), build button connection}


---------------------------------------------
version 3
branch: master (merge from v3seeds)
new development: mongoose exports,  mongoose seeds
4 terminals: mongod, nodemon, mongo for debug database, and 1 free terminal
---------------
YelpCamp: Refactoring App.js	
- create a models directory {:mainProject/models/campgrounds.js}
- use module.exports
- require everything correctly!

YelpCamp: Seeding the Database. Add Seeds File
- add a seeds.js files {seeds.js}
- run the seeds file every time the server starts {remove all camps- remove all comments- hardcode add camps- add comments, Referencing data }

YelpCamp: Comment Model.	Add the Comment model
- make our errors go away! {make Comment model comment.js with text-author, add comment property to campground db, Referencing data }
- display comments on campground show page {update app.get(/campgrounds/:id) to populate the comments, Referencing data }


---------------------------------------------
version 2
branch: master (merge from v2mongoose)
new development: mongoose, RESTful 
---------------
YelpCamp: Adding Mongoose	
- install and configure mongoose {localhost/yelp_camp}
- setup campground model {schema, model}
- use campground model inside of our routes {app.get(‘/campgrounds), app.post(‘/campgrounds) }

YelpCamp: Campground Show Page
- add mongoose db to yelpcamp
- define the RESTful api {
1. INDEX	/index  		GET
2. NEW   	/camgrounds/new	GET
3. CREATE	/camgrounds		POST
4. SHOW	/campgrounds/:id	GET
}
- add description to our campground model {campgroundSchema, recreate collection}
- add a show route/template {app.get(/camgrounds/:id)…rename to campgrounds.ejs, button on index.ejs, build campgrounds.ejs, update new.ejs}


---------------------------------------------
version 1
branch: master
development: bootstrap, nodejs, expressjs
---------------
YelpCamp: Initial Routes	
- add landing page {app.get(‘/’), … landing.ejs}
- add campgrounds page that lists all campgrounds {app.get(‘/campgrounds), …campgrounds.ejs}

YelpCamp: Layout	
- create our header and footer partials
- add in bootstrap

YelpCamp: Creating Campgrounds	
- setup new campground POST route {app.post(‘/campgrounds), …campgrounds.ejs, app.get(/campgrounds/new)…new.ejs}
- add in body-parser
- setup route to show form
- add basic unstyled form

YelpCamp: Styling Campgrounds	
- add a better header/title {campgrounds.ejs, jumpbotron}
- make campgrounds display in a grid

YelpCamp: Styling Nav and Forms	
- add a navbar to all templates