Problem Statements for VIT (2022 Batch)
Table of Contents
Table of Contents
1
Instructions
Technical Projects
Design Projects
2
2
3
Problem Statements
Frontend (React)
Backend (Javascript/Typescript)
App Dev (React Native)
UI/UX Design
4
4
6
8
9
1
Instructions
Below is a list of Technical and Design Projects. You may choose to attempt one or many of
these. The deadline for submissions is 10.00 pm IST on 17 July 2021. Any submissions
made after the deadline will not be accepted.
Technical Projects
1. You must make a GitHub repository for your project. Make sure that the repository is
publicly accessible before you submit the form below (in ‘2.’).
2. Fill out the following form with details about your submission: https://vit.dyte.io
3. You must not make any commits/changes to the GitHub repository after 10.00 pm on
17 July 2021. All submissions violating this will be disqualified immediately.
4. All plagiarised submissions will be disqualified. It is advised that you make your
repository public immediately after the submission deadline so as to prevent
people from copying your code. Please note that evaluations will commence right
after the submission deadline, so you must ensure that the repository is public before
evaluations begin.
5. The Github repository must have a file called “README.md” which contains
information about how to install and run your project. If you have deployed your
application, you may include a link in the README.
6. We will be judging based on:
a. Correctness: Does the code correctly implement all the features described in
the problem statement?
b. Code Quality: Does the code follow best practices to ensure the code is
clean, readable, maintainable, and comments are provided wherever
necessary?
c. Originality: Is the core functionality plagiarized or does the code have
excessive use of external libraries? Note that you are allowed to use external
libraries, as long as you have a sizable original contribution to the core
functionality of your application.
2
d. Efficiency: Is the code efficient (i.e, it performs operations in a sufficiently
performant manner with less use of resources)?
e. Secure: Does the code or the public repository have any security
issues/vulnerabilities?
Design Projects
1. Submissions must be made in the form of a Google Doc.
2. Add links to all your deliverables (for example, your Figma file, your wireframes, etc.)
in the Google Doc. You can also add screenshots of your designs and any necessary
descriptions in this document.
3. If you are required to upload any files (such as assets, wireframes, illustrations),
upload them in a Google Drive folder, and add a link to your Drive folder in your
Google Doc.
4. Make sure that the Google Doc and all links included in it are publicly accessible
before you submit the form below (in 5.).
5. Fill out the following form with details about your submission: https://vit.dyte.io
6. You must not make any changes to the Google Doc or any of the links that you have
included after 10.00 pm on 17 July 2021. All submissions violating this will be
disqualified immediately.
7. You are responsible for making sure that your submission is not copied. All
plagiarised submissions will be disqualified.
3
Problem Statements
Frontend (React)
For this problem statement, you should not build your own backend. You are allowed to use
any library that you may require during implementation.
Create an online code editor using React that supports the following features:
1. There are 3 sections, namely:
a. A “file explorer” pane that contains 3 files: index.html, index.css, index.js.
b. A “code editor” that supports syntax highlighting for HTML, CSS, and JS.
c. A “live view” section to show the rendered HTML website.
2. Clicking on a file from the “file explorer” should display the corresponding content on
the code editor for editing.
3. The “live view” section must display the rendered website that was created by the
user. When a change is made to any of the index.html, index.css, or index.js files,
the “live view” section should hot-reload, and display the new output.
4. Bonus:
a. Create a feature to save your code, and generate a shareable link (such as
https://editor.io/edit/<unique-id>) that should show the saved code when the
link is visited. Use the Pastebin Developer API to save your code, generate a
unique link, and then load it back at a later stage.
b. Deploy your website on Github pages.
c. Make your React application using Typescript.
The following screenshot from https://codepen.io shows an example of how your application
might look. Feel free to change the UI/UX as you see fit.
4
Important Note:
In the screenshot above, there are 3 “code editor” sections, and the “file explorer” is
absent. However, in your implementation, there should be just one “code editor” in which
the content changes dynamically based on what the user selects in a “file explorer”.
5
Backend (Javascript/Typescript)
For this problem statement, you may use any database of your choice. You are allowed to
use any library, but you must use the libraries that are specified in the problem.
The goal in this problem statement is to create a “webhooks microservice” using
Moleculer and a “backend” using Express with the following specifications:
1. The backend should have the following routes:
a. A set of routes that lets an “admin” create, read, update, and delete
webhooks. The routes should use actions defined in the “webhooks
microservice” below (“register”, “list”, “update”, “delete”) to carry out the
actual functionality and return the result of the action call appropriately as a
response.
b. A route called ‘/ip’, which calls the “trigger” action exposed by the
“webhooks microservice”. The IP of the user visiting this route should be
sent as a parameter to the action.
2. The “webhooks microservice” should have the following actions:
a. “webhooks.register”:
i.
This accepts a single parameter called “targetUrl” (the URL to which
the webhook be sent out).
ii.
The action should generate a unique ID for the webhook to be created
and then save the ID and the “targetUrl” in the database.
iii.
This action should return the unique ID as a response.
b. “webhooks.update”:
i.
This accepts two parameters, “id” and “newTargetUrl”.
ii.
The action should update the target endpoint of a webhook with the
specified id to “newTargetUrl”.
iii.
Return a success response if the webhook was updated, otherwise,
return an appropriate error response (if the webhook wasn't found).
c. “webhooks.list”:
6
i.
This action takes no parameters.
ii.
The action should query all registered webhooks from the database
and return them as a response.
d. “webhooks.trigger”:
i.
This accepts a single parameter called “ipAddress”.
ii.
Upon calling this action, the list of target URLs for the webhooks is
extracted from the database.
iii.
An HTTP POST request is sent to each of these target URLs. The
request body contains a JSON with the “ipAddress” and a UNIX
timestamp of when the webhook was sent.
iv.
The requests must be sent to all the target URLs in parallel. Since
there might be a huge number of target URLs, you must limit the
number of requests that happen concurrently. (E.G., If 200 requests
are to be made, you can make the requests in 20 batches of 10
parallel requests)
3. Bonus:
a. If a request to any target URL fails in the “webhooks.trigger” action (i.e. the
response has a non 200 status code), the microservice should keep retrying
the request until it succeeds (maximum of 5 retries).
b. Dockerize the backend and the moleculer microservice. You may or may not
include a docker-compose.yml.
7
App Dev (React Native)
Your task is to create a document scanning application (like CamScanner) using React
Native which allows users to:
1. Click pictures of their documents
2. Crop them and store those cropped images in their local storage.
You are not required to build the scanning logic on your own. You should use libraries like
Michaelvilleneuve/react-native-document-scanner to do detect the edges of a document in
an image and Michaelvilleneuve/react-native-perspective-image-cropper to perform the
actual cropping.
The application should have the following screens:
1. A screen to scan a new document from the live camera feed, and save that
document as an image on the user's local storage. The user must be allowed to edit
the name of the file before saving it.
2. A screen to list all documents created by a user in a grid view. Clicking on a
document should open it in the user's gallery application.
3. Bonus: A screen that lets users upload their documents online using FileStack.
This application should run both on Android (version 10 and above) and iOS (version 12 and
above).
8
UI/UX Design
Overview:
An “app store” is a popular way for a company to expand the capabilities of its product.
Various SaaS companies are also building their own app/plugin/extension store specific to
their product. A few of these are WordPress Plugins Store, Zoho Marketplace, VS Code
Extensions Marketplace, Shopify App Store, and Figma Plugins Store. Your task is to
redesign the app store for slack (slack.com/apps).
Objective:
Identify 2 problems with the current store and solve those in your redesign. Select 3
components that you used in your redesign and show all the possible states & variants for it.
For example, the variants of a form field could be “errored”, “disabled”, “password”, etc.
Deliverables:
●
Document where the research methods and inspirations are taken from.
●
Hand-drawn or digital wireframes and flow. Any other UX analysis.
●
UI of the redesigned screens (maximum of 5 screens).
●
Documentation supporting how you solved the identified problems.
●
3 selected components and the possible states and variants for it.
●
Figma or AdobeXD file or link.
9