Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

a3-KaylaAfonseca #68

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

a3-KaylaAfonseca #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3bbc10f
🦎😜 Updated with Glitch
Sep 25, 2024
7d6497b
🗃️🍽️ Updated with Glitch
Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .glitch-assets
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{"name":"leaves.PNG","date":"2024-09-25T07:55:15.832Z","url":"https://cdn.glitch.global/6e3f5eb5-6008-4d26-acce-b3066d02114a/leaves.PNG","type":"image/png","size":1723640,"imageWidth":1083,"imageHeight":685,"thumbnail":"https://cdn.glitch.global/6e3f5eb5-6008-4d26-acce-b3066d02114a/thumbnails%2Fleaves.PNG","thumbnailWidth":330,"thumbnailHeight":209,"uuid":"CNSeb4ZTfj29oTJt"}
{"name":"f63dbd6e-ef4d-4d9a-a997-6eeaa3165edc.image.png","date":"2024-09-25T09:02:37.216Z","url":"https://cdn.glitch.global/6e3f5eb5-6008-4d26-acce-b3066d02114a/f63dbd6e-ef4d-4d9a-a997-6eeaa3165edc.image.png","type":"image/png","size":179936,"imageWidth":2235,"imageHeight":1014,"thumbnail":"https://cdn.glitch.global/6e3f5eb5-6008-4d26-acce-b3066d02114a/thumbnails%2Ff63dbd6e-ef4d-4d9a-a997-6eeaa3165edc.image.png","thumbnailWidth":330,"thumbnailHeight":150,"uuid":"aG0J1nuNxLIeEVVc"}
{"name":"02c7ae2a-2fbc-43b4-bf0d-6d573ab83a01.image.png","date":"2024-09-26T00:20:57.433Z","url":"https://cdn.glitch.global/6e3f5eb5-6008-4d26-acce-b3066d02114a/02c7ae2a-2fbc-43b4-bf0d-6d573ab83a01.image.png","type":"image/png","size":179936,"imageWidth":2235,"imageHeight":1014,"thumbnail":"https://cdn.glitch.global/6e3f5eb5-6008-4d26-acce-b3066d02114a/thumbnails%2F02c7ae2a-2fbc-43b4-bf0d-6d573ab83a01.image.png","thumbnailWidth":330,"thumbnailHeight":150,"uuid":"dAtzz4HLkC2A8rkD"}
{"uuid":"dAtzz4HLkC2A8rkD","deleted":true}
127 changes: 27 additions & 100 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,114 +1,41 @@
Assignment 3 - Persistence: Two-tier Web Application with Database, Express server, and CSS template
===
## Task Manager

Due: September 19th, by 11:59 AM.
https://a3-kaylaa2003-kayla-afonseca.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.)
This site allows a user to track tasks. To enter the site first click register and create an account. Once the account is created click login and login. Once logged in you will be able to add tasks. To delete task input your username then click delete.

Baseline Requirements
---
- Allow users to add and remove tasks to their personal account.
- The biggest challenege I faced while creating this task manager was getting my login and registration page to work correctly. I started off with a site that tracks tasks, but realized I had no way of having usernames stored without a login and registration page. Creating the javascript for these pages took more time then I expected.
- I chose to implement OAuth authentication using the GitHub strategy. This method was selected for its simplicity and ease of implementation, allowing users to log in securely without the need for additional password management.
- I used Bootstrap as the CSS framework for this application. Bootstrap was chosen for its responsive design capabilities and pre-styled components, which helped speed up the development process.
- The five Express middleware packages
express: A minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
mongoose: An ODM (Object Data Modeling) library for MongoDB and Node.js that provides a schema-based solution to model application data.
bson: A library that provides BSON (Binary JSON) serialization and deserialization for working with MongoDB.
mongodb: The official MongoDB driver for Node.js, allowing for direct interaction with MongoDB databases.
dotenv: A zero-dependency module that loads environment variables from a .env file into process.env, helping to manage configuration settings securely.

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.
- Persistent data storage in between server sessions using [mongodb](https://www.mongodb.com/cloud/atlas) (you *must* use mongodb for this assignment). You can use either the [official mongodb node.js library](https://www.npmjs.com/package/mongodb) or use the [Mongoose library](https://www.npmjs.com/package/mongoose), which enables you to define formal schemas for your database. Please be aware that the course staff cannot provide in-depth support for use of Mongoose.
- 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/cs-4241-23/shortstack) for reference.

Node.js:
- A server using Express 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. I'd begin by converting your A2 assignment. First, change the server to use express. Then, modify the server to use mongodb instead of storing data locally. Last but not least, implement user accounts and login. User accounts and login is often the hardest part of this assignment, so budget your time accordingly.
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 (or an alternative server), 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
---
## Technical Achievements

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.
- **Tech Achievement 1**: I chose to implement OAuth authentication using the GitHub strategy. This method was selected for its simplicity and ease of implementation, allowing users to log in securely without the need for additional password management.

*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/Evaluation Achievements

*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).
- **Design Achievement 1**:
1. Contrast

Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
---
My site used contrast to draw attention to the section of the page that used user input. The titles and other text are dark while the surrounding background is white. More specifically, the most prominent elements on my pages are the header titles like "Task Manager" and "Login," which stand out due to their larger font size, color, and placement. I’ve also used color contrast effectively with the blue header titles and buttons against the lighter background color. This contrast helps users immediately recognize the purpose of each page and emphasizes the primary actions, such as logging in or adding a task. Additionally, the contrast between the button colors (btn-custom class with blue background and white text) and the rest of the elements makes interactive components visually distinct, guiding users toward the actions I want them to take. This design choice helps to maintain user focus and guides them through the task management process intuitively.

## Your Web Application Title
2. Proximity

your glitch (or alternative server) link e.g. http://a3-charlie-roberts.glitch.me
My site used proximity to organize related visual information, helping users understand the structure and flow of content. In my code, form elements are grouped logically, such as the task input fields (taskName, dueDate, userName) being placed closely together within the task management form. This grouping makes it clear that these elements are related and belong to the same process. Similarly, the buttons and input fields in the login form are grouped, which visually communicates that they are part of the login process. The use of proximity helps users easily scan and understand which elements belong together without confusion. Separating different sections with divides and colors further enhances readability and helps the users navigate the site without feeling overwhelmed.

Include a very brief summary of your project here. Images are encouraged, along with concise, high-level text. Be sure to include:
3. Repetition

- 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.
My site has repetition in its design, which reinforces consistency and creates a cohesive experience throughout my site. I’ve effectively used consistent colors, fonts, and layout structures across all the pages, which helps in creating a unified look and feel. For example, the repeated use of the blue color scheme (#007bff) for headers and buttons, along with the consistent font styles, maintains visual harmony. The repeated layout of forms inside card elements (card class) with shadows gives a familiar, cohesive design across different functionalities, like the task manager and login page. Repetition of design elements ensures that users have a predictable experience, knowing what to expect as they interact with various parts of my site. This consistency is essential for usability and helps in building user confidence as they navigate.

## Technical Achievements
- **Tech Achievement 1**: I used OAuth authentication via the GitHub strategy
4. Alignment

### Design/Evaluation Achievements
- **Design Achievement 1**: I followed the following tips from the W3C Web Accessibility Initiative...
My site uses alignment to create order and increase readability. I’ve organized elements systematically on each page. In my code, the elements that are only meant to be read and not interacted with are aligned centrally (text-center class) within the cards to create a clean, organized appearance. This approach not only increases visual appeal but also enhances readability, making it easier for users to follow along with the content and instructions. Alignment is particularly evident in the structured layout of forms and lists, which are consistently aligned and spaced, allowing for a streamlined user experience. By aligning text and form elements neatly, I've increased the contrast for specific elements, like buttons, which allowed the buttons to stand out considering they were at the end of the forms, providing a clear visual cue for actions. This organized approach guides the user’s eye naturally through each section, ensuring that the design is both functional and balanced visually.
- **Design Achievement 2**: I used CSS to make my site visually appealing and created sections that guide the user through my site.
![alt text](https://cdn.glitch.global/6e3f5eb5-6008-4d26-acce-b3066d02114a/f63dbd6e-ef4d-4d9a-a997-6eeaa3165edc.image.png?v=1727254957216)
Loading