a3-mayank-govilla

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.env

README.markdown

@@ -1,116 +1,30 @@
 Assignment 3 - Persistence: Two-tier Web Application with Database, Express server, and CSS template
 ===
 
-Due: September 23th, by 11:59 AM.
+## BoarderLine
+Server link: https://salty-ridge-71972.herokuapp.com/
 
-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.)
+The idea of this application is a quick and easy way to write and review small text blurbs. Write small notes and share with others who can write comments about it! 
 
-Baseline Requirements
----
+Originally, I wanted to make something like google docs that would allow people to share small bits of text and review it with others. The real-time connection to have multiple people editing a document seemed out of the scope of this project so I scaled back to just having one owner with many reviewers. 
 
-Your application is required to implement the following functionalities:
-
-- 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.
-
-Your application is required to demonstrate the use of the following concepts:  
-
-HTML:  
-- HTML input tags and form fields of various flavors (`<textarea>`, `<input>`, checkboxes, radio buttons etc.)
-- HTML that can display all data *for a particular authenticated user*. Note that this is different from the last assignnment, which required the display of all data in memory on the server.
-
-Note that it might make sense to have two pages for this assignment, one that handles login / authentication, and one that contains the rest of your application.
-For example, when visiting the home page for the assignment, users could be presented with a login form. After submitting the login form, if the login is 
-successful, they are taken to the main application. If they fail, they are sent back to the login to try again. For this assignment, it is acceptable to simply create 
-new user accounts upon login if none exist, however, you must alert your users to this fact.  
-
-CSS:  
-- CSS styling should primarily be provided by your chosen template/framework. 
-Oftentimes a great deal of care has been put into designing CSS templates; 
-don't override their stylesheets unless you are extremely confident in your graphic design capabilities. 
-The idea is to use CSS templates that give you a professional looking design aesthetic without requiring you to be a graphic designer yourself.
-
-JavaScript:  
-- At minimum, a small amount of front-end JavaScript to get / fetch data from the server. 
-See the [previous assignment](https://github.com/cs4241-19a/a2-shortstack) for reference.
-
-Node.js:  
-- A server using Express, at least five pieces of Express middleware, and a persistent database (mongodb).
-
-General:  
-- Your site should achieve at least 90% on the `Performance`, `Best Practices`, `Accessibility`, and `SEO` tests 
-using Google [Lighthouse](https://developers.google.com/web/tools/lighthouse) (don't worry about the PWA test, and don't worry about scores for mobile devices).
-Test early and often so that fixing problems doesn't lead to suffering at the end of the assignment. 
-
-Deliverables
----
-
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements. A good potential starting point is to use the "hello-express" project template inside of Glitch; this appears as an option when you hit the "New Project" button. Use the work you did in the last assignment as a reference to implement functionality.
-2. If you developed your project locally, deploy your project to Glitch (unless completing the alternative server technical acheivement described below), and fill in the appropriate fields in your package.json file.
-3. Test your project to make sure that when someone goes to your main page on Glitch, it displays correctly.
-4. Ensure that your project has the proper naming scheme `a3-yourfirstname-yourlastname` so we can find it.
-5. Fork this repository and modify the README to the specifications below.
-6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a3-firstname-lastname`.
-
-Acheivements
----
-
-Below are suggested technical and design achievements. You can use these to help boost your grade up to an A and customize the 
-assignment to your personal interests, for a maximum twenty additional points and a maximum grade of a 100%. 
-These are recommended acheivements, but feel free to create/implement your own... just make sure you thoroughly describe what you did in your README, 
-why it was challenging, and how many points you think the achievement should be worth. 
-ALL ACHIEVEMENTS MUST BE DESCRIBED IN YOUR README IN ORDER TO GET CREDIT FOR THEM.
-
-*Technical*
-- (10 points) Implement OAuth authentication, perhaps with a library like [passport.js](http://www.passportjs.org/). 
-*You must either use Github authenticaion or provide a username/password to access a dummy account*. 
-Course staff cannot be expected, for example, to have a personal Facebook, Google, or Twitter account to use when grading this assignment. 
-Please contact the course staff if you have any questions about this. THIS IS THE HARDEST ACHEIVEMENT OFFERED IN WEBWARE. You have been warned!  
-- (5 points) Instead of Glitch, host your site on a different service like [Heroku](https://www.heroku.com) or [Digital Ocean](https://www.digitalocean.com). Make sure to describe this a bit in your README. What was better about using the service you chose as compared to Glitch? What (if anything) was worse? 
-- (5 points) Get 100% (not 98%, not 99%, but 100%) in all four lighthouse tests required for this assignment.  
-
-*Design/UX*
-- (10 points) Make your site accessible using the [resources and hints available from the W3C](https://www.w3.org/WAI/), Implement/follow twelve tips from their [tips for writing](https://www.w3.org/WAI/tips/writing/), [tips for designing](https://www.w3.org/WAI/tips/designing/), and [tips for development](https://www.w3.org/WAI/tips/developing/). *Note that all twelve must require active work on your part*. 
-For example, even though your page will most likely not have a captcha, you don't get this as one of your twelve tips to follow because you're effectively 
-getting it "for free" without having to actively change anything about your site. 
-Contact the course staff if you have any questions about what qualifies and doesn't qualify in this regard. 
-List each tip that you followed and describe what you did to follow it in your site.
-- (5 points) Describe how your site uses the CRAP principles in the Non-Designer's Design Book readings. 
-Which element received the most emphasis (contrast) on each page? 
-How did you use proximity to organize the visual information on your page? 
-What design elements (colors, fonts, layouts, etc.) did you use repeatedly throughout your site? 
-How did you use alignment to organize information and/or increase contrast for particular elements. 
-Write a paragraph of at least 125 words *for each of four principles* (four paragraphs, 500 words in total). 
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-## Your Web Application Title
-
-your glitch (or alternative server) link e.g. http://a3-charlie-roberts.glitch.me
-
-Include a very brief summary of your project here. Images are encouraged, along with concise, high-level text. Be sure to include:
-
-- the goal of the application
-- challenges you faced in realizing the application
-- what authentication strategy you chose to use and why (choosing one because it seemed the easiest to implement is perfectly acceptable)
-- what CSS framework you used and why
-  - include any modifications to the CSS framework you made via custom CSS you authored
-- the five Express middleware packages you used and a short (one sentence) summary of what each one does. If you use a custom function for *one* (and one alone) middleware please 
-add a little more detail about what it does.
+Some major challenges that I faced when writing this application:
+- Unable to use the mongodb connection through WSL (had to develop in Windows)
+- Cookie Max age is in ms (I had it set to 60000 which only lasted a minute and was really confusing)
+- Styling in general is pretty difficult to make things look good
+- Logging out from the github auth required an extra step to destroy the user's session and not just logout
+- I had been very used to relational databases before this, so I kept thinking about things using joins/foreign keys which don't exist. Instead, every document can just store the information it needs
 
 ## Technical Achievements
-- **Tech Achievement 1**: I used OAuth authentication via the GitHub strategy
+- **Authentication**: I used OAuth authentication via passport and the GitHub strategy
+- **Express Server**: Created a RESTful API with express to manage the data
+- **MongoDB Connection**: Connected the application with mongodb to host the data 
+- **Express Middleware**: Passport, Body-parser, Session, Static Server, View Engine
+- **Hosting on Heroku**: Hosted the Node application on Heroku. This was much nicer than using glitch because it has a command line tool which can link directly to the code I have on my machine rather than having to import it from github everytime (it is pretty similar, but the flow in heroku is a bit nicer). 
 
 ### Design/Evaluation Achievements
-- **Design Achievement 1**: I followed the following tips from the W3C Web Accessibility Initiative...
+- **Lighthouse Tests**: Fixed code to ensure all lighthouse tests pass at 100%
+![lighthouse test 1](/img/passing-lighthouse.png)
+![lighthouse test 2](/img/passing-lighthouse2.png)
+- **View Engine EJS**: Used a view engine to render the pages with some context. This could still be improved upon to make dynamic pages based on the user's priveleges
+- **Bootstrap CSS**: Included the bootstrap framework to make the grid styling 'easier'. 

README.md

@@ -0,0 +1,43 @@
+## IDEA:
+
+Board shares where you can invite others to review your writing/brainstorm (only you are allowed to edit)
+
+Object Models:
+- Board
+    - Owner: User
+    - Content: string
+    - Reviewers: [uuid]
+
+- User
+    - Id: uuid
+    - Name: string
+    - Email: string
+
+- Comment (belongs to Board)
+    - Id: uuid
+    - Board: BoardId
+    - Author: User
+    - Content: string
+
+User Flow:
+1.  Login to the application with github
+2.  Homepage with options to view recent boards or create a new one
+    a. recent boards are all ones that you've created sorted by updated_at
+
+On Create New Board
+1.  Send post request with initial data for the name/owner of the board
+2.  Return edit board page with the data of the new board
+3.  During editing, cache the changes and every few seconds, send PATCH to update content
+
+On View Recent Board
+1.  Send get request with the id of the board 
+2.  If logged in user is the owner: open the edit board page with the data of the requested id
+    Else if logged in user is a reviewer: open the review board with the data to make comments
+    Else: REFUSE
+
+Tasks:
+- Authentication with Github
+- Create views for the edit board, comment board, and home pages
+    - Test the view renderer first
+- Style the Views
+- Update and Pull data the mongodb client in Node