MAJOR PROJECT

 ADDING ENVIRONMENT VARIABLES CONFIGURING ATLAS ON RENDER CLICK ON LOGS.CLICK ON CONNECT, SOME IP ADDRESSES ARE SHOWN COPY THEM. NOW,ON ATLAS GO TO NETWORK ACCESS, ADD THOSE IP ADDRESSES THAT ARE COPIED FROM RENDER. NOW ON RENDER CLICK ON MANUAL DEPLOY AND CLICK ON CLEAR BUILD CACHE AND DEPLOY. A LINK IS DISPLAYED.IT IS THE URL OF OUR PROJECT PROJECT IS DEPLOYED SUCCESSFULLY!!!!!!!

 BEFORE ADDING FILES( THE PREVIOUS POST) CREATE A REPO (Wanderlust)  AND MAKE SURE IT IS DISPLAYED IN THE TERMINAL OF VS CODE. COMMANDS: git add origin paste the link of git repo git remote -v to verify ON RENDER CLICK ON GITHUB AND SELECT REPOSITORY . NOW,FILL THE FORM WHERE name,build command(npm install) , start command(node app.js) IN THE ADVANCED OPTIONS CLICK no ON AUTO DEPLOY TO THE DEPLOYMENT TO BE SUCCESSFUL ADD ENVIRONMENT VARIABLES VERIFY THOROUGHLY AS IT MIGHT EFFECT THE DEPLOYMENT.

 DELETE UNWANTED FOLDER LIKE CLASSROOM NOTE: WE NEVER DEPLOY .env FILE AS IT CONTAINS SENSITIVE INFORMATION. SOME CHANGESARE MADE INORDER TO HIDE THE SECRET KEY. IT IS STORED IN .env FILE SECRET =ANY RANDOM STRING IN APP.JS const store = MongoStore . create ({   mongoUrl : dbURL ,   crypto : {     secret : process . env . SECRET ,   },   touchAfter : 24 * 3600 , }); const sessionOptions = {   store ,   secret : process . env . SECRET ,   resave : false ,   saveUninitialized : true ,   cookie : {     expires : Date . now () + 7 * 24 * 60 * 60 * 1000 ,     maxAge : 7 * 24 * 60 * 60 * 1000 ,     httpOnly : true ,   }, }; TO INITIALIZE: git init TO FIND STATUS: git status TO AVOID ADDING SOME FOLDERS (.env,node_modules),WE CREATE  A FOLDER, touch .gitignore TO ADD FILES, git add. TO COMMIT , git commit -m "Add Project files"

 WE USE RENDER TO DEPLOY. SIGNUP  IN OUR PACKAGE.JSON WE ADD A NEW IMPORTANT CODE FOR THE DEPLOYMENT TO BE SUCCESSFUL. {   "engines" :{     "node" : "22.12.0"   },   "dependencies" : {     "@mapbox/mapbox-sdk" : "^0.16.1" ,     "@maptiler/geocoding-control" : "^2.1.6" ,     "@maptiler/sdk" : "^3.0.1" ,     "cloudinary" : "^1.21.0" ,     "connect-flash" : " . . .

 WE PREVIOUSLY USED EXPRESS SESSIONS , BUT THEY ARE ONLY USED FOR DEVELOPMENT. THEY CANNOT  BE USED FOR PRODUCTION ENVIRONMENT.HENCE,WE USE MONGOOSE SESSIONS. TO INSTALL : npm i connect-mongo USING MONGO CONNECT(REFER DOCUMENTATION FOR USAGE ) const store = MongoStore . create ({   mongoUrl : dbURL ,   crypto : {     secret : "secret71" ,   },   touchAfter : 24 * 3600 , }); cons CRYPTO IS USED FOR PROTECTION AND TOUCH AFTER IS USED TO UPDATE THE SESSION AFTER A GIVEN TIME (IN SECONDS) WHEN THERE IS NO CHANGE/UPDATE IN THAT PARTICULAR SESSION.  SIMPLY, A SESSION IS UPDATED WHENEVER,IT IS REFRESHED. INORDER TO OVERCOME THIS (THAT IS WE DONT WANT TO REFRESH THE SESSION EVEN THOUGH THERE IS NO UPDATE ) WE USE TOUCH AFTER. THE store VARIABLE IS PASSED TO THE SESSION OPTION const sessionOptions = {   store ,   secret : "secret71" ,   resave : false ,   saveUninitialized : true ,   cookie : {     ex...

 WE USE MONGO ATLAS   FOR DEPLOYEMENT  SIGNUP FIRST AND CREATE AN  USER. AN USER WILL BE ISSUED WITH AN USERNAME (WHILE SIGNING UP SELECT THE FREE OPTION AND AWS) AND PASSWORD(AUTO-GENERATED) COPY IT FOR FURTHER USE. LATER WE NEED TO CONFIRM THE CONNECTION AN IP ADDRESS IS ISSUED BY DEFAULT. NEXT, WE NEED TO CONNECT OUR APPLICATION. SELECT DRIVERS AND COPY THE CONNECTION STRING mongodb+srv://Abhishek71: <db_password> @cluster0.wefeo.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0 IN THE PLACE OF  <db_password>   PASTE THE PASSWORD. NOW , IN ORDER TO CONNECT THE APPLICATION , IN OUR . env FILE  ATLASDB_URL =mongodb+srv://A THE CONNECTION STRING IS PASTED IN APP.JS const dbURL = process . env . ATLASDB_URL ; async function main () {   await mongoose . connect ( dbURL ); } NOW RUN APP.JS WE COULD SEE NO LISTINGS AS THE DATA IS NOT BEEN INITIALIZED. ADD NEW LISTINGS, TO VERIFY IF ADDED IN THE DATABASE OR ...

 WE ADD A SEAARCH BAR BY USING BOOTSTRAP. IN THE NAV-BAR.EJS IT IS ADDED BETWEEN THE EXPLORE AND ADD BUTTON  < div class = "navbar-nav ms-auto" >         < form           class = "d-flex"           role = "search"           method = "get"           action = "/listings/search?q=location"         >           < input             class = "form-control me-2 search-inp"             type = "search"             placeholder = "Search By location"             aria-label = "Search"             name = "location"           />           < button class = "btn btn-search" type = "submit" >     ...

 A TAX-SWITCH IS ADDED INORDER TO DISPLAY THE TAXES OF THE LISTINGS AFTER A CLICK IT IS ADDED IN THE SAME <div> BLOCK OF filter  COMPLETE FILTER.EJS < nav   class = "navbar-bottom navbar-expand-md bg-body-light border-bottom sticky-top" > <%- include ( "../includes/flash.ejs" ) %>   < div class = "container-fluid" >     < div class = "collapse navbar-collapse" id = "navbarNavAltMarkup" >       < div class = "navbar-nav" >         < div id = "filters" class = "nav-link sticky-top" >           < a href = "/listings?category=Trending" class = "filter" >             < div >< i class = "fa-solid fa-fire" ></ i ></ div >             < p > Trending </ p >           </ a >           < a href = ...

 WE ADD FILTERS TO SHOW OUR LISTINGS. IN THE SCHEMA OF LISTING A NEW FIELD IS ADDED BY THE NAME "category".  IN MODELS (LISTINGS.JS) category : {     type : String ,     enum : [       "Mountains" ,       "Beaches" ,       "Skyscrapers" ,       "Apartments" ,       "Rooms" ,       "Pools" ,       "Arctic" ,       "Farms" ,       "Hotels" ,       "Lakes" ,       "Camps" ,       "Forts" ,       "Adventures" ,       "others" ,     ],     required : true ,   }, A FILTER.EJS IS CREATED. < nav   class = "navbar-bottom navbar-expand-md bg-body-light border-bottom sticky-top" > <%- include ( "../includes/flash.ejs" ) %>   < div class = "container-fluid" >     < div class = "collapse na...