This document summarizes a corporate social network project created by Binary Studio Academy in 2013. The project involved Egor, Ilya, Kirill, Misha, Sofia and Viktor. Key features of the confidential social network included simplifying work and communication, as well as fun functions. Technologies used included client-side and server-side data validation, AJAX, Javascript libraries, and calendar functionality. The network allowed messaging, profile pages, notifications, a library, calendar, and administrative features for managing users and books.

1. Binary Studio Academy 2013
Project: Corporate Social Network

2. Project participants
Egor (coach) Ilya
Kirill Misha
Sofia Viktor

3. About project
Our project is a corporate social network
• Confidentiality of information
• Only necessary functions
• Full independence
What are the key features of the project?
• Work simplification and fun

4. Technologies used

5. Let's start
What is the main difference of this social network?
This social network is not for everyone
Wow, where is the registration button?

6. How do I register?
There is only one way – via the invitation from administration

7. A slight deviation from the registration process
• All project forms contain data
validation on both the client and
the server
• Most of the errors that come
from the server, will be loaded
on the page with AJAX

8. Congratulations, now you are in the social network
So, what can we do?
• Communicate with members of
the social network
• Use the library consisting of
paper and e-books
• Use the calendar and always be
aware of birthdays and
important events
• Keep track on what new your
colleagues have
• Receive notifications on
events, messages, etc.

9. List of all users sorted by their last activity
User profile page. Each member can send email or message in private conversation.

10. Conversations
• Where the unread
messages marked with
blue color.
• Sorted by messages time.
• In the left side are title of
conversation and it's
members.
• In the right - last message
in this conversation.
Messages of conversation

11. Create new conversations
• This form, as other forms,
opens in a modal window
• The very useful autocomplete
for the adding new members
• Unnecessary queries to
database from autocomplete
not happening
The same technology is used to
add users into the already existing
conversations
And for add users into the events

12. Userbox
Userbox is shown in the right top corner.
• Contains link with the number of
unread notifications
• Displays username and avatar.
• Link for editing profile and
link for logout

13. Notifications
The last 5 notifications about messages
and events are displayed after click on the
notification icon.
User can click on the each notification for
reading messages or viewing event page.
Made using Javascript library Toastr.
Also all notifications are
available in the static page.
They are sorted by date and
contain the short description.

14. • You can edit an event by
clicking on the cell of the
existing event
• User can see the only events,
which the involved with him;
• It is possible to drag and drop
events for a quick change of
date
• You can create an event by
clicking on the cell of the day
Calendar
A monthly calendar format:
Weekly calendar format
Drag and drop events
for a quick change of
date
Resize events to change
the duration of event

15. Calendar's agenda page
List of the upcoming events
with filter by type of the event.
Possible:
• adding new event;
• editing event;
• deleting events;
• view information about the
event such as date start
(end), description, etc.
Page of the event:
• We can see the full event
information;
• Users can leave their comments
for the events;
• Possible editing and deleting
event.

16. Add/Edit event
Each event has its own color.
The interval between the
two dates sets the start and
duration of the event.
List of members.
If you are a creator of
this event, you can
remove any user.
Title and description
List of types. All types of the
events have their default
color

17. Calendar settings
Ability to import the events from google
calendar into our own calendar.
To do this:
2. copy the link into the field for import
1. take a reference to an XML file with the
events from Google Calendar.
3. push the button

18. Library
Yellow row - someone
has already booked this
book If a file with the book
was not uploaded then
button is crossed out
Gray row – e-book
Green row - the book is
available and you can
take it
Red row – the book is
already taken
Filters and sorting

19. The administrative side
Just having the necessary privileges, you can access the admin panel
From this panel you can:
• manage user accounts;
• manage library books;
• invite new members.

20. User list
Red row – this
user was blocked
Typical user
From this list admin can block / unblock, edit and delete any of memberAdmin can edit any field,
user, even password.

21. • view and manage
queues users.
Book list
The same colors as the list
of books for clients.
But we can see more
control buttons:
• add new book;
• edit existing book;
• delete existing book;
• return the book;
We can change the type of the
book. And load file on the cloud
storage by AJAX

22. Queue on book
List of users who want this book
Click on user. Then you can choose return date
for book. Then you can save your actions.

23. Thank you for your attention