Back to projects

JMQ Furniture Store

A modern e-commerce platform for furniture shopping, built with Next.js, TypeScript, and Tailwind CSS.

3 min read
By Benjo Quilario
Next
E-commerce
TypeScript
Web Development
Programming
JavaScript
React

LiveUrl: https://jmqfurniture.store

GitHub: https://github.com/benjoquilario/furniture-jmq

Note: This project is not yet fully completed, and still under development.

This project is my mother's online furniture store, JMQ Furniture Store, is a modern e-commerce platform designed to provide a seamless shopping experience for customers looking for high-quality furniture. The store features a wide range of products, including sofas, chairs, tables, and more, all presented in a user-friendly interface.

My mother wanted to expand her business online, and I took on the challenge of building a fully functional e-commerce website that showcases her products and allows customers to make purchases easily.

My mother used to manage customer inquiries through Facebook Messenger and mentioned that she wanted a website where customers could browse products, as she was tired of repeatedly sending images and waiting for responses. She wanted a platform where customers could easily view products, make purchases, and enjoy a more streamlined shopping experience.

Note: The website is currently under development, and some features may not be fully implemented yet. However, the core functionality is in place, and I am continuously working on improving the user experience and adding new features.

Features

  • Product Catalog: A comprehensive catalog of furniture products with detailed descriptions, images, and prices.
  • Shopping Cart: A user-friendly shopping cart that allows customers to add products, view their selections, and proceed to checkout.
  • User Authentication: Secure user authentication for customers to create accounts, log in, and manage their profiles.
  • Order Management: A system for managing orders, including order history, tracking, and status updates.
  • Responsive Design: A fully responsive design that ensures a seamless shopping experience on both desktop and mobile devices.
  • Search Functionality: A powerful search feature that allows customers to quickly find products based on keywords, categories, and filters.
  • Admin Dashboard: An admin dashboard for managing products, orders, and customer inquiries efficiently.
  • Customer Support: A contact form for customer inquiries and support, allowing customers to reach out easily with questions or concerns.

Technologies Used

  • Next.js: A React framework for building server-side rendered applications, providing a fast and efficient user experience.
  • TypeScript: Adds static typing to JavaScript, enhancing code quality and maintainability
  • React: A JavaScript library for building user interfaces, allowing for a component-based architecture.
  • Tailwind CSS: A utility-first CSS framework for building responsive and modern user interfaces quickly and efficiently.
  • Prisma: An ORM (Object-Relational Mapping) tool for managing the database, providing a type-safe way to interact with the database.
  • PostgreSQL: A powerful, open-source relational database management system used to store the application's data.
  • Auth.js: A complete open-source authentication solution for Next.js applications, providing secure authentication and session management.
  • Uploadthing: A file upload service for handling product images and other media files, ensuring efficient storage and retrieval.

Development Process

The development of the JMQ Furniture Store involved several key steps:

  1. Planning: Defining the project scope, features, and overall architecture of the application.
  2. Design: Creating wireframes and mockups for the user interface, ensuring a user-friendly experience.
  3. Implementation: Building the application using Next.js, TypeScript, and Tailwind CSS, integrating the necessary features and functionality.
  4. Testing: Conducting thorough testing of the application to ensure all features work correctly and provide a smooth user experience.
  5. Deployment: Deploying the application to a production environment using Vercel, making it accessible to users.
  6. Feedback and Iteration: Gathering feedback from users and making improvements based on their suggestions, continuously enhancing the application to meet user needs.