This project is built on the Stamplay platform, with few lines of jQuery to show how to build your own clone of hacker news in tenth of minutes.
You can test it anytime simply creating a new project on Stamplay and uploading all the frontend assets with our client or our browser based code editor.
Feel free to implement more cool features (see the last paragraph for ideas), contribute to this repo or clone it to use it by your own scopes. For any question drop an email to [email protected]
This is a demo of what you can achieve with Stamplay.
It's somewhat of a clone of Hacker News. View demo
Currently, in order to show how to leverage Stamplay APIs and keep it simple we used few lines of jQuery to implement the client side logic.
- Login with Facebook
- Publish a URL/Post
- Upvote them
- Comment on them
- Gain karma points
- See what other user posted
- Search Posts
Best of all, it has no server code it has barely some Javascript line. Prepare to be amazed.
HNclone is built around the following apis (components) of Stamplay
Go to your account and create a new app.
Other required services :
- A Facebook App to setup Facebook Login auth
Optional services :
After creating a new app on Stamplay let's start by picking the component we want to use in our app that are: User, Email, Gamification, Custom Objects and Form.
Lets see one-by-one how they are configured:
the app leverages Facebook Login to provide an easy login to its users. In order to activate yours you need to get an APPID and APPSecret on Facebook Developer's portal, create an app and add Stamplay.com as authorized domain as you can see in the pic below.
now you have the data to configure Facebook Login on your app's user module. Go back on Stamplay, select the user component, add Facebook as signup service and then cut and paste the App ID and App Secret and click save.
For our Hacker News clone we use this module to represent the Post that users can publish on Hacker news. Our posts will have a title, url, description and other two attributes as showed in the picture below.
After setting up this Stamplay will instantly expose Restful APIs for our newly created Post resource on the following endpoint https://APPID.stamplay.com/api/cobject/v0/post
User activity on Hacker News is rewarded with Karma points, this component empower you to add gamification mechanics by defining challenges and achievements in your app. In this way we will be able to assign points to our users as soon as they post or comment new Posts on our Hacker News clone without having to write a single server side line of code.
Gamification's challenges can have one or more level that are unlocked when the user earns enough points. Every level has a graphic representation for both locked and unlocked state. Here we can see our one and only "superguru" level for the karma point challenge that user will unlock after they earn 900 points.
Form component is used to create a contact form to let our users reach out to us without leaving the app. Our contact form will have two fields, email and message.
This component we doesn't need any setup but, couldn't be easier than that ;)
To push email addresses of app's users to a Mailchimp list you only need to connect your account. Just click the "Connect" button and authorize Stamplay in interacting with your Mailchimp data.
Now let's add the tasks that will define the server side of our app. For our app we want that:
###When a new user signup, we send him a welcome email Trigger : User - On Signup
Action: Email - Send Email
Send Email configuration
to: {{user.email}} // this will be automatically replaced with user's email
from: "[email protected]"
name: "Stamplay HN"
Subject: "Welcome!"
Body: "Hi {{user.displayName}}! Welcome to this clone of Hacker News built with <a href="http://stamplay.com">Stamplay</a>"
###When a new user signup, he automatically join the karma points challenge Trigger : User - On Signup
Action: Gamification - Join Challenge
Join Challenge configuration
challenge: hnkarma
###When a user publish a new post, he earns 10 points Trigger : Custom Object - Create (new object created)
Action: Gamification - Add Points
Create configuration
custom object: post
Add Points configuration
challenge: hnkarma
points: 10
###When a user fills the contact form, we receive an email with the form's content
Trigger : Form - Submit
Action: Email - Send Email
Form submit configuration
Form: contact
Send Email configuration
to: [email protected]
from: {{entry.data.email}}
name: {{entry.data.email}}
Subject: "New Message from Hacker News clone"
Body: {{entry.data.message}}
###When a new user signup, adds him on a Mailchimp list (optional) Trigger : User - On Signup
Action: Mailchimp - Subscribe to a List
Subscribe to a List configuration
list: [your list name]
email: {{user.email}}
This should be the final result of the configured tasks
###Pages
Time to move to the frontend, everything happens in few pages with the following scopes:
The home page where users can see all the post published sorted by upvotes received, and logged users can vote the best ones.
A page where you can see all the post published sorted by date, most recent first.
A page to submit the a new post
A page to see the detail of a post, read and post comments
A page that contains the contact form to let our users reach out to us without leaving the website.
When working with the frontend you can leverage Handlebars syntax to include recurring pieces of HTML (like an header or a footer). Navigating thourgh the code it's see how it's structured. There is always a main layout file that embeds the body of the page, then the single pages like index or newest include header and footer of this app.
###Assets
Assets is the folder where you can store all the static content of your app, you can always easily reach out to your static files base root using {{assetsUrl}/assets in your HTML.
In main.js you can find the frontend logic written with few lines of javascript and using jQuery.
First, clone this repository :
git clone [email protected]:Stamplay/stamplay-hackernews.git
Or download it as a zip file
https://github.com/Stamplay/stamplay-hackernews/archive/master.zip
Then you need to upload the frontend files in your app and you can do it in two ways:
- Copy/Upload them via the Layout section of your app on Stamplay editor
- Get and run Stamplay Sync, make it download the frontend assets of your app and then replace them with the ones you got from this repo. Stamplay Sync will upload everything for you on your app.
Here are a few ideas for further improvement :
- Use Pusher component to send realtime notification when a new post is created
- Your idea here… ?
Again, for any questions drop an email to [email protected] :)
Ciao!