Web Developer Intern
n
i
Ass g
ment
[Link]
WHY ARE YOU
DOING THIS?
Objective
Your goal is to demonstrate not just your ability to “build what is
asked”, but to think like a front-end developer: clean structure,
responsiveness, and attention to detail in both code and design.
Brief
As a shortlisted candidate for the Web Developer Intern
position at Marketing Mojito, we would like to provide you with
a practical assignment that will allow us to assess your
abilities in frontend development and React.
This assignment consists of a React-based mini application.
We will provide you with the necessary content, logo, and
colour scheme.
CONQUER THE
CHALLENGE
The Assignment: Expense Tracker App
Build a simple personal Expense Tracker using React that lets users
log, categorise, and manage their expenses — with a live currency
conversion feature powered by a public API.
Requirements:
1. Core Functionality
Allow users to add a new expense by entering a name,
amount, and category (e.g. Food, Travel, Marketing, Utilities,
Other).
Display all added expenses as a list or card-based layout,
showing the name, category, amount, and a delete button to
remove the entry.
Show a running total of all expenses that updates
automatically as entries are added or removed.
Show a breakdown of spending by category (e.g."Food: $120
— Travel: $45").
Fetch a live currency exchange rate from a free public API
(such as ExchangeRate-API or [Link]) and display a
real-time conversion preview — for example, showing the total
in a second currency of the user's choice via a simple
dropdown (USD, EUR, GBP, INR, etc.).\
[Link] Requirements
Use React (Create React App, Vite, or [Link] — keep it
simple).
Use a component-based structure with at least 4 meaningful
components (e.g. ExpenseForm, ExpenseList, SummaryPanel,
CurrencyConverter).
Manage all state using React hooks (useState, useEffect). No
third-party state management libraries.
Handle API loading and error states — do not let the UI break
or show blank space if the API call fails.
Style using plain CSS, CSS Modules, or Tailwind. Do not copy
pre-built UI kits or templates.
FOLLOWTHE
INSTRUCTIONS
Focus Areas
Is the interface intuitive to use without any instructions?
Does the layout feel visually consistent — spacing,
typography, and colour used deliberately?
Does nothing break, overflow, or look misaligned at mobile
width?
Are your components clean, reusable, and sensibly named?
Are loading and error states handled gracefully throughout?
Submission Guidelines
You can submit your assignment in the following way:
1. React App
Live URL (Vercel/Netlify, etc.)
GitHub repository link
2. Brief Note (Optional but Recommended)
A short note (200–300 words) describing:
What you built
What API you used in the React app
Any challenges you faced and what you would improve with
more time
3. Responsiveness
The app should be responsive for at least the following resolutions:
1600px x 900px
414px x 749px (mobile view)
4. Deployment
Deploy the app using any free hosting service such as Vercel or
Netlify.
Ensure the live link is publicly accessible.
FOLLOWTHE
INSTRUCTIONS
Instructions
[Link] not copy & paste complete projects or layouts from sources
like W3Schools, CodePen, Envato, or pre-built templates. We want
to see your understanding.
[Link] are required to set up your own hosting/deployment for the
React app (e.g., Vercel/Netlify).
[Link] valid, clean, and secure coding practices throughout the test.
[Link] both the React app is publicly accessible when you submit.
Recommended time to complete the assignment: 48 Hours
from the moment you receive this brief.
Important Note
This test assignment is designed purely for assessment
purposes and is not directly related to any live client project.
Email Subject: Assignment submission for Web Developer
Internship at Marketing Mojito
Please send your submission links along with your resume to
hr@[Link]
LET’S SEE WHAT
YOU GOT
GOOD LUCK!