Classified-ads-48

🧰 Tech stack

Bringing to the web the idea of classified advertising. Together with rich input forms and an interactive map, we hope to create a digital platform that scales for different categories (sections) and for a large load of accessing users. All with a simple navigation, minimal subscription and respecting user privacy.

Inspired from newspapers

Newspaper classifieds
Advertisements in a newspaper are typically short, as they are charged for by the line or word, and are one newspaper column wide.
Publications printing news or other information often have sections of classified advertisements; there are also publications that contain only advertisements. The advertisements are grouped into categories or classes such as "for sale—telephones", "wanted—kitchen appliances", and "services—plumbing", hence the term "classified". Classified ads generally fall into two types: individuals advertising sales of their personal goods, and advertisements by local businesses. Some businesses use classified ads to hire new employees. link to Wikipedia

In Classified-ads-48 however (this repository), users can post in the following sections:

Donations (main section of the website)
Skills
Articles: DIY, How-Tos, passions, passtimes and hobbies

and the map that I chose is Algeria.

The purpose of this project is to let forkers implement new sections and offer the wep-app for other geo-locations.

Classified-ads-48 utilizes many front and back-end libraries to offer a rich set of form, users can post HTML styled articles with pictures.

Classified-ads-48 respects user privacy and offers a passwordless login.

Classified-ads-48 acts like a Man In the Middle to offer messaging between users. Without a heavy messaging system like internal messages box. It rather let users use their respective emails.

JavaScript libraries and credits

Classified-ads-48 utilizes a lot of beautiful and effective libraries besides server npm packages, these are the libraries and snippets used for front-end (descriptions from their respective repositories):

pell: the simplest and smallest WYSIWYG text editor for web, with no dependencies repo
tagify: lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue repo
toasty: A minimal JavaScript notification plugin that provides a simple way to display customizable toast messages on the web page with CSS3 transition effects. repo
holmes: Fast and easy searching inside a page repo It uses microlight also.
auto-complete: An extremely lightweight and powerful vanilla JavaScript completion suggester. repo
jsi18n: Simple client side internationalization with javascript. repo
avatar: Library for showing Gravatars or generating user avatars. repo
FontPicker: Font selector component for Google Fonts . repo
stretchy: Form element autosizing, the way it should be. repo

Thanks to all people involved! For backend see the License section

Database

MongoDB using the official MongoDB Node Driver

Client data

Mostly Geodata or data to derive tags from are hosted temporarily here

Style

It is inteded to be clean, fast and paper/newspaper looking style and layout.

Data model is really simplistic. I only used one table (or collection in NoSQL jargon).

Routes

Note
We use Listings/listing term as a designation of posts/post.

Routes reflect what is possible. See https://github.com/bacloud14/Classified-ads-48/blob/main/routes/listings.js Otherwise, this is the list of routes (queries and views):

domain/listings -> listings.ejs : is for showing some of listings. Also to initiate the following post queries
domain/listings/{section} -> listings.ejs : is for showing some of listings. but for some section
domain/listings/gwoogl -> listings.ejs : for search of listings
domain/listings/add_donation -> listing.ejs : for adding a listing
domain/listings/add_skill -> listing.ejs : for adding a listing
domain/listings/deactivate -> messages.ejs : to deactivate a listing
domain/listings/{some_id} -> listing.ejs : to show a listing of some id
domain/ -> index.ejs : shows map & exposts all other routes (contact, tags, listings, ...)
domain/{some_tag} -> listings.ejs : to show all listings about one tag
domain/{some_division} -> listings.ejs : to show all listings for some geo delimitation
domain/listings/tags -> tags.ejs : for exposing contant list of possible tags
domain/contact -> messages.ejs : for user messaging
domain/game -> game.ejs : a map connected with sockets to send data back and forth between browser and server and broadcast data to all users
domain/easteregg -> easteregg.ejs : you can leave SVG animations there ;)

There are also other routes that client side JS code fetches:

domain/data/get_{section}tags{lang}

Deployment

git clone https://github.com/bacloud14/Classified-ads-48.git
cd Classified-ads-48
Create files and folders ignored in .gitignore which are:
- creds/ (folder with a Google Cloud store credentials)
- /sessions (empty file)
- .env (check bellow *)
- /client/dist (empty folder)
- /client/.env (check bellow **)
- Check tree file
Create MongoDB databases: listings_db_dev and listings_db with both collections listing and words
cd client then npm install
Go back to root folder to npm install then npm run prestart
npm start (or you can install pm2 globally and run pm2 start)
When you get your hands on, you can change map data, delivered messages and so on.

Environment variables

.env

NODE_ENV={local/development/production}
HONEYPOT_KEY={get a free key from https://www.projecthoneypot.org/}
PASS={password3}
PASS2={password4}
EMAIL_TO={email1}
EMAIL_PASS={password2}
EMAIL_FROM={email2}
MONGODB_URI={you can keep empty for 'local' env}
GCLOUD_STORAGE_BUCKET={Google-cloud-storage bucket name}
CREDS_PATH=./creds/{{Google-cloud-storage credentials file-name}}

client/.env

NODE_ENV={local/development/production}
LATITUDE={Latitude that suits chosen geolocation (center?)}
LONGITUDE={longitude that suits chosen geolocation (center?)}
BORDERS_FILE_URL={link to borders json (ex: https://raw.githubusercontent.com/bacloud14/listings-data/main/data/geo/borders-algeria-v0.json)}
STATES_FILE_URL={link to states delimitations json (ex: https://raw.githubusercontent.com/bacloud14/listings-data/main/data/geo/states-algeria-v0.json)}  
GOOGLE_FONT_API={Google font API key}