Freelance work: members-only eCommerce web app for an entrepreneur client built with React.
๐ Test account: [email protected] / 123456
-
How did I build it? Haxa is the eCommerce project for my entrepreneur client. I closely communicated with my client to meet his visual and functional requirements. After discussion, I designed and developed an entire website and deployed it.
-
What was the most challenging part? I used Firebase database and storage for this project. I had to write code logics to fetch the products data. That code logic was being called every time I opened the products page. I found out that this number of fetching data causes quite a bit of loading delay. I had to solve this problem to make my website run faster. See more on Google Docs.
-
How did I solve it? I used Redux and the
useEffect
hook in React to optimize data fetching logic. It stores data in a state after the component is rendered initially. I set the last product update time as a dependency to fetch data only when there is a change made. In this way, I could improve the performance of my website. -
What was the most fun part? The most fun part was creating an admin page. It was my very first time implementing this feature with Firebase. I had to read the official document on Google Firebase to come up with code logics. I was surprised to see how the Firebase handles the data and makes it easy to apply backend to my web app. I enjoyed learning this new technology.
-
What did I learn? I learned how to build a full stack web app with the Firebase. It was significant achievement for me since it was my first website that is connected to the database. I learned how to integrate a PayPal payment with my app, as well. It was way more simple that I thought. It taught me that I shouldn't assume implementing new feature in the project is complicated. I learned that I should always be opened to face a new challenge and go over my comfort zone.
-
What will I do differently next time? I want to create a wireframe before starting to develop the website next time. At the early stage of the project, I didn't want to spend too much time coming up with design. I dived into the project with a very simple and vague design decision. I had no detailed visual blueprint of the completed project at all. It caused a lot of debating in terms of design during the development process. I had to spend way more time than I expected for this part. I overlooked the decision making of website design could be very time consuming overall the project. I'll definitely use design tools to create a detailed wireframe of the project next time.
- I used ReactJS on purpose for one of the features in the project. My client required a filter that showed the products without page reloading.
- I used Redux to optimize the data fetching logic. It lets me manage global states in an easier and more intuitive way as well.
- My goal is to become a full-stack developer ultimately. However I want to focus on the frontend for now. That's why I decided to use Firebase rather than create a custom server. I have basic backend knowledge in NodeJS, Express, MongoDB, and MySQL.
- ๐ง๐ปโ๐ผ Admin product management: Example code
- ๐ง๐ปโ๐ป User authentication: Example code
- ๐ฏ Filter / sort product: Example code
- ๐ณ PayPal integration
- ๐ Search product
- โจ Live inventory
- ๐ฑ Responsive design