search

ubc-cpsc455-2024S / project-16_dev_dynasty

project-16_dev_dynasty created by GitHub Classroom
MIT License
2 stars 0 forks source link

readme

workflow

workflow

Deployed URL: https://project-16-dev-dynasty-frontend.onrender.com/ \ Username: admin \ Password: admin123

BayBuild

BayBuild is a proof-of-concept project management web application designed for a modular home manufacturing company to improve its organization and productivity. The company manufactures an average of eight houses per week in a factory environment and relies primarily on manual planning and record-keeping systems. BayBuild allows the company to track its house manufacturing progress through a 20-bay production line, and automate the creation, modification, and retrieval of house information including customer details, quality checks, defect records, and documents. The consistent and centralized storage of house information is critical for the construction team to ensure a controlled handoff between production bays. An event logging feature in BayBuild allows managers to access metrics such as the average time spent per production line bay and the average number of houses manufactured per month.

Project Goals

Minimal requirements

✔️ Add House Record - allow users to add a house record to the system (i.e., a house to be constructed) with information including project number, model number, customer name, size, bay location, and status.

✔️ View Production Line Status Board - allow users to view the Production Line Status Board and see the position of each house in the 20 bays of production.

✔️ Find House Record - allow users to find a particular house in the system via a search and view details specific to that house.

✔️ Update House Status - allow users to modify the status of a house and update its position in the 20-bay production line (e.g., a house that has completed all work in Bay 11 - 'Electrical Rough In' can proceed to Bay 10 - 'Insulation/Sheathing').

Standard Requirements

✔️ User Account Setup and Management - allow administrators to create user accounts with different permission levels and allow users to login and logout.

✔️ Create Fillable Quality Control Forms - allow users to fill out standardized quality control checklists specific to different areas of a house and flag defects.

✔️ Track House Progress on Production Line Status Board - allow users to visualize the current status of each house on the Production Line Status Board (e.g., red = 'work in progress', yellow = 'QA required', green = 'work complete').

✔️ Create, Modify, and Retrieve Defects - allow users to create, modify, and retrieve defect records (including images) specific to a house and production bay.

✔️ Attach External Documents to House Record - allow users to attach external documents (e.g., images, contract documents, construction drawings, etc.) to a house record.

✔️ Add Customer - allow users to add a customer to the system with information including customer name and contact details, and link each house with a customer.

Strech Requirements

✔️ Drag and Drop Houses Between Stages - allow users to drag and drop houses between production line bays on the Production Line Status Board.

✔️ Email Updates - allow users to receive email updates detailing important information about a house's status.

✔️ Business Metrics - allow users to track metrics such as the average time spent per production line bay and the average number of houses manufactured per month.

Technologies Used

Module 1: HTML, CSS, and JavaScript

HTML, CSS, and JavaScript were used extensively throughout the project, playing crucial roles in both the frontend and backend development. HTML was used indirectly via MaterialUI to define the elements and layout of the JSX components created using React. CSS was used to apply styling to the JSX components, ensuring a visually appealing user interface. JavaScript was the primary coding language used for the project. On the frontend, JavaScript, combined with React and Redux, facilitated the development of a sophisticated and responsive user interface. On the backend, JavaScript code, executed in a Node.js environment, was used to handle all server-side functionality.

Module 2: React and Redux

The React JavaScript library and MaterialUI component library were integrated to develop a dynamic, responsive, and visually appealing user interface composed of reusable JSX components. React's component-based architecture allowed for modular development, promoting code reusability, consistent styling, easier collaboration, and simplified revisions. Redux was used to manage and update the global application state, ensuring data consistency across components and enabling efficient state transitions.

In the frontend we organized our code into the following folders each with the following utility:

Frontend/
│
├── components/ -> [React components for the UI]
│
├── constants/ -> [Constants used throughout the application]
│
├── pages/ -> [Page / screens in the application]
│
├── redux/ -> [Manage all redux state for the app]
│
├── router/ -> [All relevant routes and the main router component]
│
└── styles/ -> [Global styles]

Module 3: Node.js and Express.js

Node.js was used as the runtime environment to execute JavaScript code on the backend server. The Express.js framework was used with Node.js to handle routing and build RESTful API endpoints to serve responses to the HTTP requests generated from the frontend.

We have organized our Express.js backend code into a detailed set of folders to make it easier to locate specific information. Each folder contains files that pertain to a particular area of functionality. For example, the routes folder includes a 'houses.js' file that handles the routes for houses, while the services folder contains a 'houseService.js' file with all the database queries related to houses.

Backend/
│
├── checklist_templates/ -> [Checklist template files for pdfs]
│
├── data/ -> [Mock data]
│
├── middleware/ -> [Authentication middleware]
│
├── models/ -> [Database model types]
│
├── routes/ -> [Route Definitions]
│
├── services/ -> [Database Queries and Helper Logic]
│
└── tests/ -> [Test files for the application]

Module 4: MongoDB

A MongoDB document database with eight unique collections was used on the backend to store all information for the application. The Mongoose ODM was used to create schemas and simplify database querying. All database related files were organized into the following folders in the Express.js backend code:

To perform complex queries involving multiple collections in the backend, two aggregation pipelines, referred to as 'Views', were created in the models folder. They could be queried like regular MongoDB collections. These views were called:

Module 5: GitHub Actions & Render

A CI/CD pipeline was set up using GitHub Actions for both the backend and frontend code. The workflows ensured that backend tests were executed and the frontend build was performed on every push to the main branch and on every pull request targeting the main branch. Additionally, the project was deployed on Render following these checks. Branch protection was also configured to prevent merging pull requests with failing workflows into the main branch.

Above and Beyond Functionality

Industry Partnership

Automated Emails

File Storage and Retrieval

User Authentication and Authorization with Role-Based Access Control:

PDF Previewer

Checklist PDF Generation and Download

Next Steps

Team Member Contributions

Andrew

Andy

Justin

Ryan

Prototype Images

image image image image image image image image image image