allantap/products-marketplace-app

Marketplace React Application

Next Marketplace App. This project demonstrates the integration of a React.js frontend with a backend API to manage a list of marketplace items, and showcases blockchain integration using Web3.js.

Table of Contents

• Introduction
• Features
• Technologies Used
• Installation
• Usage
• Project Structure

Introduction

This application is designed to fetch and display a list of products from a backend API and provide a form to add new items to the marketplace. Additionally, it integrates with a blockchain (Ethereum testnet) to display the current blockchain network status and the latest block number.

Features

• Fetch and display products from the backend API.
• Add new items to the marketplace through a form.
• Display the current blockchain network status (connected/disconnected).
• Show the latest Ethereum block number with regular updates.

Technologies Used

• React.js
• Web3.js
• Tailwind CSS
• Jest
• Express.js

Installation

To get a local copy up and running, follow these steps:

1. Clone the repository

   git clone https://github.com/AllanTAP/products-marketplace-app.git
   cd products-marketplace-app

2. Install dependencies

   yarn

3. Set up the backend API

   Ensure you have the backend API running on http://localhost:3001.

4. Start the development server

   yarn dev

Usage

Once the development server is running, you can access the application at http://localhost:3000. The main functionalities include:

• Viewing Products: The products fetched from the backend API will be displayed on the main page.
• Adding a Product: Click the "+" button to display the form, fill in the details, and submit to add a new item to the marketplace.
• Blockchain Status: The current connection status to the blockchain and the latest block number are displayed.

Project Structure

├── public
│   ├── index.html
│   └── ...
├── src
│   ├── components
│   │   ├── AddProduct.tsx
│   │   ├── ProductsList.tsx
│   │   ├── Web3Connection.tsx
│   │   └── ...
│   ├── App.tsx
│   ├── index.tsx
│   ├── types
│   │   └── product.ts
│   ├── lib
│   │   └── web3.ts
│   └── ...
├── README.md
├── package.json
└── ...

---

For any additional questions or feedback, please contact your email.

---

Made by AllanTAP