Fully functional and interactive, this web application allows users to see a list of products, see details about each product, add them to the cart, increment the number of items and buy the products utilizing PayPal.
React
FireBase
Node
JS
CSS
NPM React Slideshow
NPM PayPal Button
FontAwesome
Cloudinary
Adobe Illustrator
Image retrieved from Unsplash and unDraw
Unsplash.com
unDraw.co
Slideshow Repo
I had a defined idea of what I was looking for. A E-commerce site that provides users with a variety of technologies devices from cell phones to TVs, allowing the user to view more information about the products and to add to the cart, increment the number of items before purchase and a PayPal button to complete the transaction.
I am a super visual person, so I like to start my projects by designing the application wireframe on my GA draw handbook with a pencil, nothing too fancy but for a visual person like me it makes a whole lot of difference, I feel like I have a goal to meet, like when I am doing a mockup of some website, the design is layout for me I just need to follow the patterns. Once that part is completed I start thinking about some little details that would bring character to my projects, like a funny or meaningful name or a logo, or changing the icon on the cursor when the user approaches a certain area of my application, this particular character can be seen throughout the entire application (like an easter egg, except I am the only one who knows about it lol). In particular, for this project I decided to create the logo and the name come after the company Shopfy. After this, I jumped into the design and develop my back-end and my client component structure as always.
Get the UserLogin and SignUp components to work properly utilizing Firebase.
I have worked with FireBase prior this project to set up my contact form in JavaScript it was a very smooth project. Although the overall concept still the same, there were couple variants like passing up the state to gather the user name or email to display in my navbar and hide the Login and display the logout. I also tried OKTA which did not worked well. So I was able to get the user logged in however it still not making a lot of sense on how to passing the information from Firebase up to a higher component.