Xync
ZQfTYWA.png

Team Members

Name Work Done
Siddharth Sundar Backend
Hasan Kamal Frontend
Shashwat Chaudhary Frontend
Luv Sharma Testing and Deployment

Initial Design Document

Our brainstorming session occurred over mail since we were all in our hometowns for vacation. This is our version of "first piece of paper" !
(We copied actual content without making any changes so language is quite informal)

Objectives and Goals

Lets create a website which is fully functional and ready for deployment in the real world. While visual appeal is important, it is next to functionality. However, considering the growing number of mobile users on the internet, we wanted to make sure that our website is responsive.
Buttons should be responsive. The user must never feel that nothing is happening when he is expecting something to happen (a loading screen is an example of feedback to show that something is actually happening)
Consistent colour scheme and theme throughout

Name/Theme

Frontend guys, decide on a proper colour scheme and theme.
What do we call the site? Add more names..!
Timify
Synchronise
Atune
Xync
Zync

Features

  • Add your ideas here no matter how silly they might be. We are not going to implement all the features listed here, but we’re definitely implementing the ones marked with basic.
  • User accounts for everyone (basic)
  • Make and join communities (basic)
  • Communities: Communities can be anything. For example, there can be a Hollywood movie community that has movie launch dates as its events, there can be a competitive programming community that has different online contests happening around the world as its events. Or an India GH community, which keeps track of government holidays/festivals. Of course, there can also be a IIITD community where all non-academic events can be catalogued.
  • The person who made the community has admin rights. He may extend it to other users. Only users with admin rights can create events in a community (basic)
  • Personal events (basic)

Personal events are personal. Like a “wash underwear” event on Sunday. Shows up only on the user’s feed.

  • Day view (basic)
  • Month view (basic)

You can create a quick-access bar to change date/month/year directly.
Non-admin can click on an ‘attending’ button if he is planning to attend.

  • Sub-communities
  • Filter events (sort by number of attendees? , …)
  • Welcome page
  • When creating a new account, the user is led through a series of steps. First, he can enter his gmail/facebook id to create the account. Then, he can choose to join a few communities of his choice, followed by a small explanation on the site.
  • Google/Facebook integration – fetches calendar events from Google calendar as personal events. Add birthdays of Facebook friends to calendar
  • Allow user to add past events??
  • Send notifications to phone?/Alert/alarm

Communities

Supports icon, banner
User permission: edit, view, hidden
Type: closed, open
Closed communities require admin permission (anyone who can edit) to view. For a random user, it is hidden.
Open communities don’t require permission to view. But they can’t edit unless given permission by admin.

Pages

/login.html
/timeline.html
/communities.html
/edit.html
/<community_name>.html
/search
Tech
· Backend will be in Flask.

Testing
Progress
Mock-up

Tools, Languages and Technologies

Frontend

  • HTML
  • CSS
  • Javascript
  • JQuery
  • AJAX
  • Bootstrap
  • Responsive Web Design concepts

Backend

Flask

Flask is a minimal web framework. Unlike some frameworks that come with many built-in plugins and features, Flask includes only the most basic required features off the bat.
We used the following Flask plugins and Framework agnostic libraries

  • Flask-login
  • Rauth
  • Flask

FullCalendar API

We studied the documentation and interacted with API to generate a calendar as per our needs. A lot of functionality was added on top of it to suit our needs.

Step by step Learning Journey

Before departing on the proverbial learning journey, we had to depart on an actual journey to our hometowns. Before saying our goodbyes, we brainstormed on what we wanted to build and how to build it. It was decided that Hasan and Shashwat would work on the frontend, and Siddharth and Luv would work on the backend.

Frontend

It was fairly easy to brush up our HTML and CSS knowledge. However, soon we realized that the responsive, fluid and elegant website we wanted to create would take a lot more than HTML and CSS. We started studying basic JavaScript. We also wanted to learn JQuery and Ajax, but realized that JavaScript in itself is a very vast scripting language and would take much more than a week to cover completely. That being said, we learnt enough JQuery and Ajax to understand code snippets on the web and modify them as per our needs. We relied on stackoverflow, w3schools and other websites to learn on the go whenever we needed to implement some functionality. Also, we made sure that our page was fully responsive and would work on all screen sizes by using bootstrap. While learning bootstrap did take some time, the effort paid off by as it sped up the development process considerably.

Backend

We had a lot of difficulty in deciding the framework initially. But finally we decided to work on Flask. Flask is a backend framework which is written on python. It is pretty easy to work on flask than any other framework. We have included many libraries in flask to accomplish our goal.These are:

  • flask-login
  • rauth
  • flask-sqlalchemy
  • flask-migrate sqlalchemy

flask-login:

This is used for handling common logging in and logging out of users. It helps to create cookies i.e. 'remember me' function. One of the important function which we used from this library was LoginManager.

rauth:

We used it for authentication.

flask-sqlalchemy:

We used sqlalchemy because it's very common and 'easy to learn'. Sqlalchemy is basically an Object Relational Mapper(ORM). It allows database applications to work with objects instead of tables and SQL. We created a database object and used that object every time we wanted to store data entered by the users on our servers or extracting the data from our table to show it to the users.

flask-migrate:

The main purpose of using flask-migrate was to update the table as soon as any changes were made in the table. Typically, in absence of migrate we end up deleting the old database and then create a new one each time each time we need to make updates.flask-migrate serves the purpose. It keeps a record of database updates for us.

Sqlite database

We used sqlite database. Here is a visual of our database schema-

image.png

We learn from mistakes

The biggest learning outcome for us was the amount of trouble we had to go through in the last few days when each one of us had a different version of the HTML, CSS and JS files. We all had several versions of the same file, and some functionalities were implemented in a previous version but not in the latest version. Some functionalities were dropped down and then if we were editing an earlier version and saving it as newer one, those deprecated functionalities reappeared. This was amplified since everyone had their own set of different versions.

In the end, when we had to get all files in one place, we understood the meaning of the word chaos. We learnt a lot from this assignment (a lot is an understatement), but the biggest lesson of all was

Instead of this-

updates.png

Do this-

github-logo.jpg

Now we'll take a brisk look at some code snippets

Snippets of Code

Bootstrap Grid (Row, col-xs, col-xs-etc. for responsive layout)

JQuery for smooth scrolling

Simple implementation of parallax like effect with CSS

Simple CSS blur effect for users who haven't joined a community

Screenshots

Disclaimer: A large part of the website gets rendered from backend, and can't be viewed without logging in. These screenshots are of "sample pages", not actual pages (actual pages need to be created by users).

John Appleseed, our sample user (imaginary)

UJ8aGJo.png

IIIT Delhi, sample institute (not imaginary! )

vQjj53b.png

Can't view calendar of a community without joining it

KDD1ahP.png

Features

  • Login/Signup
  • Notifications
  • Communities which you can join
  • Each community has events
  • Can comment on events
  • Read comments
  • Create events in community
  • Create community
  • 3 different views in Calendar

We plan to continue to work on our web application and have already got a nice domain for it. Since we have a 4 letter name, the .com and .net xync domains were unavailable. One of us has previously used the free domain service dot.tk and we found that xync.tk is avaiable and this is the domain we are using.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License