MOSAICON

Mosaicon is an AngularJS app integrated with Google Firebase, built as UI prototype of Mosaicon social network. It is a SoNet2017 project at "Politecnico di Torino".
Further info and details about the project at https://sonet-2017.github.io/MOSAICON/.

Get started

Fork this GitHub project to yours or download and import it in your JavaScript IDE. Compile the index.html and try the app.
The user interface is designed specifically for iPhone 6. With Google Chrome and its Developer Tools, you can set the actual interface model.

Demo

The demo view is a past event page with a innovative mediaplayer.
In the middle of the view you get the info of the event.
Video and audio files are different sources, but synced together. Videos underneath the main player are different point of view of the same event, contained in a modal slideshow. When you play them, the players jump to a specific synced time of the tracks (audio and video). Three players are synced together at the same time.
Above the audio player there is a gallery of pictures of the event that scrolls horizontally. You can upload your own picture (thanks to Firebase server) and tell your experience or view other users' pictures in a modal that scrolls vertically.

Navigation

The menu is a typical social network app menu.
In the top bar, videocamera and chat icons, are disabled. The bottom bar got 5 icons to navigate to Finder, Timeline, On Air, Passport and Floor that stand for Search, Calendar, Home, Profile and Map.

Available features

• Register an account, Login and Logout

• Edit your profile information

• Check for events near you (GMaps)

• Enjoy a HQ video/audio recap of a past techno party from synced multiple views of the party

• Take a look at other people's pictures about that night, like/unlike it

• Upload your own content

• Check for events on a specific date

• Filter the site content in order to find other users or events

Third-party components

• Google Firebase - AngularFire

• Google Maps - ng-map

• Videogular: http://www.videogular.com/

• Twitter Bootstrap

• moment.js

• CSS/LESS

Limitations

• When searching for an event by date, the calendar template (found online) doesn't permit to click on past dates. For simplicity purposes, all the events are scheduled on July 31th and just one contains the whole media content uploaded by users ("NotteTechno III", eventId = 0).

• In the passport and external passport view is possibile to see where the user is located, and pictures uploaded by that user; actually the content is relative to just one event ("NotteTechno III", eventId = 0).