About Me
I am a passinate graduate student in uOttawa focus on full stack web development with Front-end using React and Back-end using Node.js.
About Best Camp in Canada Sites
I made this site as part of the Colt Steele Web Developer 2022 Bootcamp. This is not the original version Colt made and has been modififed and updated to make it better in terms of styling and functionality. The app is called YelpCamp and provides full CRUD (Create Read Update Destroy) functionality to create and post information about camping grounds across the world. The app also contains full authentication and authorization. It also features some extent of security from attacks (discussed below). One of the key features of the app is geocoding using the Mapbox API. Read ahead to look deeper into the website and all the technologies and packages used to create it.
Technologies
- HTML, CSS, JavaScript
- Express
- MongoDB
- Mongoose
- Bootstrap
- EJS
- These are all major technologies used to create yelpcamp. Node packages are not included in this list.
HTML, CSS, JavaScript
HTML (Hyper-Text Markup Language), CSS (Cascading Style Sheets) and JavaScript is necessary to build any webpage. The app uses dynamic HTML (skip to EJS to read more) and some custom styles. JavaScript is used to do basically everything throughout the app. CSS is used for styling certain elements while Javascript is used for all the logic and also used with EJS while rendering pages.
Express
Express.js, or simply Express, is a back end web application framework for Node.js. Express is a package but its used so extensively and is basically the heart of the backend. Express was used to build the server of YelpCamp. The server features express router and controller functionality (Model–view–controller). Express with the help of mongoose talks with the databse and is also essential in rendering dynamic HTML.
MongoDB and Mongoose
MongoDB is a source-available cross-platform document-oriented database program. It's a no SQL database, the deployed version of the app uses Atlas (also mongo) for its database. YelpCamp uses 3 collections in the database - Users, Campgrounds and Reviews. These are connected via relationships. Mongoose helps integrate MongoDB with the Express.
Bootstrap
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. Its is the main source of styling for the website. Bootsrap gives components with styles applied to them to directly use inside your code so you dont have to worry about writing hundreds of lines of CSS. Its also the most popular CSS framework out there.
EJS
EJS or Embedded JavaScript is a simple templating language that lets you generate HTML markup with plain JavaScript. No reinvention of iteration and control-flow. It's just plain JavaScript. This also helps mix Javascript into HTML to perform logic in Templates and all the pages of the websites were made with EJS. The syntax can be a bit weird but it does the job.