Beansight is now open source

Four years ago, I started working on Beansight with Cyril, Guillaume and Jean-Baptiste, a project that became a long adventure.

beansighthb

The website (that we host at www.beansight.com) and associated mobile apps allow users to create predictions and vote on other’s predictions. Computation is done to extract from all votes a percentage of probability for a given event.
The website features all mechanisms of a social website : registration, login, user profiles, followers / following, content creation, comments, moderation tools, administration dashboard, API, i18n.

Main page when logged into Beansight
Main page when logged into Beansight

All our code and design are now available under the open source Apache licence. That means anyone is free to use it to run a similar website or to build upon it. Get it from GitHub.

The technological architecture is quite regular: a server is generating web pages using a MVC framework, data is stored in a relational SQL database and user generated images are stored on the file system. Some simple client-side JavaScript is enriching these generated pages.

We built Beansight using the great Play! Framework. It turned out that Play! was a really great choice for our architecture and project. At that time, Play! was a Java web framework that got rid of the traditional Java web stack to focus on a simple MVC architecture, inspired by rails and other modern web frameworks, that prevails convention over configuration.
It was a real pleasure working with this language in a framework so well designed for websites like our.

Beansight Android application
Beansight Android application

Mobile application are native for iOS and Android and we used jQuery mobile for the mobile web version.
We decided to keep a very simple UI as part of our native mobile apps. We were one of the first apps to use ViewPager on Android for example.

We realised quite soon that we needed to build an API, mostly for these mobile apps. Our MVC architecture allowed us to easily create one. Ideally I think the main website should have use it (either client or server side). Anyway, our API code and website code were sharing a lot, thanks to our rich object oriented Models. You can find the API documentation in a GitHub wiki.

We used different hosts. We first started with PlayApps.net, the Platform As A Service offer from the builders of the Play! Framework. We never encountered any issue with it and were very satisfied to not bother about system administration. However, we had to move due to the service closing. Beansight was then running on Gandi Hosting. Here we had to take care about administring our server, which added some pain to the maintenance of Beansight.
Finally, in order to reduce the costs and make it easier to setup as part of the open source process, we made sure it is compatible with the Heroku PaaS hosting.
Today, Beansight can be easily run on any Linux server or pushed to Heroku with any MySQL database (beansight.com is now using clearDB for example).

I hope this code will be useful to somebody. I would be pleased to see you starting a new community from it, building something on top of it, or using it as part of another project.
While a few technical improvements could be done, I think it is still quite reliable, with a pretty well documented source code and good architecture.

Get all the code on GitHub:

Advertisements

Beansight selected for Le Camping

As this is major news for my projects, I cross-posted this article on my main blog.

Le Camping logo

Great news for Beansight: we have been selected to be part of Le Camping. Le Camping is the first French tech startup accelerator program from Silicon Sentier.

Palais Brongniart

Beginning January the 4th, we will be working everyday with 11 other startups at the prestigious Palais Brongniart. We will be mentored by great mentors that have many different backgrounds (entrepreneurs & CEOs, tech, marketing, designers…)
Only 12 teams out of 164 have been selected to be part of the adventure. I think it is a great opportunity for us to be part of the program.

Because we now have a somewhat working platform our first work will be to polish the edges of our user experience and to focus on our core algorithm. I think we can expect an initial release at the end of January.

Le Web and Le Camping

So many French words for these international events.

Thanks to Cyril, I went to Le Web. I met professionals from the interweb and could pitch Beansight to many of them. Some talks were really interesting. You can watch the videos online. I could talk to many people from the web ecosystem. I met Matt Mullenweg, founder of the company behind WordPress and Dennis Crowley founder of foursquare.

foursquare founder, Dennis Crowley.

Today, we have an opportunity to grow with Le camping, a 6 months incubator. There were 160 startups, and now we are among the 25 last ones. Only 10 will survive.
This morning we had our final interview. We were really motivated, something like:

It went well, but of course we had to face really specific questions, questions that we couldn’t answer with precise figures. Our product is very early stage and we haven’t validated any of our market hypothesis. We are convinced that our vision and business model will evolve, we don’t want to focus on something, we want to be able to retarget our product. In the end, I really hope we get accepted into the program. It would be an unique way to work together with professionals and to gain visibility.

One last thing, we chose our host for our servers : the team behind the Play! framework recently launched an hosting service: playapps.net. It is a service dedicated to web applications built with Play!.
It is backed by a gandi.net server. Deployment is really easy, and the administration interface is really great. It reminds me Google App Engine. For now, we are really satisfied with the service.

Javascript code conventions

Here is how we are using Javascript when coding for Beansight (this article is a draft)

It also details how we deal with our web framework: Play! Framework.

Plugins

Available globally :

  • jQuery
  • jQuery UI
  • jQuery validate

If a plugin needs to be used on very few pages, use #{set ‘moreScripts’ } of the Play! Framework

Code Convention

Read and try to use every convention described one this page.
Including:

  • Javascript code should not be in the HTML body. Put javascript code in beansight.js. If your code should be executed after the page has been created, put it in $(document).ready(function() { of beansight.js

Specific to the Play! Framework

Actions URL

URLs to Play! actions are generated by Play!, thus they cannot be in beansight.js because this file is not generated.
A way to generate Play! action URLs in the .js file is by doing this :

in main.html :

    <!-- define here the actions -->
    <script type="text/javascript">
    var agreeAction = #{jsAction @Application.agree(':insightId') /};
    </script>

in beansight.js :

agreeAction({'insightId': insightId})

generates the action URL.

i18n

Messages are generated by Play! depending on the current language, but beansight.js cannot be generated.

messages must be written in /public/javascripts/i18n/XX.js
add a line in these files:

yourstringid : “My String”,

in Javascript code, to use a string, do :

    i18n.yourstringid

How does it works ?
In main.html, this line loads the right message file :

    <!-- load the right i18n file -->
    <script src="/public/javascripts/i18n/&{'i18n'}.js" type="text/javascript" charset="utf-8"></script>

This mechanism should be improved: defining a default language, fallback to default if the string is not found.

Tools

FireBug

  • use breakpoints
  • watch the console for errors
  • watch the AJAX requests

JSLint

JSLint, a Javascript validator can be helpfull (not used for the moment)

Links

Google’s guidelines : http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
Understand closures : https://developer.mozilla.org/en/JavaScript/Guide/Closures

Beansight: the path to the private beta

Current home page

It’s been a week since I decided to focus on Beansight.

At that time, we had a system roughly working : insight creation, vote and user profile. You can compare the screenshot on the left with the one at the bottom of this post to notice the changes. I mostly worked to get a first usable system.

We decided to split the websites in pages when the user is connected (working from mockups, using Balsamiq mockups, a tool that I will not recommend and not use anymore). This was done to clearly separate our functionalities: on a page you explore insights, on another experts, on a third you keep track of what you interacted with.

A “favorite” system exists on the website. We can now “favorite” experts, it’s a social network: there are directional links between users, similar to twitter’s followers.

Agree, disagree and star widget

I worked on a icon system for the “vote” and “favorite” feature.  Of course clicking on these icons do not change the current page. Technically, an AJAX call is done when clicking, and in return changes the CSS class of the element to provide a visual feedback of the action. You can get these icons from my openclipart account.

Instead of pagination, a "more" link

I had to limit the number of insights displayed by lists (such as search results). A solution could have been to create a pagination system (as in Google search results). But because there will be a lot of items and only the more first are more relevant to the user, I decided to build a “more” action. When clicking on this link, the next items are dynamically appended to the bottom of the list (using an AJAX call).

Home page, last week

The website is not yet ready for a private beta. But by seeing this screen from last week, you will understand that we made progress and are now close to something usable and fun.

A new visual layout is being designed by the awesome Colorz team.

Stay tuned, enter your email on the Beansight waiting page to have a chance to receive invites for the private beta.

Beansight at Start In Paris

You may already know Beansight, a project I’ve been working on with Cyril, Guillaume and JB.

The new Beansight logo by Colorz

Today, we have an opportunity to gain visibility by talking at Start In Paris. You can help us by voting for Beansight on the Start In Paris page.

Because of this, I pause today my work on my diving project (I will post an update soon) and focus on Beansight for a week.

If ou want to know more, Guillaume recently wrote this text:

Beansight is a web site where you’ll be able to share your insights about what the future will be. You’ll be able to see what your circle think and compare your insights with the others’.
If you show skills by predicting correctly the future, you’ll earn points. These points will underline your expertise in some fields.
You’ll also be able to agree or disagree with insights posted by other people. If right, this vote can make you earn points.
Our website will make the web community think as a whole in order to predict the future. Our shared brain will bring us news… before it happens.