How Knots of Macrame (KOM) E-Commerce Website Was Built

At Knots of Macrame (KOM), we aimed to create an e-commerce platform for unique handmade home decor items, such as macrame wall hangings, cushions, and lamps. The challenge was to build a seamless, scalable, and secure website that not only showcases our products but also provides an exceptional shopping experience.

In this article, I’ll walk you through how we built KOM’s e-commerce website using a powerful tech stack that includes PostgreSQL, Express.js, React, Node.js, Firebase and AWS.

---

The Tech Stack: MERN + AWS (PostgreSQL)

We chose the MERN stack for its flexibility, scalability, and efficiency, with PostgreSQL replacing MongoDB for a relational database solution. Here's a breakdown of the technologies:

1. PostgreSQL

We replaced MongoDB with PostgreSQL, a powerful relational database, to store our products, orders, and user data. PostgreSQL's ability to handle complex queries, relationships, and data integrity made it a great choice for KOM’s needs.

2. Express.js (E)

Express.js is the backbone of our backend. It helps us build RESTful APIs quickly and manage routes, middleware, and server-side logic. Express integrates smoothly with PostgreSQL and Node.js.

3. React (R)

The front-end is powered by React. React’s component-based architecture allows us to build dynamic, interactive user interfaces that are easy to manage and scale. It's also highly efficient in rendering content, making the user experience smooth.

4. Node.js (N)

We use Node.js for server-side operations, enabling us to run JavaScript across the full stack. This unified language simplifies development and improves performance with its non-blocking architecture.

---

Hosting and Infrastructure with AWS

For high availability, security, and scalability, we chose AWS to host KOM:

1. Amazon EC2

We use EC2 instances to host our application and scale based on demand, ensuring that the website remains fast and responsive even during peak traffic.

2. Amazon S3

All product images, videos, and other media assets are stored in Amazon S3, ensuring fast, reliable access with built-in security.

3. Firebase Authentication

For user authentication, we implemented Firebase Authentication with Google login. Upon successful login, Firebase issues a token that is verified on the server side using Firebase Admin SDK for all API calls, except for the publicly accessible products route. Alternatively, we could use JWT (JSON Web Tokens) for authentication, where the server issues a JWT upon login, which is then sent with each request to verify the user’s identity.

4. Nodemailer

We use Nodemailer to send email notifications like order confirmations and shipping updates. It integrates well with our Node.js backend, allowing us to communicate easily with customers and suppliers.

5. Razorpay

To securely process payments, we integrated Razorpay. This popular payment gateway supports credit cards, debit cards, UPI, and more, providing a smooth payment experience for our customers.

---

Additional Features and Functionality

1. Redux for Cart Management

We used Redux to manage the shopping cart state. This ensures that the cart data remains consistent across the application, allowing customers to add, update, or remove items seamlessly.

2. Product Pages

Each product has a dedicated page with detailed descriptions, images, and prices, ensuring an informative and engaging shopping experience.

3. Shopping Cart and Checkout

The shopping cart and checkout process are designed for simplicity, integrating with Razorpay for secure payment processing.

4. Mobile Optimization

The website is fully responsive, ensuring a smooth experience across smartphones and tablets.

---

Challenges and Lessons Learned

• Scalability: Fine-tuning database queries and server-side logic was crucial as our user base grew.

• Payment Integration: Razorpay's integration required careful handling, but once done, it provided a seamless experience.

• Security: We prioritized secure authentication, ensuring that Firebase tokens are verified for each user request.

---

Conclusion

The KOM e-commerce website combines the best technologies, including PostgreSQL, React, and AWS, to deliver a fast, scalable, and secure platform. Building this site taught us valuable lessons about full-stack development, e-commerce, and user experience.

By leveraging Redux for cart management and Firebase for authentication, we ensured a smooth and secure shopping experience for our customers. We continue to improve KOM and explore new technologies to keep enhancing our platform.