A reimagining of Medium.
Rare, found here, is a social journalism site that allows users to publish and share articles on any topic they find relevant.
Social journalism is about empowering users by giving them the tools (and the audience) to make their stories expressive and impactful. And finding a site that does that well is... well, Rare.
That's where we come in. Rare gives users access to a Markdown editor that gives them the freedom to choose what they want to say and how they want to say it. Story tags, likes, and comments also give users an opportunity to engage with the stories being told on the platform. Lastly, Rare presents articles openly and honestly based on each users own personal preferences. We don't have our own agenda (or some algorithim's) baked into what articles are shown to our users.
This page welcomes new or logged out users, encouraging them to register.
Once logged in, users are directed to the index where they can view the latest and most popular stories.
The story page supports all the features that Markdown provides, such as headers and other formatting, as well as displaying images.
The story page also uses a Markdown editor for comment support.
The profile page displays a user's join date, bio, as well as their authored and liked stories.
Rare uses plain JavaScript with HTML, CSS, Pug, and Markdown for handling text.
Pug is an HTML template engine that allowed us to create a re-usable HTML-like base. We then styled with CSS and edited for content with JavaScript.
//story.pug
.story-container.text-style2
.story-title.text-style1.story-container-text
.story-subheader.story-container-text
//stories.js
const { story, readTime, parsedBody, storyLikes } = await res.json();
document.querySelector(".story-title").innerHTML = story.title;
document.querySelector(".story-subheader").innerHTML = story.subHeading;
// ...and so onMarkdown serves as a familiar and easy to use format for writers to post stories and comments. The specific editor we chose to use is EasyMDE.
View of the new story editor:
The back-end uses Node, an Express server, Sequelize, and a PostgreSQL database to store all data.
This project showed us that a lot can be done even with only vanilla JavaScript, provided we are willing to dive into the CSS styling and changing site content.