j-raymer / printlink3d Goto Github PK
View Code? Open in Web Editor NEW3D printing startup front end
License: Apache License 2.0
3D printing startup front end
License: Apache License 2.0
Uploading a file with a type of Internet Shortcut is somehow accepted and will result in an error
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.
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 |
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.
The process is mostly the same, but with a few added options in the configurations page (see mockups)
Style the nav bar on top according to the mockups
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.
This is the page where it shows all job details, status, as well as a chat box for connecting with the customer/printer
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.
create initial project structure for front end. (React)
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
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
Printer Profile
Customer Profile
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.
Mockups in process
Create the profile page according to the mockups
The "I need printing/I can print" gets messed up when zooming into the home page
Creating a PowerPoint presentation to demonstrate Milestone 1 progress.
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
Create reusable react button component. Should serve as a template for others to build out their own reusable components.
The print color options should be stored in the database and be retrieved from there for use in our application
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
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.
With this feature, customers who want something printed will be able to upload an STL file through the app and configure job parameters including:
This issue is for tracking generic project setup tasks. Many of the documentation tasks are outlined in this doc
Implement the home page according to the new mockups
Add a description of our project on the readme
After a printer has selected a job and confirmed it, the printer should see a page with the customers name and email
Integrate google map api for location / distances for jobs.
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
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.
Implementation notes:
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)
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.