AllMart

Full-Stack web application demo where the frontend fetches product data from a custom built API.

Project Overview

AllMart is a full-stack application developed to simulate a grocery store API. It combines a Node.js backend with a responsive frontend to provide features like product search, category filtering, and voice search for accessibility.

Goal

While exploring grocery store websites, I noticed a lack of voice search functionality, which could improve accessibility for users. The goal was to create a user-friendly API and frontend that not only supports traditional search and filtering but also integrates voice search using the browser built-in Web Speech API.

Process

AllMart comprises of:

  1. AllMart Groceries - The front-end
  2. AllMart Groceries API - The backend

I developed the backend from scratch using Node.js and Express to create different endpoints for the API to serve product data to the frontend. The front-end includes features like dynamic product search, voice search, and wishlist management using local storage.


Throughout the development process, I encountered a few challenges:


  1. Challenge: Handling errors during API calls and ensuring the application remains responsive.
    Solution: I implemented a try...catch block in the fetch logic to handle network issues and display user-friendly error messages.
  2. Challenge: Filtering products dynamically based on user input.
    Solution: I used JavaScript array methods like filter() to efficiently process and display the data based on user input.
  3. Challenge: Integrating voice search functionality.
    Solution: I utilized the Web Speech API to capture and process voice input, ensuring compatibility across browsers. If the browser does not support the Web Speech API, a message is displayed to inform the user. A key feature that aids in accessibility.
  4. Challenge: Setting the backend server and building the API endpoints for product filtering.
    Solution: I built a REST API using Node.js and Express. I implemented dynamic endpoints like /api/products?category=fruit using query parameters {category, name, id} to filter data. For example, I used filter() method to return only products that match the user’s request. This allows the client to request exactly what it needs without overfetching data.

I hosted the API using Render to make it publicly accessible and used cors middleware to handle cross-origin requests from the front-end.

Tech Stack

Node.js

HTML5

Tailwind CSS Logo

TailwindCSS

JavaScript

GitHub

Key Features

  1. Search products by name, category, or ID
  2. Voice search using the Web Speech API
  3. Dynamic product rendering with error handling
  4. Wishlist functionality with local storage

What I Learned

This project taught me:

  1. How to build a REST API using Node.js and Express
  2. Build and connect a frontend with a backend
  3. How to manage real world API issues like errors and async logic
  4. Testing and debugging APIs effectively using Postman and Axios
  5. How to implement voice search for improved accessibility
  6. How to deploy a backend server using Render
  7. How to use CORS middleware for handling cross-origin requests

Links

Back to Projects