Introduction
My name is Kanika Gola, I am a second-year student pursuing a B.Tech from ABES Institute Of Technology. I am one of the 13 contributors i.e. in the first-ever cohort of C4GT 2022 working on the project YAUS (Yet Another URL Shortener).
Code for GovTech (C4GT) is an annual summer coding program to create a community that can build and contribute to global digital public goods. C4GT is being organised by Samagra and supported by Omidyar Network India.
How did I become a part of this?
- It all started when I received a mail regarding this program on unstop
- After this, I filled out the application and then wrote a proposal for the project (YAUS) from the list of projects that were provided.
- After this, my proposal was reviewed by the mentors and after some updations, I was selected for the first-ever cohort of C4GT 2022.
What is YAUS?
- YAUS (Yet Another URL Shortner) is an Open Source service for generating Shortened URLs.
- YAUS is an app through which we are trying to build an independent open-source platform which can be further used by many communities.
- Now users will be able to keep a track of all the statistics of their link creations.
- Be it Daily or Weekly Statistics, YAUS will provide you with customised data for the links you have created.
Let's understand it through a use case:
- So, government nowadays organises so many hackathons like SIH which gives an opportunity to students to showcase their skills and also contribute to nation-building.
- After the hackathons get over, now it's time that all the deserving candidates should be awarded their cash prizes and certificates.
- This is where YAUS comes into play, where the certificates should be link protected as well as personalised. It has the feature of Bulk Link Creation which will allow the organisers to send the link of Cash coupons as well as E-Certificates to all the candidates in one go.
- Also thinking from a wider perspective, the government can also use this feature as a payment gateway for electricity, water, property taxes bills etc.
- Also YAUS( Yet ANother URL SHortner) as the name suggests, provides the availability of creating protected short links which can easily replace those big links which are not only difficult to send but also not the most secure way.
Techs Used
- Fusion Auth
- React.js
- readmeio/api
- Swagger APIs
- Ant Design
- GitHub
User Interface (UI)
- Initially, we started with Lemon-UI for the frontend but unfortunately, the lemon-UI library is only for internal use, so we switched to Ant Design.
- After this, we used Ant Design Library for the UI as it gives the app a user-friendly and attractive UI.
- Every bit of the components was built from scratch using the Ant Design Library.
- Rendered the whole UI with Dashboard, SignUp, and SignIn pages and also cleaned it for specific requirements.
- YAUS is built on the React.js framework as it supports fast server-side rendering.
- Resource: https://ant.design/
- All the line charts, pie charts, graphs and tables were taken from the Ant Design Library.
Authentication
- Coming to the authentication section, Fusion Auth APIs were used for the registration of a new user using his/her email, name and password.
- The sign In functionality was also made using the Fusion Auth API, in which a registered user can enter his/her email and password and sign In.
- The routes were also protected by playing around with some code.
- And also presented the email of the registered user at the top of the header. Resource: https://fusionauth.io/
- All the data of users registering will be stored in the local storage of the app.
Mid Point Showcase
We had our mid-point evaluation in the presence of eminent panellists Mr. Jagadish Babu (COO, EkStep), Mr. Manish Srivastava (CTO, eGov Foundation), and Mr. Ravi Prakash (Head of Architecture, Beckn Foundation) and I will forever be grateful for their valuable feedbacks and insights.
SDK
We also want to support 3rd party plugins/integrations of YAUS APIs and for that purpose:
- SDK (Software Development Kit) is a set of software-building tools for a specific platform, including the building blocks, debuggers and, often, a framework or group of code libraries such as a set of routines specific to an operating system (OS).
- We wanted to build an SDK for YAUS which can be used by other developers for deep link creation.
- After researching a lot on how to achieve this, we got to know about readmeio/api which is a library that facilitates creating an SDK from an OpenAPI definition. Resource :https://github.com/readmeio/api
- The OpenAPI definition of link creation API was created using Swagger OpenAPI Definition Producer.
- Resource: https://swagger.io/docs/swagger-inspector/how-to-create-an-openapi-definition-using-swagger/
- After creating the open API definition, the SDK was created named
@api/yaus_link_generation
- Here is documentation which specifies, why we chose readmeio/api for this purpose:https://docs.google.com/document/d/1E0bPvirt4IxkAOtvTv_wrdIFqmqXk_MjoCTJErNaNX4/edit?usp=sharing
Link Creation
- For the Link Creation, Swagger APIs were used in which the user can enter the title, a unique hashID (which is generated automatically) and the URL of the link to which you want to get redirected.
- Link Creation also contains steps of Analytics, Tags which is our future scope.
- At the last step, the user will be able to see the preview of the short link created which he/she can share on their socials.
Bulk Link Creation
- Suppose a teacher wants to send a test link to all the students, this can be done by the bulk link creation feature where the teacher can import an excel file of the list, and then the short links for those can be generated and can be exported by the teacher easily in the form an excel sheet.
- Bulk Link Creation, allows a user to create multiple links, this can be done by uploading an excel sheet.
- This sheet can be shared with people easily.
Dashboard
- Dashboard is the main page of the app, which includes the link data.
- The line chart signifies the no. of total links generated till now by the app YAUS (monthly basis).
- It also contains a table which shows, the link which has been created, and some data which includes No. Of Clicks, No. Of Opens, No. Of Installs etc.
- There is also a Show Statistics button which provides specific statistics for a particular URL.
- A modal will be opened which shows data in the form of line and pie charts both monthly and weekly respectively.
Link Manager
- Link Manager is the page which keeps a track of the links generated with some data including No. Of Clicks, No. Of Installs etc.
- It also includes a button named
Create
which will redirect to you on the page which creates the link. - The Link Manager also contains the option of a search bar, so that the user can search for a link using its title in the search bar.
- The user can also use the sort option, which can sort the links on the basis of newest to the oldest.
- All this data is rendered from APIs on the frontend, which we have built from scratch having dummy data.
Recent Activities
- Recent Activity page keeps a track of the link which gets created sorted by the newest on the top and so on.
- In this way a user can have some stats to see, which link was created when by whom and other stuff.
Future Scope
- To Authenticate short links generated from Yaus using Centralized Access Control
- Creating Bulk Links using SDK
- Writing Test cases for each component using Cypress
- To provide Link Tracking and Analytics
- App-based deep link redirections (Android and Ios platforms)
My Experience
- I had to learn a lot of new things including frameworks such as NextJS and React Native. - This truly resulted in greater self-confidence and enhanced my ability to learn and implement things within a constrained amount of time.
- It has been a journey of lots of learning, lots of fun, tons of coding, and a plethora of new experiences, thoughts, and insights.
- Also it was a delight to listen to all the GovTech leaders and accommodate all their feedback and teachings.
- My overall experience was very interesting, informative and fun.
Mentors
During this whole coding period, we had our two mentors Chakshu Sir and Manav Sir by our side. They have played a significant role in our overall growth. It would not have been possible without their continuous efforts and support. They actually gave us a new perspective of viewing tech and its use cases, which actually helped us to improve ourselves.
Resources
- Project Link: https://github.com/Kanika637/antdesign
- My GitHub: https://github.com/Kanika637
- C4GT Website: https://c4gt.netlify.app/
- C4GT GitHub: https://github.com/Code4GovTech/C4GT
- https://fusionauth.io/
- https://swagger.io/docs/swagger-inspector/how-to-create-an-openapi-definition-using-swagger/
- https://docs.google.com/document/d/1E0bPvirt4IxkAOtvTv_wrdIFqmqXk_MjoCTJErNaNX4/edit?usp=sharing
- https://ant.design/
- https://github.com/readmeio/api