Good Flow, Finally
I applied the same principles that I used for switching between the "Design a Card" page and the "Verify Card" page to the Home Page of the app. The User Experience is now:
1. User is asked for their name
2. User is greeted by name, asked if they want to (A) Design a Card or (B) See their Deck
(option A)
Design a Card:
1. User enters new card information
2. User is taken to a screen and shown what they enter and can (Aa) Verify or (Ab) Go Back to change it.
(option Aa)
1. New Card is added to JSON file deck
2. User is sent to View Deck page
(option Ab)
---this isn't done yet---
1. User goes back to option A, but their form now has all of the old info in it
(option B)
---this isn't done yet---
1. User clicks button to "See their deck" - this fetches the current deck from the JSON file (this part is done)
2. User is then shown a display of all of their cards (I'm still deciding how I want this to look)
3. User can click on a card and be taken to (BB) a page specific to that card.
Since I have my "DisplayCard" component as its own file, it shouldn't be too hard to get the "Display Deck" container up and working. The biggest problem there is that I have to integrate CSS files into my app (right now I only have one, and for whatever reason it does not seem to be communicating properly with the rest of the document.)
An issue that has been bugging me is that I would love to get tests up and running for each page, but I have never written tests for a React application before. I know that this is a subject that will be covered extensively at Launch Academy, but I spent the last day or so (unsuccessfully) trying to follow directions online to integrate tests. Rather than spend longer going down this rabbit hole, I'm going to do my best to complete the portions above that still need attention. Once everything is showing up on each page, I will tackle CSS.
1. User is asked for their name
2. User is greeted by name, asked if they want to (A) Design a Card or (B) See their Deck
(option A)
Design a Card:
1. User enters new card information
2. User is taken to a screen and shown what they enter and can (Aa) Verify or (Ab) Go Back to change it.
(option Aa)
1. New Card is added to JSON file deck
2. User is sent to View Deck page
(option Ab)
---this isn't done yet---
1. User goes back to option A, but their form now has all of the old info in it
(option B)
---this isn't done yet---
1. User clicks button to "See their deck" - this fetches the current deck from the JSON file (this part is done)
2. User is then shown a display of all of their cards (I'm still deciding how I want this to look)
3. User can click on a card and be taken to (BB) a page specific to that card.
Since I have my "DisplayCard" component as its own file, it shouldn't be too hard to get the "Display Deck" container up and working. The biggest problem there is that I have to integrate CSS files into my app (right now I only have one, and for whatever reason it does not seem to be communicating properly with the rest of the document.)
An issue that has been bugging me is that I would love to get tests up and running for each page, but I have never written tests for a React application before. I know that this is a subject that will be covered extensively at Launch Academy, but I spent the last day or so (unsuccessfully) trying to follow directions online to integrate tests. Rather than spend longer going down this rabbit hole, I'm going to do my best to complete the portions above that still need attention. Once everything is showing up on each page, I will tackle CSS.
Comments
Post a Comment
Thank you for reading my blog! I look forward to hearing from you.