A PWA that utilizes RESTful API, React, React-Hooks, and Cypress to generate make-up based on a users chosen lifestyle.
Home Page: https://face-it.vercel.app/
🔭 I’m currently working on BigBirds
🌱 I’m currently learning PWAs & React Native
👯 I’m looking to collaborate on FaceIt
🤝 I’m looking for help with PenPosts
👨💻 All of my projects are available on GitHub
💬 Ask me about React, Router, SASS/SCSS, Cypress, Chai/Mocha
📫 How to reach me [email protected]
📄 Know about my experiences through my resume
⚡ Fun fact I've seen 197 species of birds.
As a dev, I want to implement Router so that I can use url paths rather than conditional rendering to move users through our web app.
How will we know that the user story is complete?
If a user is able to use the back and forward buttons and navigate between two pages and data is still displayed as expected. If a user is able to navigate to a page with a url only and images are displayed as expected.
As a dev, I want to ensure that Router has necessary tags so that I can make my product as accessible for users as possible.
How will we know that the user story is complete?
When I open the console as a dev, there are no accessibility warnings surrounding anchor tags/links made by Router.
As a user, I want to my page to persist upon refresh so that if I accidentally click or want to cause a refresh, the data will attempt to continue.
How will we know that the user story is complete?
As a sighted user, when I click into a category and click refresh, I want the data to persist and not be greeted with an error message. As a sighted user, when I click into a product type and click refresh, I want the data to persist and not be shown an error. As a sighted user, when I click on a cosmetic to view its details, even when I click refresh, the data should persist and I will not be shown an error.
As a user, I want to visit the homepage so that I can see a a navigation bar, a mission statement, categories, and a footer with an about us.
How will we know that the user story is complete?
As a sighted visitor, I will see a navigation bar, the mission statement, and three categories to choose from. At the bottom of the page, there is a footer. When I try to click on something, nothing happens.
Please see issues: #2 #3 #4 #5 for a breakdown of each element of App.
As a user, I want to use a desktop so that I can view the web app there.
How will we know that the user story is complete?
As a sighted user on the desktop, I want to notice no strange sizing of images and fonts when viewing it in desktop view.
As a user, I want to visit the home page so that I can see a footer with links to creators linkedIn & githubs.
How will we know that the user story is complete?
As a sighted user, I see at the bottom of the page there's a footer that contains the clickable links to the creators. This is clickable. I see three creators and there are links to their gh pages & their LinkedIn pages.
As a dev, I want to apply propTypes so that I can confirm that data coming into a component is the expected data type.
How will we know that the user story is complete?
As a dev, I can force in fake & incorrect data and will see an error in my console telling me that it's expecting a sting, but is getting a number instead.
As a user, I want to go to the homepage so that I can see the available categories to sort through.
How will we know that the user story is complete?
As a normal sighted user, when I go to the homepage, I will see three icons & associated titles telling me what the categories are. If I try to click into one, nothing happens.
As a user, I want to navigate to a category and not see any underscores in the names of product types.
How will we know that the user story is complete?
As a sighted user, when I click into eco, I do not see any underscores in the product types of nail polish or lip liner.
As a dev, I want to apply proper error handling so that I can ensure that there's a proper UX response.
How will we know that the user story is complete?
As a dev, I can manipulate the the fetch call to force a 500 and see proper error handling.
As a user, when I try to visit an invalid url off of the home page, I will see error handling. (400 errors)
As a user, I want to search for something and if there's no results, I want to see a message that there are no results.
How will we know that the user story is complete?
As sighted user, when I type "olay" in to the search bar and get back an error message that tells me nothing exists matching my search parameters.
As a user, I want to view the footer so that I can see visual representations of a creator's available SM handles.
How will we know that the user story is complete?
As a sighted user, when I scroll to the bottom of the page, I see a footer with Connie Hong's GH, LinkedIn, and Twitter. I click the GH and I'm brought to her own person GH page on another tab.
As a dev, I want to apply cypress so that I can do E2E testing on a static comp to ensure homepage elements are where they need to be.
How will we know that the user story is complete?
As a dev, I can load cypress, run tests created to look for crucial components, and all those test pass.
As a dev, I want to use cypress so that I can test for if a category can be clicked into and filter to view particular products.
How will we know that the user story is complete?
As a dev, I should command cypress to click into vegan, then lipstick, then a lipstick product and see the details of a lipstick product. All tests should pass.
As a user, I want to navigate inside of a product type so that I can see all items of that product type with an image.
How will we know that the user story is complete?
As a sighted user, I click into eco's blush products and do not see any broken image links.
As a dev, I want to apply servicework so that I can prepare my app to become a PWA.
How will we know that the user story is complete?
When I run lighthouse as a dev, I want to see no warnings about the servieworker.
As a user, I want to navigate directly to a websites page so that I can view that particular page's information.
How will we know that the user story is complete?
As a normal sighted user, I can type into the address bar a specific path and be taken to that categories pathway to view the types of products available. I do not see an error.
As a dev, I want to refactor the apicalls so that I can dry up my code.
How will we know that the user story is complete?
When I look at my file structure, I see that apiCalls is split into their own file and that file is brought into app and assigned a variable to call the fetch.
As a dev, I want to configure the manifest so that I can have icons and prepare for PWA implementation
How will we know that the user story is complete?
As a dev, when I go into Chrome Dev tools "Application" tab and then on "manifest" I should see the appropriate icons available.
As a user, I want to navigate to the various categories so that I can view the types of products and there's always a visual available.
How will we know that the user story is complete?
As a sighted user, when I click the 'eco' category, I can see the 9 available types of product types to choose from. When I click on them, nothing happens.
As a user, I want to click a button so that I can clear my search results.
How will we know that the user story is complete?
As a sighted user, I want to search for a product and another product, and another. If I don't see an developer error during this process, then it's successful.
As a user, I want to navigate to the home page and see a loading message, so that I know that the home page is loading.
How will we know that the user story is complete?
As a sighted user, when I navigate to the home page, I am greeting with a loading message that disappears after a few seconds with the presented data.
As a user, I want to have a search bar so that I can find a product by brand name or tag.
How will we know that the user story is complete?
As a sighted user, I can type in 'e.l.f' and see the various products with the brand of 'e.l.f' or I can type in 'gluten-free' and see all products that have the label of 'gluten-free'.
As a user, I want to click into a product type so that I can view all items of that product.
How will we know that the user story is complete?
As a sighted user, when I click into eco, then mascara, I want to see all brands and items available that match that category.
As a user, I want to bookmark a type of product in a category so that I can come back to it later.
How will we know that the user story is complete?
As a sighted user, I click into Vegan and then the product type of mascara, and I see the available items of that product type. I want to bookmark that page that has its own unique url and be able to come back to it at a later date.
/vegan/mascara/:id or something, to ensure accuracy of request.As a dev, I want to use cypress testing so that I can check the UI/UX of the search bar.
How will we know that the user story is complete?
As a dev, when I write commands to see that if a user types in 'dairy-free' they will be given a list of products with that tag and are able to click into a single product.
As a user, I want to go to the homepage so that I can see a navigation bar with the title of the site and home button.
How will we know that the user story is complete?
As a normal sighted user, I will see a navigation bar that tells me the site name of "Face It" and have a home button. When I click on the home button, nothing happens.
As a dev, I want to refactor my code so that I can stream line my class names.
How will we know that the user story is complete?
As a dev, I can view the code and see that there are no uses of kebab-case in my className.
As a dev, I want to create a back up server using express so that I don't have to worry about the original API crashing/being limited to api rate limits .
How will we know that the user story is complete?
When I create a fetch call to the our back up server, it functions as if I had made a fetch call to the original makeup APi
As a user, I want to go to the homepage so that I can see an obvious and clearly written mission statement of the site.
How will we know that the user story is complete?
As a sighted user, I see a clearly defined mission statement that doesn't exceed more than a 1/4 of my screen on mobile.
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.