Proposal: Harold Hearst, Demi Karavoussianis, Kyle Reese, Thomas White

.gitignore

@@ -0,0 +1,8 @@
+*.DS_Store
+node_modules/
+.gitconfig
+.glitch-assets
+shrinkwrap.yaml
+public/bundle.js
+database.lite
+npm-debug.log

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Program",
+      "program": "${workspaceFolder}\\server.js"
+    }
+  ]
+}

README.md

@@ -1,51 +1,79 @@
-# cs4241-FinalProject
+# cs4241-FinalProject: qMe 
+### by Terry Hearst, Demi Karavoussianis, Kyle Reese, and Tom White
+
+https://fp-qme.glitch.me/
+
+Welcome to qMe! qMe is a priority queue application to assist in personal scheduling and time management. Any user can create an account with qMe. With an account created, users can enter tasks that they need to complete, along with the deadline. Depending on when the task is due, and what priority the task is ranked, qMe display the tasks in order of when the user should complete the task. Additional customization of tasks is offered, like the ability to say you need more time, or to push a task off until later, all with one click. Once a task is completed, it can be checked off as the user continues to their next task.
+
+## Additional Instructions
+- Steps to use (login front end not hooked up)
+  - Execute these commands in your console.
+  - If you want to sign up for a new account, run:
+  - ```js 
+    fetch("/signup", {
+      method: 'POST',
+      body: JSON.stringify({
+          username: "<YOUR USERNAME HERE>",
+          password: "<YOUR PASSWORD HERE>"
+      }),
+      headers: {
+          "Content-Type": "application/json"
+      }
+    }).then(console.log)
+  - If you do not want to sign up for a new account, then the default user is `user1`, password `hunter2`.
+  - To log in to your account, run:
+  - ```js
+    fetch("/login", {
+      method: 'POST',
+      body: JSON.stringify({
+          username: "<YOUR USERNAME HERE>",
+          password: "<YOUR PASSWORD HERE>"
+      }),
+      headers: {
+          "Content-Type": "application/json"
+      }
+    }).then(console.log)
+
+- Click to create a new task, fill in all the necessary blanks and submit
+- try to mark an item as done, or delete it from your queue.
+- click the "Do Later" button on an existing task to move it further back in your stack
+- Click the "More Time" Button to move a task higher on the priority list.
+
+## Technologies Used
+- For our front end, we used `React`, `Bootstrap`, and `React-Bootstrap`. These were all used in conjuction to create the cards and thier behaviors.
+- Using react, we were able to create the layered stacking card effect that you can see by creating more than one task. This effect deploys transitions (click "done" on a task when there is more than one queued, it's beautiful), as well as z-indexing for the stacking. It also uses variable vertical height to give the illusion of the splayed cards
+- We used of react-bootstrap to create the ability for the user to create a new card. This option let us explore various react-bootstrap props, like cards themselves, but also Forms, radio buttions, and text. Formatting the form within the card was tricky.
+- We went beyond the standard bootstrap css, and overrided it with custom scss. The colors were carefully selected looking at pastel palattes from https://visme.co/blog/pastel-colors/
+- In addition, we worked heavily with the interaction between props at different components of our code. This involved working with the different binding methods beyond just default binding.
+- To store our data persistantly, we used `SQLite`. The database stores the users, as well as the the tasks and associated data.
+- We used `pwd` to salt and hash our passwords in our database to increase security.
+- In order to handle times in a standardized format between our front-end and back-end, we used `moment`.
+- Our code is overall consistant with HTML standards, in the respect that we deployed correct error codes on all GET and POST responses.
+- The front end and back end are in different modules, so they have different packages, builds, and dependencies, which allowed the front end and back end developers to work seperately, but easily merge code when necessary.
+
+
+## Challenges Faced
+All group members decided to challenge themselves, and work on a portion of the project with which they had little to no experience, while helping other teammates in areas they were more familiar. Besides that, one of our biggest challenges was coordinating code structure and architecture and trying to remain consistant to avoid messy Git merging.
+  - Terry, who worked on the back end implemented salting and hashing for the login. He set up all of the end points to deliver information from the user to the database, then from the database back to the user. One of the biggest challenges was testing that every piece worked properly in the middle. In order to test out a feature, it needs to be implemented in the front-end and in the database, which means that good testing happened later than it should have. Additionally, figuring out the best way to juggle all of the information between the database and user in a good way was tricky.
+  - Demi worked with React, Bootstrap, and React-Bootstrap, specifically in designing the cards and the card-input menu. The biggest challenge was finding solid documentation, specifically with React-Bootstrap. Usually there was only the offical React-Bootstrap documentation and not too many third parties sites discussing React-Bootstrap.  In addition, getting the SCSS to work successfully took some time and debugging, which was difficult because the code in question was not Javascript, but CSS.
+  - Kyle worked with an ORM for databases. He had not used an SQL based language before, so learning that quickly, and implementing a database was a challenge.
+  - Tom worked with React and React-Bootstrap. He had challenges creating the proper z-indexing and queue structure to create the splayed card effect. In addition, he worked on getting the necessary information to each code layer through the use of props, which required more research (and some frustration) with bindings. Tom also set up the seperate front-end and back-end development structure to allow us to work independently as a team.
+
+## Group Contributions
+### Terry Hearst
+- Setup the back-end server
+- Developed all endpoints: signing up, logging in, and all task-related endpoints
+- Implemented authentication including salted and hashed passcodes for logging in
+- Wrote algorithm to sort the tasks by priority before sending them to the user
+### Demi Karavoussianis
+- Created Task cards using React, Bootstrap, and React-Bootstrap. This included both the card to create an new task, as well as the cards in the splayed view.
+- Created log-in screen with validation to ensure the appropriate fields were filled out before submitting
+- Created custom Bootstrap SCSS using a pastel pallete (cited above)
+### Kyle Reese
+- Created databases holding information about users and their associated tasks
+- Created functions for retrieving data from databases
+### Tom White
+- Worked with React, Bootstrap, and React-Bootstrap to create the interaction between cards. He created the layering effect, and the translations when a card is moved
+- Handled edge case of no cards in deck
+- Translated API calls to retrieve information from card class to application layer
 
-For your final project, you'll implement a course project that exhibits your mastery of the course materials. 
-Similar to A4, this project gives you an opportunity to be creative and to pursue individual research and learning.
-
-## General description
-
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
-
-- Static Web page content and design. You should have a project that is accessible, easily navigable, and features significant content.
-- Dynamic behavior implemented with JavaScript.
-- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data, authentication, and possibly server-side computation.
-
-Additionally, you should incorporate features that you independently research, design, and implement for your project.
-
-## Project ideation
-
-Excellent projects serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity. Consider creating something useful for a cause or hobby you care about.
-
-## Logistics
-
-### Team size
-Students are encouraged to work in teams of 2-5 students for the project. This will allow you to build a good project without expending an excessive amount of effort. While I would expect a team of four or five students to produce a project with more features, I expect a every team's work to exhibit all of the required facets described above.
-
-### Deliverables
-
-__Proposal:__ 
-Provide an outline of your project direction and the names of the team members. 
-The outline should have enough detail so that staff can determine if it meets the minimum expectations, or if it goes too far to be reasonable by the deadline.
-This file must be named proposal.md so we can find it.
-Submit a PR to turn it in by Monday, September 30th, before class
-
-There are no other scheduled checkpoints for your project. 
-You must be done in time to present before the final project demo day (October 10th). 
-
-#### Turning in Your Outline / Project
-
-**NOTE: code is due before the project presentation day due to the end of term / grading schedule constraints**
-Submit a second PR on the final project repo to turn in your app and code.
-
-Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service.
-Folks on the same team do not need to post the same webpage, but must instead clearly state who is on the team in their proposal.
-(Staff will use the proposal to build the grading sheet.)
-
-## Final Presentation
-
-Presentations will occur during the final day of class.
-
-## FAQs
-
-- **Can I use XYZ framework?** You can use any web-based frameworks or tools available, but for your server programming you need to use node.js.

client/.env

@@ -0,0 +1 @@
+PORT=3333

client/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

client/README.md

@@ -0,0 +1,68 @@
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br>
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br>
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `npm run build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify