diff --git a/.bash_history b/.bash_history new file mode 100644 index 000000000..86f9d56c7 --- /dev/null +++ b/.bash_history @@ -0,0 +1,6 @@ +npm i MongoDB +npm i mongodb +npm i express +npm install mongodb +npm install mongodb +npm install mongodb diff --git a/.config/configstore/update-notifier-npm.json b/.config/configstore/update-notifier-npm.json new file mode 100644 index 000000000..fddb34017 --- /dev/null +++ b/.config/configstore/update-notifier-npm.json @@ -0,0 +1,4 @@ +{ + "optOut": false, + "lastUpdateCheck": 1663616468399 +} \ No newline at end of file diff --git a/.config/configstore/update-notifier-pnpm.json b/.config/configstore/update-notifier-pnpm.json new file mode 100644 index 000000000..3a71eed73 --- /dev/null +++ b/.config/configstore/update-notifier-pnpm.json @@ -0,0 +1,4 @@ +{ + "optOut": false, + "lastUpdateCheck": 1663614991798 +} \ No newline at end of file diff --git a/.config/glitch-package-manager b/.config/glitch-package-manager new file mode 100644 index 000000000..adcdaedec --- /dev/null +++ b/.config/glitch-package-manager @@ -0,0 +1 @@ +pnpm diff --git a/.env b/.env new file mode 100644 index 000000000..b3d6b68f7 --- /dev/null +++ b/.env @@ -0,0 +1,5 @@ +GLITCH_DEBUGGER= + # Scrubbed by Glitch 2022-08-29T16:46:41+0000 + # Scrubbed by Glitch 2022-09-02T02:09:19+0000 + # Scrubbed by Glitch 2022-09-07T13:13:24+0000 + # Scrubbed by Glitch 2022-09-15T16:35:37+0000 diff --git a/.glitch-assets b/.glitch-assets new file mode 100644 index 000000000..55bdb2306 --- /dev/null +++ b/.glitch-assets @@ -0,0 +1,7 @@ +{"name":"cart.jpg","date":"2022-09-02T21:19:39.028Z","url":"https://cdn.glitch.global/82c1bd81-7308-4ea7-bc2b-b0ff2ce9acff/cart.jpg","type":"image/jpeg","size":6033,"imageWidth":355,"imageHeight":340,"thumbnail":"https://cdn.glitch.global/82c1bd81-7308-4ea7-bc2b-b0ff2ce9acff/thumbnails%2Fcart.jpg","thumbnailWidth":330,"thumbnailHeight":317,"uuid":"sqi04pu0WQd2lpl3"} +{"uuid":"sqi04pu0WQd2lpl3","deleted":true} +{"name":"cart.png","date":"2022-09-02T21:19:39.028Z","url":"https://cdn.glitch.global/82c1bd81-7308-4ea7-bc2b-b0ff2ce9acff/cart.png","type":"image/jpeg","size":6033,"imageWidth":355,"imageHeight":340,"thumbnail":"https://cdn.glitch.global/82c1bd81-7308-4ea7-bc2b-b0ff2ce9acff/thumbnails%2Fcart.jpg","thumbnailWidth":330,"thumbnailHeight":317,"uuid":"sqi04pu0WQd2lpl3"} +{"uuid":"sqi04pu0WQd2lpl3","deleted":true} +{"name":"cart.png","date":"2022-09-02T21:19:39.028Z","url":"https://cdn.glitch.global/82c1bd81-7308-4ea7-bc2b-b0ff2ce9acff/cart.png","type":"image/jpeg","size":6033,"imageWidth":355,"imageHeight":340,"thumbnail":"https://cdn.glitch.global/82c1bd81-7308-4ea7-bc2b-b0ff2ce9acff/thumbnails%2Fcart.jpg","thumbnailWidth":330,"thumbnailHeight":317,"uuid":"sqi04pu0WQd2lpl3"} +{"uuid":"sqi04pu0WQd2lpl3","deleted":true} +{"name":"cart.png","date":"2022-09-02T21:19:39.028Z","url":"https://cdn.glitch.global/82c1bd81-7308-4ea7-bc2b-b0ff2ce9acff/cart.png","type":"image/jpeg","size":6033,"imageWidth":355,"imageHeight":340,"thumbnail":"https://cdn.glitch.global/82c1bd81-7308-4ea7-bc2b-b0ff2ce9acff/thumbnails%2Fcart.jpg","thumbnailWidth":330,"thumbnailHeight":317,"uuid":"sqi04pu0WQd2lpl3"} diff --git a/.glitchdotcom.json b/.glitchdotcom.json new file mode 100644 index 000000000..afcf92ab0 --- /dev/null +++ b/.glitchdotcom.json @@ -0,0 +1 @@ +{"appType":"node","buildDirectory":null} diff --git a/.node-gyp b/.node-gyp new file mode 100644 index 000000000..e69de29bb diff --git a/README.md b/README.md index 1ba2c7a4c..6a7481ec3 100644 --- a/README.md +++ b/README.md @@ -1,116 +1,69 @@ +Catbase: Assignment 3 - Persistence: Two-tier Web Application with Database, Express server, and CSS template === -Due: September 22nd, by 11:59 AM. +https://a3-jackleserman-catbase.glitch.me/ -This assignnment continues where we left off, extending it to use the most popular Node.js server framework (express), -a database (mongodb), and a CSS application framework / template of your choice (Boostrap, Material Design, Semantic UI, Pure etc.) +Have you ever wanted a database to store and share cat pictures? Well catbase is the solution! Catbase allows users to add, remove and update cat photos posted to a community wall where users can title their photographs and share for the world to see! The hardest parts of this project was getting oauth to work, and rewriting the client side functions to work with mongoDB. Formerly, reodering the items on the database was done client side, but with the addition of mongoDB I had to move this server side, and have the server post a request to "redraw" the table. I also ran into challenges with oauth. Getting pages to redirect during oauth was very challenging. I described my oauth logic below in my technical acheivements. I used Chota to handle css as it has a minimalist UI and great documentation. I wrote some custom CSS to make the table easier to read. -Baseline Requirements +I also used express middleware in this website. Some examples include... +1) app.set() -- for using handlebars +2) app.use() -- handling cookies +3) redirect -- redirecting users during login +4) render -- rendering elements on page +5) app.post() -- posts data but in one line, avoiding the chaos of A2 + +Acheivements --- -Your application is required to implement the following functionalities: +*Technical* -- a `Server`, created using Express (no alternatives will be accepted for this assignment) -- a `Results` functionality which shows all data associated with a logged in user (except passwords) -- a `Form/Entry` functionality which allows users to add, modify, and delete data items (must be all three!) associated with their user name / account. -- Use of at least five [Express middleware packages](https://expressjs.com/en/resources/middleware.html). Explore! One of these five middleware -can be a custom function that you write yourself; if you choose to do this, make sure to describe what this function is in your README. -- Persistent data storage in between server sessions using [mongodb](https://www.mongodb.com/cloud/atlas) -- Use of a [CSS framework or template](https://github.com/troxler/awesome-css-frameworks). -This should do the bulk of your styling/CSS for you and be appropriate to your application. -For example, don't use [NES.css](https://nostalgic-css.github.io/NES.css/) (which is awesome!) unless you're creating a game or some type of retro 80s site. +- (10pts) OAuth authentication: I used express to handle the intake of passwords and username, as well as their hashing, and mongoDB to store the data. Express checks for a user on the mongoDB base, and if the user exists, it checks the password. If both cases pass, the user is logged in! This was challenging as I really struggled to get the pages to redirect and reload. I also created a register functionality on a different page to add user data to mongoDB. I used this method because I simply enjoyed working with mongoDB, and find it fun! Test Account: (username - webware_grader, pass - gompei) -Your application is required to demonstrate the use of the following concepts: +- Use of MongoDB: I use mongoDB to handle data storage for both cat data and passwords. This allows for the data to be stored more reliably and has a layer of redundancy in case the server crashes. -HTML: -- HTML input tags and form fields of various flavors (`