## TFPS Landing Page

The [Technology Fimmaking and Photography Society](http://www.tfps.iitkgp.ac.in) of [IIT Kharagpur](http://iitkgp.ac.in) had a commendable online presence, be it short movies on YouTube, photographs on Instagram or followers on Facebook. It lacked one thing though - a proper webpage. Well, no more! - an enthusiastic me decided in my second year.

After searching through countless media-outlet centric templates, I settled on [Snapshot](https://colorlib.com/wp/template/snapshot), and made considerable changes to the About section. This included calls to YouTube and Instagram APIs to get the current number of subscribers and followers.

I put up TFPS's best film work in the Celluloid section, and reserved the Showreel section for top photographs by TFPS folk. There were two main hurdles in the way.

### Splash animation

I had way too cool ideas for this one - it's the first thing visitors see and it should really stand out in uniqueness. Large number of websites for making logo animations exist and some of them are really good - I did end up making prototypes like this one at one of them:

![effect-anim](https://api.rashil2000.me/images/projects/tfps-landing-page/effect-anim.gif)

One major catch here - none of these websites offer anything for free, and I didn't really want to pay anything until I'd run out of options. I searched some more, and looked for assets online to make this stuff on my own using After Effects.

That turned out to be too difficult of an exercise. I finally figured - why not just stick to something I already know - CSS! People might not know this but CSS can be used to make incredible animations, and you don't even have to load any heavy JPEGs or MP4s, it's all text! So after sitting up an entire night, this was the result:

![css-anim](https://api.rashil2000.me/images/projects/tfps-landing-page/css-anim.gif)

### Image feed

This one was tough because Facebook made a lot of changes to their Graph API by the end of 2019. Before this, it was really easy to construct a basic feed of a user's Instagram pictures using HTML/JS. Now one has to go through a lot of stuff - making business accounts, getting apps approved, incorporating persistent API keys, understanding the data structures etc. - to get that done. To skip all that, I looked out for site plugins that offer the same functionality; of course the free ones.

![lightwidget](https://api.rashil2000.me/images/projects/tfps-landing-page/lightwidget.png)

[Lightwidget](https://lightwidget.com) (above) was one good option and it didn't require signup, but it didn't provide a way to sort the posts by number of likes. I decided to go with [Juicer](https://www.juicer.io) (below) as it has a lot more customization capability. Sadly, it shows some ads in the feed too, but this isn't much of a concern today since most peope use adblocks in browsers anyways.

![juicer](https://api.rashil2000.me/images/projects/tfps-landing-page/juicer.png)

Oh, and also the project is open source on GitHub, so anyone can contribute, file issues or request features.

Website for Technology Filmmaking and Photography Society, IIT Kharagpur

TFPS Landing Page

## DYSTuss 

[DYSTuss](https://dystuss.rashil2000.me/) creates a space for people to freely and anonymously discuss their ideas and thoughts about movies, shows and series, along with giving them the ability to maintain user profiles to keep track of what they have seen, what they wish to see, and get recommendations, both from the community and the ML-trained models. It was created as a part of the Software Engineering Laboratory (CS29006), a second year undergraduate course offered in the spring semester at the [Indian Institute of Technology Kharagpur](http://iitkgp.ac.in/). 

![Home](https://api.rashil2000.me/images/projects/dystuss/home-page.png)

The inception of this idea kind of happened quite some time ago, mainly stemming for the need to have dedicated platform for having in-depth discussions about entertainment in general. A lot of my peers take active interest in watching Hollywood and Bollywood movies, TV shows, web series, and frequently discuss about them. It makes for a great pastime, and some of them even go as far as having in-depth discussions/arguments about various aspects of film-making such as directing styles, production decisions, acting finesse, editing expertise etc. 

![Profile](https://api.rashil2000.me/images/projects/dystuss/profile-page.png)

DYSTuss is built with [React](https://reactjs.org/) and bootstrapped with [Create React App](https://create-react-app.dev/). A principle focus of this project was implementing the [Fluent Design System](https://www.microsoft.com/design/fluent/#/), which was achieved with the help of [React-UWP](https://www.react-uwp.com/) UI library and [Fabric UI Assets](https://uifabricicons.azurewebsites.net/). The [backend](https://github.com/mukul-mehta/Minerva/), made by a friend of mine, is powered by Flask-RESTPlus API and a MySQL database indexed using Elasticsearch. 

![Create](https://api.rashil2000.me/images/projects/dystuss/create-page.png)

Users can signup, create posts, comment on posts, and search for movies or posts using the search page. They can maintain private seen lists and bucket lists and get recommendations based on those from the machine learning models. 

![Search](https://api.rashil2000.me/images/projects/dystuss/search-page.png)

The forum is a progressive web application, meaning it can be installed on devices. Users can also chose from a list of 8 different themes to suit their needs. 

DYSTuss has been put up for community contributions in [KWoC 2020](https://kwoc.kossiitkgp.org/) - Kharagpur Winter of Code, a 5-week long online program for students who are new to open source software development, organized by the Kharagpur Open Source Society ([KOSS](https://kossiitkgp.org/)).

DYSTuss

## Blogger 

[Blogger](https://beach-blogger.web.app/) is my first complete piece of software. It is a progressive web application that allows multiple users to post blogs and shows user activity through notifications. 

Blogger is built with [React](https://reactjs.org/) and bootstrapped with [Create React App](https://create-react-app.dev/). The user interface is designed using [Materialize CSS](https://materializecss.com/) classes. [Redux](https://redux.js.org/) along with Thunk middleware is used to manage the React state. 

![Home](https://api.rashil2000.me/images/projects/blogger/home.png)

For the backend, Blogger uses [Firebase](https://firebase.google.com/) - specifically the Firestore NoSQL database for storing blogs, notifications and users, serverless Functions for generating notifications, Authentication service for signup/signin, and cloud Hosting. 

![Blog](https://api.rashil2000.me/images/projects/blogger/blog.png)

Users can sign up, sign in, create blogs, and view all other users' blogs along with recent activity on the dashboard. The web app can be installed on any device like normal app (it uses a browser instance natively). 

Related blog: [My first (real) app](https://rashil2000.me/blogs/my-first-real-app/).

Blogger

## D-syfer

[D-syfer](https://rashil2000.github.io/d-syfer/) is a simple ciphering and deciphering tool written in JavaScript. It works with substitution ciphers like Pigpen, Caesar and Affine. 

![affine](https://api.rashil2000.me/images/projects/d-syfer/affine.png)

The inspiration for this tool goes back to my school days where we used to exchange random tidbits using simple-to-use ciphers and take turns guessing what messages meant. This tool could've helped encrypt large pieces of text that would've taken hours to do by hand. 😅

![caesar](https://api.rashil2000.me/images/projects/d-syfer/caesar.png)

Since it is a beginner friendly project, D-syfer was put up for community contributions in [KWoC 2019](https://kwoc.kossiitkgp.org/) - Kharagpur Winter of Code, a 5-week long online program for students who are new to open source software development, organized by the Kharagpur Open Source Society ([KOSS](https://kossiitkgp.org/)).

A simple JavaScript tool for ciphering text

rashil2000

Stuff that's (seemingly) cool

TFPS Landing Page

DYSTuss

Blogger

D-syfer

Some other projects that didn't make it here can be found on rashil2000.github.io.