Challenge Overview
Project Overview
The client of this application is Sharous, a company that is in progress of starting a mobile-based, location-centric social networking application, also called Sharous. The objective of this project is to build a proof-of-concept and to enrich the idea that they have for Sharous.
Sharous will initially be offered as a mobile application for iOS devices, where users will be able to share their location from their phone in close to real-time, view a world map showing the location of their friends, people around them, and other users, and interact with other users in the map or on their contact list.
The application will also provide standard social networking features such as requesting to add friends, accepting or rejecting friend requests, removing friends, viewing contact (friends) list, posting status message, changing profile and avatar and chat messages.
Given to the real-time nature of the location data in the application, it will greatly help user to find and keep in touch with his/her friends. Users will also be aware of other users in the surrounding, and will be able to chat with them or see their profile, or arrange to meet them offline. This will give them opportunity to meet new people.
Note that the full functionality as described above will be accessible to registered users only (login will be required). Non-registered users will be able to access the application, however only limited version of the world map will be provided, where people are marked as small marker with a basic avatar (and a name displaying when clicking on it) but no further options or a profile, and the user will not be able to post anything. This can be used as a showcase of the application and to encourage the user to register.
The "Just take me in" option for the public world map is intended to give people the opportunity to explore Sharous without even have to sign up. It is essentially the same map they would see, if a signed in user had NO contacts at all. Of course functions like chat/send contacts requests etc are not available and his own location isn't published.
In addition, the system will provide functionality for administrator to manage problematic users (including deleting or blocking users) and see statistics related to the server.
This project aims to create a proof of concept that, once ready and approved, will be converted to a production ready application to be listed in Apple App Store. In the future, the client also intends to expand the application to other platform, including Android and Windows Phone
One of the challenges in this project is that there are a lot of existing social networks, including some location-based social networks that are available for mobile phone like Foursquare. The application will offer benefits that are not offered in existing networks, such as near real time nature of location update, the map-centric interface in the application.
Competition Task Overview
The purpose of this contest is to produce a custom version of Map View based on the given storyboards.
Key Requirements
- Create a Map View as designed in the storyboards.
- Test it with browesrs in iOS devices (iPhone and iPad) and Android devices.
- Replicate the design of the approved Storyboards (PSD Files) for all pages.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
Detailed Requirements
Notes, the top and bottom section in the screens are out of scope, you are only responsible for the Map view.
Initial Map View (05_1_logged_in_map.png and 05_2_map_view.png)
- The current location will be displayed on the map.
- The users and friends in the displayed area will be displayed.
- User and friend type are displayed differently.
- Male and Female are displayed differently.
- The users and friends data will be mocked and retrieved by AJAX call, please see Map View Architecture for reference.
- If there are new messages from the user, a badget will be show like 05_2_map_view.png
Tap on Friend (05_5_tapping_contact_pin.png)
- When tapping on a friend icon, a detail info bar is displayed. Please check the architecture for more detailed information.
Tap on User (Non_contacts.jpg)
- When tapping on a friend icon, a user info bar is displayed. Please check the architecture for more detailed information.
Specific HTML/CSS/JavaScript Requirements
- You MUST use HTML5 and CSS3
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
Browser Requirements
- Browsers on iOS devices (iPhone and iPad)
- Browsers on Android devices
- Safari 5 or Chrome can be used for testing.
Documentation Provided
- Storyboards (PSD file and screenshots)
- Map View Architecture
Final Submission Guidelines
Submission Deliverables
- HTML5 page for Map View
- You must include Deployment Guide.
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.