Hacktoberfest: I only accept pull requests where the user went through installation. Please share a capture of a working installation with pull request. Also, I do not accept "any" pull request. Something like: Changing a button color would (most probably) be ignored.
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.
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, pastimes and hobbies
and the map that I choose 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.
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
MongoDB using the official MongoDB Node Driver
Mostly Geodata or data to derive tags from are hosted temporarily here
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).
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}
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
andlistings_db
with both collectionslisting
andwords
cd client
thennpm install
- Go back to root folder to
npm install
thennpm run prestart
npm start
(or you can install pm2 globally and runpm2 start
)- When you get your hands on, you can change map data, delivered messages and so on.
.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}
I want to build an open announcements platform in Algeria (Lack of an online serious posting platform. I feel Facebook and others alone are so diverse but a separate specialized platform with a map can be a good case).
- Index page shows fresh listings
- Section page shows listings of type donations, skills or blogs
- Add a listing, depending on secrtion type, show or hide map
- Get a listing
As always, all my repositories are firstcomers friendly !
As I am always learning, please do not hesitate to open any new issue (like better code, readability, modularity and best practice, performance, better UI or even functionality enhancements...).
Also I would like to thank the following contributors:
mbussert for helping dark theme
leycnmhd for helping refactoring client code
Classified-ads-48 is released under a CC BY-NC-SA License.
Licenses from third parties
Licenses from third parties (complete)