Design Phase

Note that you should start by designing what you are going to build. For this project that means 4 things:

1. A routing diagram that outlines all the routes your version of goLogoLo will need in this single page app.
2. A UI Mockup diagram (i.e. rough sketch, use com or something similar) that shows what all of your routed screens will look like. Given the requirements below, you will have to think about layout to help the user navigate all of the added features!
3. UML class diagrams that documents what JavaScript classes will be required as well as their variables, methods, and relationships to other classes.
4. A single Queries.txt file that contains all the queries and mutations you plan to implement as part of your back-end API.

Note that this should be what you could then put into GraphQL to clear and reset the database for all testing purposes.

Design Submission Instructions

Note that moqups is free to join but limited. You cannot export your moqups to an image file so if you do use moqups, simply take a screen shot of each moqup and place it in a jpg or png. If you find a service or tool that allows export, then submit the mock up diagrams as jpg, png, or pdf files.

Take the mock up files, routing diagrams, UML diagrams, and the GraphQL query file and place them in a separate folder. Zip the folder giving it a the name:

Gologolo_Design_Firstname_Lastname_ID.zip

Post that to the GoLogoLo_Design dropbox on blackboard.

App Requirements

Note that we have of course been already building the goLogoLo

App so this will provide a baseline starting point for your final application.

For this project, however, you will be required to do a little bit of technology discovery and figure out how best to add new Use Cases:

• Editable Logo Dimensions So far, the application hasnt cared about the formal size of our logo. You must now provide controls for the user to be able to change the dimensions of the logo such that in all places it appears (viewing and editing) it clearly fits in those dimensions. Note that you may start all logos with a default size if you wish.
• Multiple Pieces of Text So far, the application only allowed for logos with one piece of text. Now, you will allow for logos with multiple pieces of text (as many as the user wishes to add). This means you will need controls for creating, selecting, editing, reordering (whats on top?), and removing each piece of text.
• Images Note now the logo will allow the user to add images as well. Note that your database need not deal with uploading and storing images. You can simply add images using a URL from the web.
• Image Sizing You will need to provide a mechanism for scaling provided images.
• Drag and Drop Each piece of text and each image should be selectable (this should be visibly shown) and draggable using the mouse.
• Logo Exporting Your application should provide a button that will export your logo into a single image that can then be downloaded via a dialog. Bam!

your logo.

Extra Credit

Add User authentication Employ Passport.js to create a userauthentication system. This means the user has to be able tocreate a new account, login, logout, and reset or recover theirpassport using email (all accounts should employ email). Note,this part is a challenge.

Submission Instructions

When you are done, zip up the entire gologolo directory, but do not include the node_modules directory. Then submit that single ZIP file via Blackboard. Note, it must be a .zip file, not a .rar file. Make sure you provide the URL of your GitHub repository when you submit your file. Also note, if you include the node_modules directory, there will be a 5 point deduction on the submission.

Upload the zip file to the blackboard GoLogoLo_Implementation dropbox.