devjoylee/nodeul-market

Grocery Sharing Service built in Esbuild 🍎

Nodeul Market (노들마켓)

View Demo

Table of Contents

About The Project

Built With

Getting Started

Main Features

About The Project

Anyone living alone or with a small family may experienced throwing away rotten fruits or vegetables from the fridge. If you buy a small amount, it is expensive, and if you buy it in bulk, it will eventually become a troublesome work. So, here is the solution. An online local market service designed to help you share fruits, vegetables, frozen foods, dairy products and other food items to neighbors at a low price.

💡 What does the 'Nodeul Market' mean?
I was living in a shared house called 'Nodeul House' when there was zero waste boom in Korea. I made this service from the thought of sharing groceries with housemates effectively to follow the zero wast campaign. That's why I named it as 'Nodeul Market', which means a market in Nodeul House.

• Production Period : 2021.04.01 - 2021.04.21

Built With

        

Getting Started

You are able to start the app by typing the following commands in the command line:

git clone https://github.com/devjoylee/nodeul-market.git
npm install
npm run dev

Main Features

Q: What products are usually sold?

The main products include 1) fruits and vegetables which cannot keep it long, 2) soy milk and frozen foods that are difficult to purchase in small quantities. You can click the 'ADD TO CART' button if there is something you like.

• Code Preview

// App.tsx
// Move to cart when you click 'ADD TO CART'
const handleAddToCart = (clickedItem: iItemDetail) => {
	setCartItems((prevItems) => {
		// Is the item already added in the cart?
		const isItemInCart = prevItems.find((item) => item.id === clickedItem.id);
		if (isItemInCart) {
			alert("It's already in your cart 😋");
			return [...prevItems];
		}

		// First time the item is added
		alert("Successfully added 🎉");
		return [{ ...clickedItem }, ...prevItems];
	});
};

Q: How can people buy a item?

Once you have placed the item in your shopping cart, click the MY CART button at the top to view your cart history. If you wish to buy it, click BUY THIS button to let the seller know. If you don't want to buy it, delete the product with the DELETE THIS button.

• Code Preview

// App.tsx
// Delete an item from the cart
const handleRemoveFromCart = (id: number) => {
	if (confirm("Are you sure to delete it from the cart?")) {
		setCartItems((prevItems) => {
			return prevItems.filter((item) => item.id !== id);
		});
	}
};

Q: How can people add a item?

Click the ADD ITEM button at the top or at the center of the banner to add the item. Fill out the form about the item you want to share, and click the ADD TO INVENTORY button to save it.

• Code Preview

// components/NewItemModal
// Used react custom hooks (useForm, useImage)
const { values, handleChange, handleResetForm } = useForm();
const [errors, setErrors] = useState({} as ErrorMessage);
const fileImageRef = useRef<HTMLInputElement>(null);
const { preview, handleImageURL, handleRemoveImage } = useImage();

//...

// Check the form validation when you click the submit button.
const handleSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
  e.preventDefault();

  const error = await validate(values);
  const hasInvaild = Object.keys(error).length;
  setErrors(error);

  // store the uploaded image
  if (preview) {
    values.image = preview;
  }

  // if all vaildation is passed, add to inventory
  if (!hasInvaild) {
    addToInventory(values);
    closeModal();
  }
};

(back to top)