Marketplace - a Blocket clone

Overview • Setup • Screenshots

Search page on desktop	Search page on mobile

Overview

This is a web app that allows users to buy and sell products through product listings. The design of the app is heavily inspired by Blocket (a Swedish website similar to Facebook marketplace). The application consists of a frontend made with the JavaScript framework Next.js and a backend made with the Java framework Spring Boot.

Key features

• Create product listings with image(s), description, price etc.
• Search for product listings by various search criteria
• Subscribe to new listings in chosen product categories
• Purchase history
• UI for desktop & mobile

Setup

• Prerequisites
• Setup using Docker
• Setup using Linux/macOS
• Setup using Windows (Powershell)

Prerequisites

• Git version >= 2.13
• Java JDK version >= 21
• Node.js version >= 20
• A PostgreSQL DB instance set up with the provided scripts in the db-init/ directory
• (Optional) Docker for running backend tests or using the Docker setup

Setup using Docker

Note

This setup requires Docker to be installed. Make sure Docker is running before executing any of the following commands.

Dockerfiles are provided in the backend and frontend modules, which can be run individually if desired. The following setup will use docker-compose to instantiate the frontend, the backend, and a PostgreSQL database. These instances are configured using the docker-compose.yml file, which can be customized.

Download, build, and run in one command:

Linux/macOS

git clone --recurse-submodules https://github.com/luxcorel/marketplace && \
cd ./marketplace && \
cd ./backend && \
./gradlew build -x test && \
cd .. && \
docker compose up --build

Windows (Powershell)

Invoke-Command -ScriptBlock {
$ErrorActionPreference="Stop";
git clone --recurse-submodules https://github.com/luxcorel/marketplace ; `
cd ./marketplace ; `
cd ./backend ; `
./gradlew build -x test ; `
cd .. ; `
docker compose up --build
}

Run already downloaded and built modules:

docker compose up --build

If everything was successful:

• Frontend server @ http://localhost:3000
• Backend server @ http://localhost:8080

Setup using Linux/macOS

Download & build:

git clone --recurse-submodules https://github.com/luxcorel/marketplace && \
cd ./marketplace && \
cd ./backend && \
mv ./.env.example ./.env && \
./gradlew build -x test && \
cd .. && \
cd ./frontend && \
mv ./.env.example ./.env && \
npm install && \
cd ..

After the command above finishes, required environment variables need to be set:

• Open backend/.env with a text editor and follow the instructions in the file.
• Open frontend/.env with a text editor and follow the instructions in the file.

Lastly, to run the project:

• Run cd backend && ./gradlew bootRun to start the backend server.
• Run cd frontend && npm run dev to start the frontend server.

If everything was successful:

• Frontend server @ http://localhost:3000
• Backend server @ http://localhost:8080

Setup using Windows (Powershell)

Download & build:

Invoke-Command -ScriptBlock {
$ErrorActionPreference="Stop";
git clone --recurse-submodules https://github.com/luxcorel/marketplace ; `
cd .\marketplace ; `
cd .\backend ; `
ren .\.env.example .\.env ; `
.\gradlew build -x test ; `
cd .. ; `
cd .\frontend ; `
ren .\.env.example .\.env ; `
npm install ; `
cd ..
}

After the command above finishes, required environment variables need to be set:

• Open backend\.env with a text editor and follow the instructions in the file.
• Open frontend\.env with a text editor and follow the instructions in the file.

Lastly, to run the project:

• Run: cd backend and then gradlew.bat bootRun to start the backend server.
• Run: cd frontend and then npm run dev to start the frontend server.

If everything was successful:

• Frontend server @ http://localhost:3000
• Backend server @ http://localhost:8080

Screenshots

Creating a product listing

Watchlist page - subscribe to new posts in chosen categories

Profile page