Marketplace - a Blocket clone

Overview • Setup • Screenshots • Future improvements

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

Technologies used

Backend

Name	Description
Spring Boot	Java framework
Test Containers	Unit testing using Docker containers
Github Actions	CI: running unit tests and building project

Frontend

Name	Description
Next.js	Full-stack JavaScript framework
Shadcn UI	UI component library
SWR	Client-side data fetching library
Tailwind	CSS styling library
Github Actions	CI: linting, format checking, and building project

Hosting of this project

Name	Description
Vercel	Frontend hosting
Railway	Backend and database hosting

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 unit 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.bat 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.

Running 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

Run backend tests (optional)

Note

Docker must be installed and running for unit tests to be run.

• Run: cd backend and then ./gradlew test to run the backend tests.

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.

Running 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

Run backend tests (optional)

Note

Docker must be installed and running for unit tests to be run.

• Run: cd backend and then gradlew.bat test to run the backend tests.

Screenshots

Creating a product listing

Watchlist page - subscribe to new posts in chosen categories

Profile page

Future improvements

• CSRF protection using the CSRF synchronizer pattern
• Rate limiting
• Captcha for the signup endpoint
• Open graph metadata and other SEO related features
• Image hosting on a CDN
• Pagination on search page
• Chat feature between buyers and sellers