HMX

HMX

HMX is an open-source e-commerce application designed to provide a modern and visually appealing user experience. The application seamlessly integrates frontend and backend technologies, delivering a fully functional and efficient e-commerce solution.

Roles In Project

  • UI/UX Designer
  • Frontend and Backend Developer
  • Deployment and DevOps responsibilities

Responsibilities

  • Crafted an engaging and modern user interface (UI) for HMX, ensuring a delightful shopping experience.
  • Utilized Next.js (13) to implement user-facing features, ensuring a seamless and responsive user experience.
  • Developed a well-coded Node.js Express backend following best practices.
  • Implemented centralized error handling to enhance the reliability of HMX's backend.
  • Deployed the backend on Railway and the frontend on Vercel, ensuring optimal performance.
  • Managed end-to-end deployment processes and DevOps responsibilities.
HMX

HMX is a testament to successful synergy between cutting-edge frontend and backend technologies.

The backend, hosted on Railway, is built on Node.js Express, providing a robust foundation for HMX.

On the frontend, developed with Next.js and hosted on Vercel, users are treated to a modern, fully functional e-commerce experience.

HMX also features an intuitive admin dashboard for efficient management.

Features

Backend Features

  • Centralized error handling for improved reliability.
  • File uploads facilitated using express-file-upload and Cloudinary.
  • API documentation generated with Swagger.
  • Razorpay integration for secure payments.
  • Custom roles for users and admins.
  • Resource validations using Zod.
  • Email functionality implemented using Nodemailer.

Frontend Features:

  • Credential authentication using NextAuth.
  • Leveraged Next.js 13 app router for client and server components.
  • Feature-rich admin dashboard with a modern UI, providing administrators with comprehensive tools for efficient management.
  • Utilized React Query for simple queries and infinite scroll.
  • State management achieved with Zustand.
  • Beautifully designed UI with Shadcn/UI components, focusing on accessibility, customization, and speed.

Challenges

1. Learning Backend and TypeScript:

  • Challenge: During the initial stages, the challenge involved simultaneously learning backend development and TypeScript. This was particularly demanding given the multifaceted role encompassing UI/UX design, frontend and backend development, and deployment.
  • Resolution: Overcame the challenge by diligently following the "Pro Backend" course by Hitesh Choudhary. Seeking guidance from creators of libraries such as Zod and Pino validated the implementation of best practices in TypeScript.

2. Centralized Error Handling:

  • Challenge: Distinguishing catastrophic errors from operational errors and handling them centrally proved to be a significant challenge. The decision to encapsulate error-handling logic in a dedicated and centralized object required meticulous consideration.
  • Resolution: Successfully implemented a centralized error-handling system to categorize and manage errors efficiently. This involved encapsulating error-handling logic, ensuring proper logging, deciding error-crashing strategies, and monitoring metrics.

3. Adopting New Technologies:

  • Challenge: The decision to adopt new technologies, such as Next.js 13 and React Query and more, introduced a learning curve. Adapting to the changes and incorporating the latest features while maintaining a high level of performance required a thoughtful approach.
  • Resolution: Successfully navigated the challenge by investing time in understanding the intricacies of Next.js 13, React Query and Shadcn/UI. The adoption of these technologies contributed to the enhancement of the application's frontend.

4. UI/UX Design:

  • Challenge: As a developer and not a dedicated UI/UX designer, perfecting the UI for optimal user experience presented a substantial challenge. Achieving a balance between aesthetics, accessibility, and responsiveness demanded extensive effort.
  • Resolution: Despite the challenge, dedicated significant time to refining the UI, ensuring it aligns with modern design principles. The resulting UI not only met high standards but also contributed to an engaging and visually appealing user interface.

Technology Stack

  • Next.js
  • Typescript
  • Node.js
  • Express.js
  • Razorpay
  • Cloudinary
  • MongoDB
  • Swagger
  • Shadcn/ui
  • React Email
  • Resend
  • Tailwind CSS
  • Framer Motion
  • Next Auth
  • Recharts
  • React Query