diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..96f871801 --- /dev/null +++ b/.gitignore @@ -0,0 +1,55 @@ +node_modules/ + +# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider +# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839 +# User-specific stuff +.idea/**/workspace.xml +.idea/**/tasks.xml +.idea/**/usage.statistics.xml +.idea/**/dictionaries +.idea/**/shelf + +# Generated files +.idea/**/contentModel.xml + +# Sensitive or high-churn files +.idea/**/dataSources/ +.idea/**/dataSources.ids +.idea/**/dataSources.local.xml +.idea/**/sqlDataSources.xml +.idea/**/dynamic.xml +.idea/**/uiDesigner.xml +.idea/**/dbnavigator.xml + +# Mongo Explorer plugin +.idea/**/mongoSettings.xml + +# File-based project format +*.iws + +# mpeltonen/sbt-idea plugin +.idea_modules/ + +# JIRA plugin +atlassian-ide-plugin.xml + +# Cursive Clojure plugin +.idea/replstate.xml + +# SonarLint plugin +.idea/sonarlint/ + +# Crashlytics plugin (for Android Studio and IntelliJ) +com_crashlytics_export_strings.xml +crashlytics.properties +crashlytics-build.properties +fabric.properties + +# Editor-based Rest Client +.idea/httpRequests + +# Config file +mongodb.config.json + +# Environment file +.env diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 000000000..b58b603fe --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/.name b/.idea/.name new file mode 100644 index 000000000..b3f2e495f --- /dev/null +++ b/.idea/.name @@ -0,0 +1 @@ +Inkboard \ No newline at end of file diff --git a/.idea/Inkboard.iml b/.idea/Inkboard.iml new file mode 100644 index 000000000..d4dd87220 --- /dev/null +++ b/.idea/Inkboard.iml @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 000000000..a55e7a179 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/compiler.xml b/.idea/compiler.xml new file mode 100644 index 000000000..1a2fb332e --- /dev/null +++ b/.idea/compiler.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/cs4241_assignment_2.iml b/.idea/cs4241_assignment_2.iml new file mode 100644 index 000000000..0c8867d7e --- /dev/null +++ b/.idea/cs4241_assignment_2.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/dataSources.xml b/.idea/dataSources.xml new file mode 100644 index 000000000..518879b2b --- /dev/null +++ b/.idea/dataSources.xml @@ -0,0 +1,12 @@ + + + + + mongo + true + com.dbschema.MongoJdbcDriver + mongodb+srv://canvas.ng8r68j.mongodb.net/?retryWrites=true&w=majority + $ProjectFileDir$ + + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 000000000..7b4368e1c --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 000000000..bcc1b4e84 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 000000000..94a25f7f4 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml new file mode 100644 index 000000000..c70980f48 --- /dev/null +++ b/.idea/watcherTasks.xml @@ -0,0 +1,25 @@ + + + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index 1ba2c7a4c..cf817fb82 100644 --- a/README.md +++ b/README.md @@ -1,116 +1,52 @@ -Assignment 3 - Persistence: Two-tier Web Application with Database, Express server, and CSS template -=== +# Inkboard +By Cameron Jacobson -Due: September 22nd, by 11:59 AM. +Website link: http://157.230.2.81:443/ -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.) -Baseline Requirements ---- +Inkboard is a synced Canvas for people to work together and contribute to a collaborative drawing. Users can log in draw strokes with +custom colors and thickness. Users can also clear the canvas of strokes that they have made. The server will differentiate +which strokes were added by which user and update the database accordingly. -Your application is required to implement the following functionalities: +### CSS Framework +I used the MUI css framework because I wanted to use the material design specification. MUI was much simpler than the +official Material design components, and my website didn't have a terribly complex. -- 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. +I also used custom css that I had built up over project 1 and 2. A lot of custom css was used in each page of this +application to ensure components lined up properly. Here are some examples: +- Using flexbox to arange components on the screen +- Limiting scrolling to the canvas instead of the entire page +- Ensuring the web app takes up the entire screen. No more and no less. +- General tweaks to margins and padding to make components fit well together -Your application is required to demonstrate the use of the following concepts: +### Express Middleware +I used the following pieces of middlewear: +- **morgan**: Used for general server logging +- **passport**: Used as an authenticator for users logging in +- **passport-local**: Specific method for logging users in. I used this method because it was the simplest to implement. +- **express-session**: Used for storing login sessions (automatically through passport) +- **express.json**: Used to make parsing json from the client simpler -HTML: -- HTML input tags and form fields of various flavors (`