kathytbui / crate Goto Github PK
View Code? Open in Web Editor NEWThis project forked from turingschool/crate
License: MIT License
This project forked from turingschool/crate
License: MIT License
Setup and got everyone’s repo running with Postico, Postgres, Conveyor Belt
Setup our project board-- added cards for rubric, track, DTR, structure of files + data
As a user
When I visit /user/profile
I can see a button to change the next delivery date of a crate
Once I click that button
There is a popup with a calendar
Once I select a date on the calendar
And click the checkbox
The new delivery date I set is now listed
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:
User story implementation in progress
LIst of all user stories:
.env
file)As a user
When I visit my profile
I see a list of products that have been delivered to me
There are a total of 10 of the most recently delivered products in a 2x5 grid
Each product should have a picture and its slug
Next to each product picture and slug there should be a return button
*** Question: what is the difference between a product that has been delivered and kept?
Modify /api/src/config/database.json
for database credentials
psql
in your terminal to access the postrgres command line interface (CLI)\du
in the postgres CLI. Your available users are listed under “Role name.” - Use this user as your username in the database.json file
postgre
as the dialect in database.json file
psql
, create your database with the command CREATE DATABASE crate;
When I visit /user/profile
I can see a button to change the next delivery date of a crate
Once I click that button
There is a popup with a calendar
Once I select a date on the calendar
And click the check box
The new delivery date I set is now listed
EDIT:
Changed to drop down select menu and user can choose 2 dates (1st and 15th)
belongs to user #35
Currently, there is no relationship between user and products
We will have to build that relationship in the model
Update migrations
A userProducts query method needs to be created
Add tests for new and existing code, focusing on areas of the code that relate directly to the features in your track
Rubric requires 2 tests to score a 4, Travis requires all tests to pass to deploy.
Turing Lesson
SET_USER
action
get
/ PRODUCTS_GET_REQUEST
product/Item
Input.js
Button.js
Grid
/ GridCell
File
: user upload imageInput type='email'
: update emailInput type='text'
: update addressInput type='date'
: update delivery datesTextarea
: for longer descriptionsFigure out the files we touch through the dataflow (what files are being "hit" at each point of the data flow)
As a user
When I visit my profile
I see a list of products that I have kept
There are a total of 10 of the most recently kept products in a 2x5 grid
Each product should have a picture and its slug
#31 - User Story 2: User update information can be successful
userUpdate mutation (can reuse productUpdate code)
update type.js and add:
- shipping address - break it down into components (add 1, add 2, city, state, zip)
- description
- adddress & it's components as STRING
- description - TEXT
- email STRING
- need to add shipping address components to user table and description
- need to create update function (take from product update in resolver)
Data flow feedback:
Wireframes:
User Stories:
#33 - User Story 4: User can select next delivery date
- add delivery date to user - enum 1 or 2 for 1st or 15th (reuse code from
- deliveryDate datatype = Integer
- add deliveryDate to migration (try to reuse code there)
- reuse getType method in Product Types & call it getDeliveryDate this will be used in updateUser mutation
Map out data flow through the app as it applies to the specific features you are working on
When I visit my profile
I see a list of products that have been delivered to me
There are a total of 10 of the most recently delivered products in a 2x5 grid
Each product should have a picture and its slug
Next to each product picture and slug there should be a return button
#32 - User Story 3: User can upload a photo
userUpdate mutation (can reuse productUpdate code)
update type.js and add:
- image needs to be added as a field to usertype
- image is STRING
- need to add image column to user table
- need to add to update function (take from product update in resolver)
Each teammember creates a branch called:
code-annotations-firstnamelastname
More information can be found here
Code annotations are due at Monday Oct 12's Check In here
Expect end annotations to be similar.
Be useful.
Can we reuse / repurpose any code?
Write as few lines of code.
Only for track.
Annotate for both ends.
Requires lot of communication.
Belongs to #36
We need to update the products migration to include a kept column
This column will default to true - need to update the product model & type
We will need to make a userProductsKept query method
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.
As a user
When I visit /user/profile
I can click the button to edit my email, shipping address, or personal description (the button looks like a pencil)
It pops up a window where I can add/edit my information
I can then click on the checkmark
Once I do my information is edited and I can see that change on my profile
State is not updating after uploading a picture, again
The branch is fix-image-2
Made our first team rebase
Got our redux store setup w/ Dev Tools
Completed our first solo spike looking at the code
BE/FE breakout to look through the code
Visualization of current schema
General annotations of what most of the files are
Added notes to packages / installs / imports
Made notes on usability / flow of the site
Made general notes of how we would implement the desired features on our track
belongs to #36
A mutation needs to be created to allow users to return items
As a user
After I have already updated my information
And I visit /user/profile
My information is pre-filled with the information I had submitted previously
As a user
When I visit /user/profile
I can see a button to upload a photo avatar
I can click that button and browse through my local photos to upload
Once I upload a photo
My avatar is now the photo I uploaded
Every team is expected to adhere to a code freeze 24 hours prior to their scheduled evaluation time. Once the code freeze is in effect, any new code pertaining to feature development, refactoring, or other chores can no longer be merged into master. Teams should instead focus their attention on manually testing their completed features, fixing any lingering bugs related to those features and preparing for their presentation.
For your evaluation, your team is expected to come prepared with a 15 min demo walking through:
the features developed
the git workflow utilized
the process used to analyze the code base
Rubric -- Interview Readiness
Create wireframes for user-facing portions of features associated with your track
Connects issues #30, #31, #33, #34
First decision:
Basic styling / state change
When user clicks on 'edit' button, button changes to orange and renders 'save' text, and input form replaces p
The state key is changed based on handleChange
When user clicks 'save' button, button changes to purple and input changes back to p to reflect the value of the updated state for that key
Connect back end
Can reuse a ton of components for this
Testing
redux-devtools-extension
(https://www.npmjs.com/package/redux-devtools-extension)composeWithDevTools
compose
to composeWithDevTools
in setup/store.js
ERROR: Please install pg package manually
API: Install packages and database setup (migrations and seed) cd api
and npm run setup
cd api
npm install pg --save
prior to running npm run setup
npm run setup
kathy
aj
carly
dan
leigh
jake
At 6:
When I visit my profile
I see a list of products that have been delivered to me
There are a total of 10 of the most recently delivered products in a 2x5 grid
Each product should have a picture and its slug
Next to each product picture and slug there should be a return button
Make presentation slide for evaluation
As a newly registered user
When visiting my profile page
I see several form entries to update my information
That includes:
Upload my photo
Add/edit Email
Add/edit Shipping address
Add/edit Personal description
Edit my next delivery date
10/8: Checkin #1 (Strategy Due)
Questions for PM:
“So, deployment is like, actually optional, right?”
Yes-- but “very interesting”
“Testing -- how do we test the backend??”-
model testing, api endpoint testing makes sure that the correct response is rendered -- happy/sad path testing?
Test integral track, happy paths.
No given test suite, must research. Don’t have to backfill tests - only test what we write. Okay to use 2 diff test suites. FE Redux testing, BE GraphQL testing lessons next week.
Ask about work flow so far and ask if it’s optimal
Need to refactor cards, see project board
Where do these uploaded images “live”? Is that up to us to figure out a package or use s3?
What is meant by “a version of Redux”? What sort of differences should we be looking for (beyond file structure/vocabulary) between this codebase & how we used Redux last mod/as stretch tech?
Setup question: in config/database.json, what if some folks don’t have postgres as a username? .ENV file for this?
Change postgres username
gyp: No Xcode or CLT version detected! gyp ERR! configure error
Webapp: Install packages cd web
and npm install
xcode-select --print-path
. This command should show you if you already have code installed by returning the following /Library/Developer/CommandLineTools
sudo rm -r -f /Library/Developer/CommandLineTools
to uninstall the toolxcode-select --print-path
to check that code has been uninstalledxcode-select --install
to reinstall. If this command does not work you will have to manually install tool.Create detailed user stories and chores defining implementation details for the functionality you will add.
The breakdown below may need multiple user stories per checkpoint.
Track Breakdown
As a user:
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.