If there is one certainty in development, it is that nothing is ever constant. New frameworks and libraries are frequently being brought to light. Some become short-term fads, while others have a much longer lifespan. And, part of the job of every developer is to determine which ones fit the needs of the application…and then learn it.
But learning takes different forms for everyone.
Some developers dive into the documentation. Others just start with a fresh project off the bat. I, however, need to take a few different routes.
Starting with Tutorials
As my job’s focus started to shift away from Vue.js for front-end work earlier this year and move to React, I was quite uncertain how the learning curve would be. I had dabbled with React several years ago to build a personal website, but to be quite honest, I didn’t understand much about state or the deep inner workings of React at the time.
Today, after having used Vue for 4+ years, I was fortunate enough to have a much clearer understanding about front-end frameworks and libraries. But, I also understood that the general consensus amongst developers was that Vue was relatively easy to learn compared to React or Angular.
Thus, my learning journey started with tutorials. As a visual learner, I needed to be able to not only watch someone code, but I needed to be able to code along as they are doing so. I learn best by having someone break down more complex coding examples and explain things in laymen’s terms.
Thus began my Udemy journey with Maximilian.
I enrolled in the 50-hour+ React course on Udemy taught by Maximilian Schwarzmüller and went through the various sections…stopping the videos along the way and skipping over parts that weren’t relevant.
I’ll admit that video tutorials can be exhausting when sitting through them for several hours. However, by the end of the course, I felt that I had a solid understanding of React and Redux.
But watching and coding along, certainly isn’t the same as developing something from scratch.
Build it to learn it
I’m quite certain that there really is no better way to test your knowledge of something than by building something. One of the greatest benefits of building from scratch is that you will undoubtedly run into issues that you’ll need to troubleshoot. And, that demonstrates resourcefulness and critical thinking skills.
For me, building sites from the ground up is challenging, but also extremely gratifying.
To really solidify my React learning, I decided to build an eCommerce site for some product designs I had hosted on Etsy. Earlier in the year I needed a creative outlet and started making some designs to put on different retail items like t-shirts and mugs. I landed on the tried-and-true site of Etsy to post my offerings, but decided that building my own site would be an ideal React project.
I created my React project using Vite, which is quite simple to setup as I didn’t need to include any bundlers like Webpack. Since my designs are printed through an on-demand site called Printful, I needed to use their API to call various endpoints to display the items, sizes and categories.
After initially calling the API from the front-end, I decided it was most efficient and performant to use a back-end database to store my product data especially since that data was rarely being changed. I landed on Django for the back-end since I’m most familiar with that interface. I then created a script that calls the Printful API daily to get any new or updated products from my account.
Last, but certainly not least, I need to integrate some type of payment processing. I ended up going with Stripe as it’s one of the most popular and secure platforms. After a little bit of fumbling, I was able to hook up their API to my React project so that payments could be securely processed.
And, voila! Kind of…
The Hiccups
Unfortunately, it wasn’t quite as easy as plugging into a few APIs, coding some CSS and Javascript click events. This was a project that took many twists and turns!
- Working with the data — the Printful API, while it offers many nice features, doesn’t always return data as I would have liked. Some of the info that magically appeared on the Etsy site, required me to make several different API calls for my own website. And, there were lots of different IDs passed through in the data — sync ids, variant ids, ids, unique ids. It took some time to determine what each of those meant and which ones I needed!
- Scripting — I was fortunate in my previous role to learn from my manager about how to write some Django scripts. I feel much more comfortable writing simple scripts today, but still admit that there is some trial and error to make sure the data aligns with the appropriate fields. My scripting got a little more complex when I had to create a few different Django models to save some Sizing information and use some many-to-many fields.
- Forms — this one was a doozy for me. As I went along with this project, my shipping template in React became quite complex. I wanted to check field validation for all of the required fields before the user moved onto the next step. BUT, I also wanted to store that info in local storage should the user leave the page before completing the checkout process. This became quite complex and I still have a *TODO* item to refactor this at some point.
- APIs — using external APIs is great. But it can also be frustrating. We’re dependent upon the documentation provided and the structure of the data given to us. I had quite a few issues getting the Stripe API to cooperate consistently. The payment fields would sometimes load on my page…and other times not. I followed the instructions, but at times they seemed counterintuitive to how an e-commerce site works. Perhaps it was just my novice-ness with building this type of site. I eventually figured out a workaround, but it took many hours of testing, googling and trying new paths.
The Successes
- React and Redux — surprisingly, I felt that the React and Redux part of this project went relatively smoothly. I learned to dispatch items I wanted to store in Redux and was able to easily retrieve those items with `useSelector`. I also used `react-router-dom` to easily get Form data as well as the actions and loader features using `createBrowserRouter`. It certainly took some time reading the documentation and troubleshooting a few things, but overall the React part felt quite satisfying.
- Webhooks — As I mentioned, I used React for the front-end and Django for the back-end, which meant that I created two separate repos for this project. I used Github for my version control and am hosting them on separate sites. While my front-end repo was easy to integrate with Github, I needed to do a bit more manual customization to get my back-end code pushed from Github to my hosting site. It was a great learning experience to get everything hooked up and succeeding. And, I’m always grateful to other developers who have shared their experience and instructions to help make the process easier!
- Lambda Functions –– Although I only have one lambda function, it was an achievement to have written my first function! After reading through some comments, I learned it was one of the preferred ways to ensure I was retrieving the appropriate data from my back-end for the payment process. Calling a lambda function to my back-end ensured the data couldn’t be manipulated by any malicious means through the DOM.
The Jist
This was honestly one of the most gratifying coding experiences I’ve had to date. There were so many struggles along the way, but also so many accomplishments. While this started out as a way to learn React, it really became so much more. I was not only the designer and developer, but I was a user. I needed to think about the user interactions, the limitations and frustrations they might encounter and adjust and change course many times to account for that experience.
It involved different API integrations, hosting configurations, code automations, scripting tests, Django REST setup and more that I’m forgetting! Sometimes projects start with one goal and by the end, you’ve achieved so much more.
Soooooo....
Would I do it again? No!
There are plenty of existing eCommerce sites out there, such as Shopify. They exist for a reason — they’ve got it figured out to a T. I did this for my own learning and to better myself as a developer. I’ve made mistakes along the way and I’m sure there are plenty of flaws and opportunities for improvement. But we never improve if we don’t at least start.
So my advice is to start! Start with an idea and slowly build it. If nothing else, it challenges your mind and tests your sanity!
If you'd like to check it out, feel free to visit womenwavemakers.com
My Tech:
- Front-end: React/Redux
- Back-end: Django/DRF
- Styling (CSS): Tailwind
- APIs: Printful and Stripe
- Version Control: Github