j-raymer / printlink3d

3D printing startup front end

Printlink3D Product Page

Description

PrintLink3D is an innovative online platform that connects individuals in need of 3D printing services with local 3D printing enthusiasts. Submit a printing request, find a nearby printer, and bring your ideas to life with ease through PrintLink3D's user-friendly website. This Product Page will list each of the application components and describe their function.

Product Demo

Check out out product demo on youtube! https://www.youtube.com/watch?v=aHpvmZ2KmxM

Homepage

The homepage's goal is to attract and inform users about the application services. Besides this, the homepage acts as a central hub for the application allowing the user access to all other features. We decided on a clean minimalistic look for the homepage making it easy for the user to focus on the relevant features. If that is the ones with printing needs or a printer.

Create Order Page

The Create Order page's purpose is to allow users to create new Orders. The Create Order page is split up into two parts.

Upload STL

The first step to creating a new order is to upload the user's STL file. As seen below, this menu is quite simple as its only purpose is to receive the STL file. Upon upload, a 3D render is displayed allowing users to see the model they're about to order.

Configure Order

After uploading the STL file the user gets access to the configuration menu. To simplify this process the configurations are split up into two parts, normal and advanced. Normal configurations encapsulate the minimum amount of information a printer needs to complete the job. These are:

• Quantity
• Color
• Material
• Complete By
• Comment box The Material will be defaulted to PLA in case the user doesn't have a preference. Advanced will include print-specific requests such Infill Density and Layer Height. All Advanced features will be defaulted to industry standards.

View Job Page

On the View Job page, prospective printers can view print jobs in their area. Similar to the Create Order page it is split into two parts.

Select a Job

When accessing the View Job page the first thing a user is confronted with is the select Job menu as seen below. This menu allows printers to filter through all the open orders while using the different filter functions to aid their search for a job they can complete. When a printer has found a job they like they can select it to read all the specific configurations.

Job Details

This page shows all the details inputted by the customer when they created the job, including their comments. If the Printer likes the specification they can click the accept job button. This will add the job to the Printer's job page, notify the customer that their job was selected and open a chat dialogue window allowing the two to communicate.

Profile Page

The profile page is used to authenticate every user. Allowing the user to provide name, email and location. It also links to the user's order and open job page.

My Orders Page

The My Orders page allows users to view their open and closed orders. It also provides them with updates on the progress of their open order and the chat windows with each of the Printers, who are currently completing the orders.

My Jobs Page

The My Jobs Page is the other end of the My Orders page. Here Printers can view their open and complete jobs, update their status and communicate with their customers.

Requirements

• nodejs

Installing Node

If using Ubuntu or WSL2 you can install node via: Nodesource

Setup

Execute the following in the /printlink3d directory to setup your environment:

npm install

Running

Execute the following in the /printlink3d directory to start the local dev server:

npm start

Deploy

To deploy changes to live site (Github Pages: https://j-raymer/printlink3d):

• Checkout target branch (main)
• Update REACT_APP_GOOGLE_KEY with production key
• Make sure the package.json has the following entries:

  "homepage": "https://jraymer.github.io/printlink3d",
  ...
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
  ...
  

• Build and deploy by running the following command

npm run deploy

• If any issues with deploy check to make sure the gh-pages dependancy is installed:

  npm i
  

  or if gh-pages not included in package.json

  npm i gh-pages
  

  If the production environment variable is not getting pushed, try runing:

  npm start
  

  check updated env variable locally then deploy again.

License

This project is licensed under the Apache version 2.0

Hosting

This project is currently hosted using Github pages. The current version is still a prototype and bugs are to be expected. You can find a live version at https://j-raymer.github.io/printlink3d.

Opening the website in incognito mode is recommended, as some cookies interact negatively with the website.

Wiki

More information such as Use Cases can be found in the Wiki.

Logging In

Please use the google login button to authenticate to get full access to PrintLink3d's features. Our main login system currently contains a few bugs.

printlink3d's Issues

Profile pages

We need to design and implement a profile page for users. The profile page will be built with a Profile component and we can have different views depending on 3 use cases: My Profile (viewing your own profile, Printer Profile (viewing another users profile when looking at a print job), Customer Profile (when looking at a profile through a print job from the perspective of a printer looking at a print job)

My Profile
viewing your own profile, should include ratings, jobs, messages, and settings

• Name
• Username (unique)
• Profile photo
• Rating
• Messages
• Settings
• Customer Tab/Section
• List of jobs (New Job card with status, link to printer profile, message option?, ect)
• Printer Tab/Section
• List of jobs

Printer Profile

• Username (unique)
• Profile Photo (help with trust for local pickup, maybe we can make a profile photo mandatory for local pickup or make it an option when creating a job)
• Printer Rating (5 star system, show number of ratings)
• Printer Reviews (title, description, option for photo)
• Message option

Customer Profile

• Username (unique)
• Rating (Do we want to include a customer rating? This would improve trust on the printer side and prevent abusive customers)
• Message option

Print job confirmation page

Google maps api error (live site)

check out error:

Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.
Error: AuthFailure
A problem with your API key prevents the map from rendering correctly. Please make sure the value of the APIProvider.apiKey prop is correct. Check the error-message in the console for further details.

Implement new create job process

The process is mostly the same, but with a few added options in the configurations page (see mockups)

Decide on Fonts and Colour Theming

Decide as a team what kind of fonts and colour palette we'd like to use. We can use tailwind to easily integrate these choices into the app.

Low priority - can be changed whenever.

Interactable banner

Make the top banner have a color gradient according to our brand's color identity.

Make the logo an interactable button that brings you back to the home page.

Add colors to database

The print color options should be stored in the database and be retrieved from there for use in our application

Create order details page

This is the page where it shows all job details, status, as well as a chat box for connecting with the customer/printer

Populate the Readme page

Add a description of our project on the readme

Next and Back buttons are off screen

You have to scroll down to see the next and back buttons. It would be better if there is no scroll bar, at least for MVP 1

Create profile page

Create the profile page according to the mockups

Create dropdown menu when hovering over account in nav bar

Bidding System

• Show current bid on every job card
• After clicking on a job card, bid UI is shown on the right side of the confirmation page
• For the jobs page, have a section for jobs that you currently have bid on. Also do this for the orders page
• We should provide a job bid estimate based off material and volume
• Customer waits for a bid until they are comfortable accepting

Mockups in process

Feature List

This table presents the main features we are trying to accomplish. See an issue ticket for a more detailed description of a particular feature, its requirements, and up-to-date status. On completion of the features, the time actual column will be updated.

Feature	Issue Ticket	Due
Customers can upload print jobs	#6	Milestone 1
Printers can select from available print jobs	#14	Milestone 1
Customers and printers can communicate about a shared job	#15	Milestone 1
Account creation and login	#53	Milestone 2
Printers can track jobs through profile	No issue ticket yet	Milestone 2
Customers can track jobs through profile	No issue ticket yet	Milestone 2

Create new browse jobs process

The browse jobs process has slightly changed. There are now filters where the steps once were and the confirmation page has more information (see mockups).

Once the printer has confirmed a job, it should route to the order details page where the printer and customer can chat (separate ticket)

Create side bar

Create the side navigation bar according to the mockups

We could possibly have an animation for when the page switches, as in the highlighted bar moves one down when clicking next

Google maps api / location

Integrate google map api for location / distances for jobs.

Create individual pages using react router

We need a page for each step of the printing/selecting job process.

For the customer, we'll have Home Page -> Upload File Page -> Configure page

For the printer, it'll be Home Page -> Select Job page -> confirm job page

There should be a button going from each page to the next according to the above sequence.

Account creation and login

Users should be able to create an account and login.

Additionally, users should be required to login before posting a job. Printers will need to be logged in to view jobs

Figma Diagrams

The plan for the UI design is for each of us to individually create a UI mockup based on how we imagine the website looking, so that the final design can take the best parts of each individual's design. It would be great if each group member could create a set of Figma UI mockups (very simple ones) for Friday so that Jasper can get working on the cumulative design.

Jasper will be creating a Figma page for the project soon. Make sure that when you do your designs you just create new cells and not new pages, as you need to pay to get more than ~3 pages whereas you can have infinite cells.

Create Backend

Customers and printers can communicate about a shared job

Description

After a customer has uploaded a print job to the app, and a printer has selected that job to perform, the two parties are able to communicate with each other about print status, delivery, etc.

Requirements

• [] #49

Integrate Backend and Frontend

Create user details page

After a printer has selected a job and confirmed it, the printer should see a page with the customers name and email

Landing page for app

Additional Auth features

• forgot password
• change password
• error handling
• delete account
• add display name to email login

File Upload accepts internet shortcut extensions

Uploading a file with a type of Internet Shortcut is somehow accepted and will result in an error

Redesign Home Page

Implement the home page according to the new mockups

Upload page with dropbox for STL file

Selecting multiple stl files crashes website

If you select multiple STL files during the file upload phase, the website will crash with an error.

Since we currently only accept one file, we should only accept the first file that is uploaded.

Milestone 1 Presentation

Rating System

• Create rating modal for after completion of job
• Add ratings to bid cards in job page
• Add Reviews to profile page
• Add Reviews page to configuration page

Integrate backend with frontend

Back end for login + Profile pages

We need to update firebase for the following:

• Authentication - Firebase (google ?)

• User profile

• Add unique identifier (username)

• Name

• Profile Photo

• Location (coordinates)

• Ratings (would be a separate table if using RDBMS)

• Messages

• Settings

Milestone 1 Presentation

Creating a PowerPoint presentation to demonstrate Milestone 1 progress.

Add ThreeJS To Render STL Files

• Setup Three JS
• Add rendered container of the uploaded STL in printee request form.

Implementation notes:

• Listen for change on input[type=file] and use data bound to evt.target.files[0] to pass data to renderer.
• Check out this threejs stl example:

Cleanup various UI bugs

Fix firebase node modules appearing in parent folder

On my device, a node_modules folder would appear in the parent git folder, adding all the firebase files to the commit. As a temporary solution I added a new .gitignore files, however we should investigate why only the firebase modules are being added outside the "app" folder

initial project setup

create initial project structure for front end. (React)

Select and add a license to the repo

Create print job page

Home page text gets messed up when zooming

The "I need printing/I can print" gets messed up when zooming into the home page

Create Button Component

Create reusable react button component. Should serve as a template for others to build out their own reusable components.

Create Multi-Staged Forms

Use conditional rendering to implement the multi staged forms mentioned in #8 .
Add the basic form fields and features required for each stage. Don't worry about actual functionality for this task, just get the react state setup.

Project Setup

This issue is for tracking generic project setup tasks. Many of the documentation tasks are outlined in this doc

Todo

• #9
• Create a list of features, posted to an issue, according to specification in milestone 1 description
• Create github issue tickets for each feature and link to anticipated completion milestone
• Transfer plaintext knowledge to the github wiki (e.g. contribution doc & Milestone 1 docs folder)
• #18
• #19

Style the nav bar

Style the nav bar on top according to the mockups

Configuration page with print parameter selection fields

Printers can select from available print jobs

Description

With this feature, printers who are looking to take on a printing job will be able to browse available prints uploaded by customers, filter the jobs based on distance and material, and select a job to complete.

Requirements

• Figma mockups for pages
• #8
• #7
• #27
• #28

Create & populate a persona page in the github wiki

Customers can upload print jobs

Description

With this feature, customers who want something printed will be able to upload an STL file through the app and configure job parameters including:

• printer distance
• infill percentage
• material type

Requirements

• Figma mockups for pages
• #8
• #7
• #25
• #26
• Print job confirmation page
• Sending print job details (file & configuration) to DB