smithcol11 / abilitiesatwork

Full stack web application for Abilities at Work. Its function is to manage jobs and match clients with those jobs.

Development Setup

• VS Code
• Git
• Node LTS or use NVS

Recommended VS Code Extensions

• GitLens
• Path Intellisense
• Prettier (for easy formatting)

Project Setup

Navigate to both the backend & frontend directories.

npm install

abilitiesatwork's Issues

Move jobData Store to Data schema in DB

Results: Searching/filtering component

Need to implement the component for searching and looking at specific results.
Some fields will be best suited as drop downs, radio buttons, or others.

Reference Jonathan's Diagram for inspiration: https://xd.adobe.com/view/fbe2d2e7-92c9-4197-b665-29e7b64a6044-aeb1/

Application Nav Bar

Two person Task:

1. Router and logic
2. Layout and styling(mobile vs desktop)

Base design off of UX template in the shared google drive
styling does not have to follow the UX template exactly, but the logic of the page should be the same
Ease of use and simplicity are important

Client Schema

1 person task:
Create client.js schema file with reference to the database document from previous task.
Will need to reference mongoose documentation page (schema section)
https://mongoosejs.com/docs/guide.html

User Story: Accessing app and logging in

Please read:
User Stories how and why

• Think about how this could / should be done

• Using the resource above, create a user story for this experience

• Feel free to use me(Colin) as a resource, I will be working with Ian and his tech to plan out deployment. So I have a good idea of how access will likely be done.

Add Job View

Need to implement what adding a job will look and function like.

• inputs
• required fields, optional fields
• submitting, resetting, etc

Job schema

1 person task:
Create job.js schema file with reference to the database document from previous task.
Will need to reference mongoose documentation page (schema section)
https://mongoosejs.com/docs/guide.html

View/Assign Color in Project Document

https://drive.google.com/drive/folders/1iHAWP1x04z62L0bYL39agfxcUHKKW5kN

In the shared drive there is a Project Document that we can all edit throughout this term. Please view the document and on the first page type your name in a unique font color. Every time you edit the document please use the font color that you typed your name in.

SQL vs NoSQL/Document Feeback

Please fill out the google form below with your opinion for the database we should use:
Google Form

Login Page

2 person task:
1.View/page layout
2.Form component(post request)
-admin vs non-admin
Will need to coordinate with Backend Login Task members
Should be based off UX login templates in shared google drive
Styling does not have to match exactly, but logic should be the same
Ease of use and simplicity are important

Architecture Diagrams

• Describe functional components of the application
• Show high level component interactions
• UML / Flowchart

Recommended readings:
Diagrams and use cases

Recommended software to use (Free and Open Source):
diagrams.net

Search and Matching parameters

Think about and plan out how the matching and searching/filtering process will work. This can include text explanations/drawings/diagrams/outlines etc.
-How will the different fields be handled? What tags will be used?
-How will fields be entered/selected?
-The individual steps involved in searching/filtering.
-The individual steps involved in matching between clients and potential jobs. - The two fields involved in the matching process are: Job Type/Industry and Full-time/Part-time
-Results of both processes

Implement the ability to add Industies / Positions

This would ideally be done from the dropdowns, so users don't have to navigate away to add one.

Searching/Matching Page Layout & Functionality

Need to plan out page design and how the layout will change based on mobile or desktop view.

• Richard and I have some ideas about how this can be done, reach out to us as needed.

Top Bar task switching

top bar component for each page, handling switching between add view and search view

Match Client to Jobs

Need to query employee for the clients initials.
Then send that to the backend.
The backend will query the DB for a client, then query the Jobs using that clients preferences.
Finally an array of Jobs in JSON is returned to the frontend where the existing table code is used to display results.

Results: Row components

Implement the individual rows of the table.
Show all the necessary fields and arrange them properly.
Add control buttons for later functionality: edit a result, remove it, show more info, match, etc

Jonathan's mock up: https://xd.adobe.com/view/fbe2d2e7-92c9-4197-b665-29e7b64a6044-aeb1/

Boilerplate

Plan out MongoDB schema

Review MongoDB material and create a schema for the database, including fields and object structure.

Info on document database:
https://www.mongodb.com/document-databases

MongoDB Schema Design Best Practices:
https://www.mongodb.com/developer/products/mongodb/mongodb-schema-design-best-practices/

Data Model Design:
https://www.mongodb.com/docs/manual/core/data-model-design/

Create Project Presentation in Google Drive

Results: Table component

Implement the table component, responsible for looping over results and showing them.
Need to show row and column names.
Use pagination and now scrolling for overflow results.

Jonathan's mock up: https://xd.adobe.com/view/fbe2d2e7-92c9-4197-b665-29e7b64a6044-aeb1/

Hookup login to the backend using Pinia store

Useful links:
Pinia
Someone's implementation (use as a reference not a guide)
Vue Event Handling

• Need to call store function from forms
• Then, use the store to handle API calls to the backend using post methods and sending data
• Use the store to know the state of the user

Start UI/UX for app

Use prototyping tools to flesh out the UI design and layout. As well as plan the UX.

Recommended software:

• Penpot (FOSS)
• Figma

Create components for reused assets across the app

There are many cases where a button or alert, etc. Is used, but these styles aren't cohesive and could be made their own components that get rendered across the app.

Let us know if you want to brainstorm ideas on this!:)

User Story: Adding a job to the application / database

Please read:
User Stories how and why

• Think about how this could / should be done
• Using the resource above, create a user story for this experience

Connect with Ian and tech to start dialog regarding serving the app

Some of my ideas about this:

• Hide and secure app behind company firewall
• Host application locally on a server in their office
• Use wireguard VPN to tunnel in
• Access app at an IP or domain name

Backend Login

Two tasks

You will have to communicate with the front end login team to coordinate the API they should use.

Implement user auth for admin user

The admin user is the only user who needs to be authenticated. It is important to follow good standards and not save or use this password in plaintext. So, we need a way to hash and verify the login.
I recommend checking this out:

• Passport

Handle post/get requests for logins

There will be post and get requests involved with login, so, you will have to handle when someone signs in, and where they are routed to. You will probably need to create a new routes file for handling this.
This will be a good resource:

• express routing

Feel free to use other resources!

User Story: Searching for job/client, matching

Please read:
User Stories how and why

• Think about how this could / should be done
• Using the resource above, create a user story for this experience

Add theme colors to Tailwind config

Tailwind Color Config Docs

Going to implement the theme colors.

These can be used by typing class names corresponding to their names.
By taking this approach, we can change colors used in the application very easily and in one spot.

Planned names:

light, accent-light, main, accent-dark, dark

Implement button on table rows

This button will show more options, such as more info, edit, delete, etc. depending on the item displayed.

Clean up DB models and tests

The models are a little messy at the moment and could be improved / simplified.
Spend some time making them easier to read and work with.

Github Workflow

Take some time familiarizing yourself with the GitHub page, project board, and git itself.
Here is a useful video to get up to speed with git while being entertained!
Fireship Git Video

Test Schemas & Cleanup Atlas Instance

We are using Vitest, check it out:
Vitest Docs

Testing:

• All the schemas should have exported their models
• Test these models by trying to add them to the DB
• Check required fields, types, etc.

Cleanup:

• The MongoDB Atlas has some DBs that are unused and full of test inputs
• Delete these so their is only one DB that handles our models

Jacob: Company
Ben: Job
Junyi: Client

Research and setup authorization levels

The admin will have elevated privileges. Look into how this can be done, we are currently using a JWT and I think that can be used somehow. Admins are the only ones who can edit / add clients. There are likely other admin specific things but lets start there.

Company Schema

1 person task:
Create company.js schema file with reference to the database document from previous task.
Will need to reference mongoose documentation page (schema section)
https://mongoosejs.com/docs/guide.html

Organize Google Drive

Organize the shared google drive.

Vue Frontend Framework

Take some time to look at our frontend framework and get familiar with how it works.
Here is another Fireship video on the topic, as well as links to the official docs:
Fireship Vue Video
Vue Site
Vue Community Site

Setup SSH key for GitHub, then pull the repo down locally

Check out this link for the GitHub Docs: HERE

In summary, you need to generate an ssh key, do this by typing:
ssh-keygen -t ed25519
Then, copy the contents of the id_ed25519.pub file. You can do this by typing:
cat ~/.ssh/id_ed25519.pub and copying what prints
Finally, go to GitHub, settings, and add the ssh key.

Add Client Page (Admin)

Need to implement what adding a Client will look and function like. This will be an admin only ability, but don't worry about creating that restriction yet.

• inputs
• required fields, optional fields
• submitting, resetting, etc

MongoDB

The database we have decided on is MongoDB, it is a noSQL and document based. It plays really nicely for our use case, please check it out before the end of this sprint:
MongoDB
MongoDB with Node
Node Driver API

Tailwind CSS Styling Library

For our styling we will be using Tailwind, it is similar to Bootstrap but MUCH less opinionated.
Here is a link to the site and docs:
Tailwind CSS Site
Tailwind Docs

Create appropriate routes and DB calls for jobs.

This could include editing, removing, and more with a job.

Fill out Project Doc

Continue to work on contents of project document.

Query database for all jobs

Get all the jobs from the database, then send them to the frontend using a post route

Create User DB Schema, and fix the passport auth implementation to use the model

https://mongoosejs.com/docs/guide.html

The backend login has been merged, but doesn't currently reference the DB.
Employees will login using their full name 'first last'.
Admin will have username 'admin' and some temp password for now, just use 'admin' for ease.

Ask Jacob and Ruchir for help with passport if needed.
Also ask Colin, as he has used passport using a mongodb model before.

Create appropriate routes and DB calls for Clients

Similar to the job task, make routes and calls that fit our use case. This could be editing or removing a client from the DB

Give IP to Colin for Mongo white list

Please send me your IP address through Discord or Email to gain access to MongoDB during Development.
You can do this by typing 'what is my ip' into a search engine, or by going to your router's ip address.

Add client: route and database

Hook up backend using route and database call

Add job: route and database

Now that there is a frontend for adding a job, lets use that post request to the backend to setup a route, and add to the database.

Styling Responsive Navbar