View Project live
https://femmes-app.web.app/
View my portfolio
https://zaythedev.com
Frameworks/Tools
Instructions for App
- Go to login page and input a pseudo name, email, and password
- Simply add items to your favorites or cart
- Go through the checkout process and logout
Welcome to my full-stack eCommerce project called Femmes. This was the most difficult, but fun project that I have completed. It integrates both my front-end dev and UI/UX design skills. After months of learning and knowledge I have acquired from my previous projects, I was able to develop this ecommerce app all on my own. Everything to the code, logo, and design of the website was created by me. After blood, sweat, tears, AND GOOGLING A LOT, I was able to complete the project in the manner of one month. I was so happy not because I finished the project, but because I put in so much work and effort into this masterpiece. It shows my growth as a developer from my previous projects. Femmes will be a project that I hold dear to my heart. Being new to front-end development, I was able to go from ground zero, design a professional prototype, and from the prototype code a functional eCommerce website within a month. This project made more confident in myself to continue learning and growing as a developer.
UI/UX Design
Before the code I used Adobe XD to design a prototype or mock-up for the website. This part took about 3 days to complete. The only thing that was not my work were the pictures of the clothes which I retrieved from the website HM.com. The mock-ups include the color scheme, fonts, and the mobile view. The website consists of four main pages. There is the Shop page, cart, favorites, and login.
Front-End Code
For the front-end of the website, I used the framework React along with SASS. With SASS I was able to create global variables to style fonts and colors. The styling of the app also includes CSS modules which allowed me to style only the elements in the selected component. For the animations on the website, I used the library Framer-motion. This is a mobile ready and responsive website. For the cart, cart total, favorites, and quick cart, I used Redux to be able to access the items and cart total throughout the entire app. I wanted to include unique features for the web app like displaying the user’s first name in the Nav bar. The app also includes a “quick cart” feature which allows the user fast access to their carts’ current total amount. The user is now able to shop and view their subtotal without having to render the Cart page.
Back-end Code
I used Google’s API Firebase to collect and hold the user data. With this database and user authentication, the user can log in and out of their account. Using the users unique ID for Firebase, I was able to push/pull the users favorites and cart items. Using array methods, I was able to map and filter the users favorites and cart items accordingly. The subtotal will either include or exclude the shipping fee depending on the users' login state. If the user is logged in, then the total price will exclude shipping costs.
Features
Enjoy :)