I want a simple project where the user can more or less mimic what Facebook is doing:
* The user can sign up and log in. Sign up can be local or through Facebook.
* The user can search for members.
* The user can request friendship.
* The user can accept friendship.
* The user can open a chat window and chat with other users.
The functionalities I want are:
* The main screen is a static size screen including only the top bar and the friends list on the bottom right minimized just like Facebook. Everything else will appear as a separate window-like div within the main window.
* For anonymous users, the top bar and the friends list, are not available.
* All window-like divs will be draggable, can be minimized to the bottom and closed. z-indexes must work properly on focus when multiple windows are available.
* Anonymous users are welcomed with a popup window that calls them to login or sign up.
* The user can sign up-sign in using local forms or through Facebook. Info used from facebook: the profile picutre (optional), the email, the birthdate/age and the gender. Profile picture can still be changed. The user still needs to enter a "Display name" which is one field and must be unique among users. If register through Facebook, the user still requires to enter a unique display name and has the option to directly change the profile picture.
* On the top bar there will be:
** The profile picture on the right, which leads to the user's profile.
** Next to the user's profile image, the notification icon will be there. Notifications will only include friend requests.
** A button to search for users named "Users" on the left, to launch the users window.=
* Clicking on the "Users" button, a window-like div will appear listing the users and allowing for viewing the profile, adding as friend, or chatting.
** Friendship is not required for chatting.
** Requesting a friendship will change the option to "Cancel friendship request"
** Clicking to view the profile, the profile opens in a new popup window.
** In the profile, the users sees only the name, the profile picture, the gender and the buttons to accept/reject a membership-if one has been requested, request a membership if no request is currently active, and a second button to chat.
** The user that has a request for a membership can either click on the notifications where the request will be visible with the thumbnail of the profile picture and the text "Friendship request". The whole thing will be a link to the user's profile, which will open in a new popup window.
* On the bottom right, the user is able to see a friends link. Clicking it, the list of friends appears just like Facebook. Clicking on a user, a menu appears for him which allows the user to either view the profile, or chat.
* Whenever a chat is requested, the chat is added to the chat window.
** If the user is not chatting with anyone, a new popup appears with the name of the user on a vertical tab on the left and the chat on the right.
** More chats are simply added to the list of vertical tabs.
Technologies to be used:
* Node.js with [login to view URL] for the server
* [login to view URL] for the integration with Facebook.
* MongoDB as a database backend.
* Angular.JS and any popular CSS framework like Bootstrap for styling. Twig templates are a nice thing to use.
* Any popular library like [login to view URL] to use for building up the realtime chatting service.