Merre.al
E-Commerce Marketplace for the Balkans
Introduction
Merre.al
is an online marketplace platform designed for the Albanian market.
It aims to provide an optimal experience tailored to the Albanian market facilitating buying and selling of various
items - with a focus on User Experience - primarily optimized for performance and ease of use.
36 Pages & 200 Components
Extensive Interfaces & Functionality
40 REST API Endpoints
Built with SvelteKit and ElysiaJS - Bun
Over 150,000 Lines of Code
The Scale of the Project Codebase
Project Objectives
I wanted to provide users with the best possible experience, allowing them to find the products they need and sell
the ones they don't - all in one place.
These were the main objectives of the project:
The Search Interface
In a platform such as Merre, it's crucial to allow the user to search for products with ease - whether on mobile
or desktop - and provide the results fast.
Through a careful implementation of caching practices and by following best practices in SSR and incremental data loading
with SvelteKit - it feels like the page knows what you want ahead of time.
Card Post Preview - Single Item
List Post Preview - Multiple Items
Price Filter Interface - Dynamically Generated for every query
Currency Switcher - Built to allow users to select their preferred currency
Posts
Posts are at the heart of the Merre Platform. We wanted to make it as easy as possible for users to create and
manage their products.
This is why we focused on creating user-friendly interfaces that allow users to do just that.
Post Information - Desktop View
Price Preview - Post Page
Location Section & Price History - Post Page
Post Management
Interfaces designed to allow users to update all details of their posts.
Manage Posts Interface - Desktop View
Drag and Drop - Image Manager for Posts
Categories & Tags (Post Attributes)
In order to differentiate between products and allow users to easily filter and find what they're looking for -
categories were implemented.
When the User creates a Post, they can select it's category, and a list of Tags will be displayed, so the user can
insert the necessary information
Users - Merre
In order to facilitate a good experience for the users of the platform, the following had to be designed and developed:
Dashboard and Settings Pages with 30+ Input Fields
Recently Viewed & Liked Posts
Authentication System Built from Scratch w/ Cookies
Link Actions - Change Password (Forgot Password), Confirm Email & Phone Number
Messages & Notifications
Real-Time communication between users w/ Multiple Content Types (Post, Text, Image, etc.)
It was important to develop a powerful messaging solution, allowing users to communicate with each other - without
having to rely on external solutions.
I opted for a custom, from-scratch solution, instead of opting for an existing plug-and-play service provider - in
order to deliver to users full integration with other features of the platform, and to be better prepared for build
systems similar to it, in the future.
Database Design
Created Complex (Many-To-Many) Relations and ACID transactions to handle updates of platform posts (products)
Utilized Prisma ORM to query the DB in a type-safe manner & for generating complex queries involving multiple entities, often interlinked
Technical Details:
Key Functionalities
Some of the crucial functionalities of the website:
Custom Authentication Solution & Middleware
User Registration & Recovery
Protected Routes and Redirects
User Roles & Permission Management
Post Creation & Management
Create and Manage Your Products
For Individual Users and Businesses
Edit, Update, and Delete Posts
Image Upload & Storage
Upload Images for Product Listings
Optimized for Storage and Performance
Supports Multiple Formats
Search & Filtering Capabilities
Efficient Search for Products
Filter by Categories, Price, and More
Supports Advanced Queries
Persistant Data w/ Local Storage
Save User Preferences Locally
Enable Quick Access to Saved Listings
Supports Persistence Across Sessions
Dynamic Form Inputs w/ Validation
Automatically Generated Form Inputs
Handle changes and update Form State
Supports Debounced Data Fetching
DevOps & Linux
Dockerized the Platform and implemented Rolling Updates (Zero Downtime) with Coolify with Git Commit web-hooks
Database Backups & Service Status Monitoring
Server Redundancies through Docker Swarm Setup
Connected Hetzner VPS to Local Home Server for optimal performance
-> View Blog Article
Tech Stack:
Some of the primary technologies used in the development of the platform:
