Inspired by the movie The Social Network (and also by the increasing number of creative posts on my IG feed amidst lockdown) I thought of creating a social network exclusively for DAIICT. The idea was to make a platform where people can share their projects, writings, artwork and other creative stuff, and can discover what the fellow DAIICT students are learning and creating.
YASN Project Architecture
YASN platform utilises a Microservices kind of architecture.
It consists of a React Single Page Application(SPA), a NodeJS service for users and posts, Darkrai service for chat, MongoDB Atlas as the cloud database and Cloudinary for media storage and delivery.
NodeJS server
The backend for YASN is build using Express framework for NodeJs. It handles all the CRUD operations to the cloud database(using Mongoose ORM) related to users, profiles, posts , likes and comments.
It is a set of REST APIs which work over the HTTP. Representational state transfer (or REST) is a software architectural style that defines a set of constraints to be used for creating Web services. Web services that conform to the REST architectural style, called RESTful Web services, provide interoperability between computer systems on the Internet.
This service is deployed on Heroku hobby dyno, cost of which is $7/month, but if you are a student you can get it for free for up to 2 years using GitHub Student Developer Pack. Being a PaaS, Heroku is very beginner friendly and you can connect it directly to your GitHub repository and enable automatic builds on every commit to your repository.
React SPA
Being a beginner in React, I found this part most interesting as well challenging. I bootstrapped the web app using a framework called Create React App, which eliminates the need to understand all the build tools like webpack and babel to start building React apps which can be sometimes overwhelming for the beginners.
For the UI part, I first made some rough wireframes using pen and paper, and then tried to realise them using a react UI framework called Material-UI. For the routing in the Single Page Application, I have used a lightweight router called Reach-Router.
Handling forms can be a bit tricky in React, so I used a library called Formik to create form components. It is very helpful in input validation, formatting and many other things while dealing with forms.
Recently, the college had shifted its whole email infrastructure to G-Suite, thus to implement authentication such that people can only log in using their @daiict.ac.in email addresses, I integrated Google Sign-In into the web app and configured it according to my needs.
For the storage and delivery of the media part of Social Media, I have used a service called Cloudinary. It is relatively easy to configure and provides a pre-built widget for uploads. The storage and bandwidth is reasonably good even in the free plan. Its API also provides URL based image and video transformations which is quite useful.
The YASN web app is deployed using Vercel and can be accessed at this link.
Darkrai Chat
For chat, currently, there is only a feature for public chat in the app. To implement this, instead of reinventing the wheel, I modified and integrated the Darkrai chrome extension which our team had built earlier as a hackathon project. It is built using realtime communication library Socket.io and NodeJS server which is deployed on Heroku.
I have also used Google Analytics on the web app which gives a lot of valuable information and insights about the audience.
Afterthought
Overall, building this project has been a great experience for me and I have learnt many of the latest technologies in the field of web development. If you are learning some new technology, I would highly recommend building projects to consolidate your learning.
At the time of writing this article YASN has 75+ registered users across many batches of DAIICT and has also received good reviews from many of the alumni 😇.
Next Steps
The next steps would involve adding a robust state management library such as MobX or Redux and to restructure/refactor the project to make it more workable.
I am also trying my hands on a very popular framework called React-Native which is used make native apps for Android and iOS using React. Since the YASN SPA is build on React itself, I think it won’t take much time to create YASN mobile apps using this framework.
