Ironhack Project 3 — Blog — How I Built This: Full-stack MERN AI Voice-activated E-commerce App
As part of every project, I like to take the time to do a small retro to evaluate how the project went, learnings made, and identify opportunities to improve next time.
I’m taking part in a bootcamp — Ironhack, here in Berlin, evenings and weekends on top of my full-time job. This is our third and final project, a full-stack app built with Node/Express/MongoDB/React. You can view my second project here.
Finished Project: https://www.askcommerce.co
GitHub repo: https://github.com/ChrisJCastle93/speech-to-text-react-v2
Stack: Node, Express, MongoDB, React, Chakra UI, Redis, Stripe
The Project
“Alexa, play some music”
“Hey Siri, what’s the weather like today?”
“Okay Google, set a timer for 5 minutes”
Voice activated services are proliferating throughout our daily lives. I wanted to learn more and integrate this functionality into an app, and chose an e-comm store to get a project under my belt that used a payment gateway.
The Solution
On the surface, it’s your standard e-comm store. Let’s take a look under the hood at some of the features I think are cool:
- Speech-To-Text: Search for products using just your voice! The audio is captured by the client using the browser’s media recorder, sent to the back end, and then sent to be processed by IBM’s Watson AI.
- Amazon API: All products are pulled from an Amazon-scraping API. You simply send across the search term and are returned a set of products. It caused some headaches due to object structures being different between responses.
- Caching: The performance of the Amazon-scraping API I used is terrible. To counteract this, I cache the search results based on the search term for a week using Redis. It makes the cached searches and pages super fast — the homepage went from a 6 second load time to 0.081 second load time. The documentation, however, is a pain.
- Stripe: Complete checkout like a real e-comm site using Stripe. I’ve always loved Stripe — the docs are clean, and it’s so flexible it can suit any type of business.
- Chakra UI: This is my first app built using Chakra UI. To me, the use of style props feels logical vs loading up on class names a la Tailwind. Definitely keen to experiment more with Chakra.
Key Learnings
- Cross-browser compatibility: towards the end of development, I realised that the speech-to-text functionality wouldn’t work on Safari due to the file type supported when recording on the microphone being incompatible with IBM Watson. If i get the chance I’ll find a converter that will allow Safari compatibility.
- API speccing: it was hard to find an API of Amazon products (Amazon offers one, but you have to jump through hoops, like making 20 affiliate sales, before you can use it), and implementing it was challenging because the object structure varied depending on what you are searching. It was also super slow, taking up to 8 seconds to respond. In future, it’s important for me to spec out my requirements ahead of time and evaluate different API options before choosing one.
- Test goddamnit! I caught a lot of bugs with user testing at the end of the project development that could have been caught much earlier with unit and/or E2E testing. The challenge, I’m finding, is to know what to test before kicking off a project.
Future improvements
If I was to continue developing this project, I’d invest time in:
- Performance Optimization: As noted above, some elements of the app run slow — I’d look to optimize the performance with caching likely common search terms or top products.
- SEO Optimization: I could do more in terms of adding alt tags, meta descriptions etc
- Chat Functionality: Chat with customer support using socket.io
- Order Confirmation Email: Using Nodemailer to trigger order confirmation upon payment confirmation
- Product Creation: I could turn it into a marketplace and facilitate product creation.
Conclusion
All in all, loved building my first React app. I’ve already got my next few lined up:
- An AI itinerary generator for tour operators
- A closed marketplace to swap homes with colleagues
- A beautiful, conversion-optimised, performative website for small tour operators. Thinking I’ll hook it up to a Google Sheets API to be simple and editable for the user
Feel free to reach out to connect!