atos20 / crate

Hi 👋, I'm Orlando Martinez Murcio

I'am a Husband, Father, Developer and Friend.

• 🌱 I’m currently learning Data Visualization

• 👯 I’m looking to collaborate on .NET React

• 🤝 I’m looking for help with DevOps and Microservices

• 💬 Ask me about React

• 📫 How to reach me [email protected]

• ⚡ Fun fact: I love the outdoors and am looking forward to having an impact in this world

Connect with me:

Languages and Tools:

 

crate's Issues

GraphQL mutation to for user to complete survey

• When a user completes a survey, we will want to have a new mutation that can change the survey data inside of the users table from true to false.

StyleSurvey Visual Feedback

As a user, I want to be able to see visual feedback when I select and un-select products during a survey.

Fixed survey image styling

• When displaying the images for each question, the images have a visible border which makes the appearance of each image as if they were inside another container.

-Fix: remove the container shadow

Wire Frame

Our track feature is located here.

Notes:

• The survey does not only have to be about clothing. We have the freedom to create style as we like.

• Wire Frame the survey located in our track.

• Design style of the survey -> keep it in line with the current website design flow.

• Products we want to add that support the survey

• Crates we want to add that support new products?

• User interaction with the survey

Due date for Wire Frame is Monday Dec 7.

Improving UX and Community

Feature:
As a user, it’s frustrating to go to my profile page and see little about myself other than my subscriptions. To give the user more control, I’d love to upload my own image, set a personal description, edit my email address and shipping address, and see a history of products that have been delivered to me and what I have kept. I should also see when my next delivery is coming and adjust the date for when I am available.

Extensions:

• As a trendsetter who values fashion, I would also like to be able to share this as a public URL (don’t have to have an account or be signed in) so that users can see my subscriptions and items that I have chosen to purchase as well. This page should include my profile picture, but keep info including my email address/shipping address, order history, and delivery times private.
• As a user, I should be able to tweet which clothes I have purchased. (actually integrate it with the Twitter API)

Modify user table with style column

As a user, I want to be able to see my style that is completed after finishing the survey.

• Add a column inside of the user database that will store their style that we can reference.

StyleSurvey - Cannot complete survey without an answer

• A user should not be able to finish the StyleSurvey without providing at least one answer, since they have control over being able to move backwards and forwards through the survey.

Style Survey - Quantity

Do we want a user to take one survey that applies to all categories? Or separate surveys for each category?

README

StyleSurvey multiple selections

As a user, I want to be able to select multiple products in a single category and between multiple categories during the survey.

Annotations

Our track feature is located here.
Specific deliverable instructions are located here.

Notes:

• We only have to fix bugs that are related to the track feature, any others we find we don't have to worry about.

• The current data flow of the existing code base may be unconventional, however we are to adapt and write in the same style as the current code base.

• No new packages are needed for the completion of our track.

• Each branch only has to be pushed up to the repo, it does not have to be merged with main.

• Use git rebased as much as possible during the project.

• Each individual assignee creates a branch for submission called code-annotations-<your-name>.

• For each file, walk through the code and add a comment above each line/block that describes what that code is doing.

• Make a list of the specific files of code that will need to be updated in order to add the additional features outlined in our track.

Due date for annotation is Monday Dec 7. The submission link for our annotation deliverable is here

test user reducer

Using Jest, test what the state should look like before and after the action is called

-Add functionality to + subscription button

When the user click on the +Subscribe button the user should be redirected to the following route: /style-preferences

- Update component state with class methods

• When the user selects an image from a question, the click event should register the event and get the data associated with it.

Test style survey componenet

• Implement unit testing for <StyleSurvey> component
  possible testing blocks
• Component should render without crashing
• USer should be able to click on the Next button and display a new category
• User should be able to go back after clicking on the Back button
• User should be able to select options from the DOM

Testing Tools

Determine best direction and tools for testing

Complete: using jest and supertest

Style Survey - Come up with questions

What specific questions do we want to ask our user?
How many questions?
What else do we need? (images, etc.)

Create survey migration

Create survey migration for database

Style Survey

Feature:
Before adding a monthly subscription I would like to choose my style preferences to ensure that I get clothes that better match my personal style. When I visit /crates, the first time I click on + subscribe I am taken to a style preferences page /style-preferences. I am presented with a style survey that consists of a series of categories such as tops, bottoms, dresses, shoes, accessories, etc. For each category I am given several images to choose from with instructions to choose the images that best reflects my style. After I have chosen the images from each category I am given a summary of my style such as ‘classic but edgy’.

Extensions:

• When I visit my profile page, I can see a button to view my style survey. When I click on the button, I am taken to /style-prefences and can edit my style preferences to update my style at any time.

• I would like to fill out a style survey for different categories of my wardrobe i.e. work, casual, date night. For each category I am presented with the same categories of choices i.e. tops, bottoms, dresses, shoes, accessories, etc.

Style Survey

Before adding a monthly subscription I would like to choose my style preferences to ensure that I get clothes that better match my personal style. When I visit /crates, the first time I click on + subscribe I am taken to a style preferences page /style-preferences. I am presented with a style survey that consists of a series of categories such as tops, bottoms, dresses, shoes, accessories, etc. For each category I am given several images to choose from with instructions to choose the images that best reflects my style. After I have chosen the images from each category I am given a summary of my style such as ‘classic but edgy’.

Create StyleSurvey component

A component needs to be created, that will display the form

Test crate reducer

Using Jest, test what the state should look like before and after the action is called

Model Survey after wire frame deliverable

Fix failing test

After requesting the user's data with the API call, the web/src/modules/StyleSurvey.test.js will break.

Survey Navigation

As a user, I want to be able to navigate through the quiz to re-select any answers I may have missed.

Recording user's answers to DB

Update user migration

Not sure if we need to do something with the user role attribute, and find an equivalent of enum in rails?

Redux Video Tutorial

• Traversy Media Video Tutorial on Redux visit this link

This video tutorial specifically uses Redux in the same destructured way that we are seeing inside of the current code base. Will be nice to see it built up from scratch.

StyleSurvey complete with answers

As a user, I want to be able to see my style after selecting the choices during the survey.

GraphQL Video Tutorials

• Net Ninja GraphQL Video Tutorial Series from this link
• How To GraphQL Video Tutorial from this link
• Freecodecamp.org Video Tutorial Series from this link

test assign style action

This is the las action to be tested related to the stye survey track

Select Style

As a user, I want to be able to click on the styles that I want to select as my style.

Environmental Setup

Follow the instructions listed in the links below to get your local environment setup for Crate.

1. Follow the instructions here underneath the Install prerequisites section up to setup.
2. Follow the instructions here in the README.md in the Setup and Running section, and the setup bullet point.

Only have to follow the API and WEB folder instructions, mobile is not needed.

Style Survey Algorithm

Need to figure out a way to assign a style, based off a respondents answers.

I found a decision tree, which I think is in the right ballpark for how to accomplish this. My recommendation would be to start out with a smaller survey to just get it working.

User Story 1 - Link to Survey

As a user,
When I visit /crates, the first time
I click on + subscribe
I am taken to a style preferences page "/style-preferences."

User migration - add style attribute

Style Display

As a user,
when I submit a survey
I'm taken back to my subscriptions page, where I can see my style (based on survey), along with my subscriptions

Data Flow Chart Deliverable

• Create a data flow chart or diagram that shows the data flow of track related to the current flow of the project.

This deliverable due date is Monday Dec 7.

Display User style

When the user finishes the survey an API call needs to be made which will return the updated user information. This information will be displayed in the DOM using an H1 component.

Modify user table survey boolean

As a user, I want to be able to take a style survey if I have not taken it yet. After I have finished my style survey, when I am subscribing to new crates, I want it to remember my style from the previous survey.

• Add a survey column to the users table that will track whether a user has completed the survey.

test crates reducer

Using Jest, test what the state should look like before and after the action is called