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

• Git version >= 2.13
• Java JDK version >= 21
• Node.js version >= 20
• A PostgreSQL DB instance set up with the provided schema.sql
• (Optional) Docker for running backend tests

Docker

Note

Make sure Docker is running before executing the following command:

Download, build, and run:

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 .. && \
docker-compose up --build

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

Windows (Untested)

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