Full Stack Assignment
The assignment is a single mobile web page.
Full Stack Assignment 1
Figma link for the design specification
NOTE: DO NOT request edit access to the Figma file. You can duplicate the file
and edit it if you wish to play around with the design
The page lists all the interior designers who are active on EmptyCup’s platform.
Any homeonwers interested in finding an interior designer who they can
collaborate with can come to this listings page where they can see all our users
who are available for business.
1. Web page + Styling
Your objective is to create a single mobile web page that looks exactly like the
given design.
Styling matters a lot. EmptyCup’s users are designers and have a very sensitive
taste. They will ditch the product and worse, lose respect for EmptyCup & it’s
products, if the styling is off. So, the first requirement is that the page you
create should look exactly like the figma design. You can use the same fonts
and icons as in the Figma file by downloading the icons from Figma itself.
This demonstrates your ability to work with HTML & CSS code. When it
comes to writing software for production environment, HTML CSS fluency is
paramount. You probably used websites before where some buttons are not
visible or the content layout is screwed up. That was because the person
who wrote the HTML didn’t get it right. So, this is the most basic test.
2. Shortlisting
Once you have the page ready, you should work on making the page dynamic
through Javascript. For this, you should add the shortlisting functionality. For
every listing, on the right there are 4 action items. Details, Hide, shortlist,
Full Stack Assignment 2
report. You have to implement the functionality for the 3rd shortlist button. The
shortlist button is a toggle button. If selected, the icon inverts (line icon to fill
icon and vice versa). Fill icon indicates that the listing has been shortlisted. All
shortlisted listings can be viewed using the “Shortlisted” filter on the top bar.
The “Shortlisted” filter is also a toggle icon. When it is toggled on, only
shortlisted listings are shown below. If toggled off, all listings are shown.
If you can implement this, it shows you have a decent command over writing
Javascript. EmptyCup is a web based interior design tool. So, our product is
heavily dependent on Javascript. If you can implement this, you will be able
to handle a lot of our codebase.
You can ignore the rest of the action buttons on each listing.
3. Backend integration
The next step is to get the data for all the listings. This data shouldn’t be
hardcoded in the HTML files. It needs to be queried from the backend. The best
way to implement this is by deploying a simple python based REST API using
Flask that returns all the listings data as a JSON object.
If you haven’t worked on any REST API project before, the best way to start
would be by saving the data in a static JSON file that will be served along with
the HTML page. The javascript linked in the HTML page will load the JSON file
as a static asset just like loading an image. Once you have that working, you
can create a separate API server to serve this JSON from a DB.
If you can implement this, it shows that you have full stack capabilities. A full
stack developer is way more efficient because there are no communication
overheads between frontend and backend work. At EmptyCup, all your work
will have both frontend and backend components.
Full Stack Assignment 3
If you don’t have experience with backend development, you can start with
using Flask on Python. There are good Flask Tutorials on YouTube to get you
started. There are some good tutorials for API development by Miguel Grinberg
for REST API development on Flask.
4. Deployment
There are 2 modules in deployment:
1. Local deployment for development
2. Public cloud deployment for demo
For local deployment, you should use Docker. If you are not aware of Docker,
you can find a lot of simple tutorials to setup docker locally. You will have to
create containers for all the services that you need to run your app properly
including the DB. Ideally, a local dev deployment should work without an
internet connection. Once you create the containers, you should be able to
orchestrate those containers using docker-compose . Ideally, it should be possible
for someone to just pull your repo and deploy locally without any instructions
from you. Make use of the README.md file.
Once you have the build working locally on docker, you should figure out how
to deploy publicly. Frontend code is static and can be deployed by a service
like Netlify. Deploying on netlify will not be very complex. You can even have
simple link between your Github repository and Netlify, so that whenever you
push your code changes to Github, Netlify automatically deploys the latest
code. Deploying backend code is a little more complex. Depending on the cloud
and the backend technology you use there are multiple options. At this point,
probably the easiest would be to get a cloud vm and run the API server there.
Deploying to AWS Lambda or Azure Functions should also be possible. You can
also deploy the docker containers directly.
If you can deploy publicly, it shows that you have a good understanding of
devops as well. Most beginners neglect devops thinking code is the
Full Stack Assignment 4
important part. But devops is as important as programming and is the
gateway to bring your programming skills into the real world.
Deployment needs a good understanding of basics of computer science like
OS and networking. If you miss something crucial, it can become frustrating
easily. If you get stuck, you can ask for help on the Slack community channel
Evaluation
There will not be any Q&A interviews. Based on your assignment submission,
we will shortlist for a code review session. Depending on your understanding of
the codebase, you’ll be selected for the internship position.
You need NOT complete the whole assignment to be considered for evaluation.
You can complete as much as you can and submit. But the more complete your
assignment is, the better your chances are.
Submission
To submit the assignment, you need to submit 2 files:
1. A zip file containing all your code with the name “Your Name.zip”. The zip
file should yield a “Your Name” folder containing all the code when it is
unzipped. Please make sure your codebase contains a README.md in the
root folder which gives step by step instructions to run and preview your
code. The zip file with your code has to be named in the format “Your
Name.zip”. DO NOT add further any extra words like Final or ’ -2’ etc. There
is an automated system that picks up your assignment and categorizes it
for evaluation. So please follow the instructions precisely.
2. A screen recording demo of your work in action. The video should show the
demo of the webpage including the shortlisting functionality (~1min). It
should then show your database schema (~1min). After that it should show
Full Stack Assignment 5
the hierarchy of all files in your source code folder(~1min). It should show
the backend code for your API routes(~1min). It should show the UI
components (~1min). You should explain each module with a voice over.
You can use Loom for screen recording or any other software you’re
comfortable with.
You can submit the 2 files by emailing them to tryouts@emptycup.in with the
subject EmptyCup Assignment 2025 - Your Name. Based on your submission,
you will be shortlisted for an online code review. This will be a online video call
where we’ll walk through your code line by line and discuss it with you as we
would when merging your code into production.
Sometimes, college email addresses get blocked when sending large files
outside the organisation. Hence, it is recommended that you submit with your
gmail account. In the email, please mention your college name.
If there is a problem attaching the files to your email, you can use Google drive
to upload and share the assignment code & demo video. The filename
guidelines should still be followed.
The assignment can be submitted multiple times. Only the final submission will
be considered for evaluation. So, DO NOT wait till the deadline to submit your
assignment. If you are submitting the assignment for the second time. Please
reply on your exisiting email thread. DO NOT create new email threads for each
submission.
We request you to please keep your repository private on Github. You can
grant private access to your mentor, if and when they ask. If we detect
plagiarism, everyone involved may be disqualified.
CAUTION: We strongly advise that you don’t waste your time and our time by
copying or duplicating code from someone or somewhere else. There will be a
detailed code review at the end where a mentor will walk through your entire
codebase. Even if we don’t, you won’t be able to maintain that image for more
Full Stack Assignment 6
than a week when you start your internship as the work will be intense and you
won’t be able to copy or get outside help. We will take strong action if we find
out you misrepresented your work.
Full Stack Assignment 7
