Scribd
Upload
54 views2 pages

Build Your Travel Journal App

The TravelStory assignment requires the development of a web application that allows users to create an interactive travel journal on a full-screen canvas, featuring image uploads and editable text blocks. Users can save their work with animations and export it as a short video or PDF. The project must utilize anime.js for animations and Remotion.dev for video generation, with an emphasis on clean UI and modular code.

Uploaded by

nishreyasaruni
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
54 views2 pages

Build Your Travel Journal App

The TravelStory assignment requires the development of a web application that allows users to create an interactive travel journal on a full-screen canvas, featuring image uploads and editable text blocks. Users can save their work with animations and export it as a short video or PDF. The project must utilize anime.js for animations and Remotion.dev for video generation, with an emphasis on clean UI and modular code.

Uploaded by

nishreyasaruni
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Frontend Assignment: TravelStory

Deadline - 05th May, 2025 | 5 PM IST

Overview:​
Build a web application called TravelStory, where users can create an interactive travel journal
by freely placing images and text on a full-screen canvas. Once complete, they can save their
work with a smooth animation and export it as a short animated video or a downloadable PDF.

Functionality Scope
1. Travel Journal Canvas
●​ On load, display a blank white canvas (laptop resolutions). Please check the reference
image to understand how the canvas can hold information.
●​ Users should be able to:
○​ Upload images
○​ Add text blocks (with editable font size, color, and content)
○​ Move and position all elements freely across the canvas (drag-and-drop layout)​

2. Save Animation ([Link])


●​ On clicking “Save”, trigger a smooth [Link] animation:
○​ Think: progress bar, animated “Saving your story...” message, or fade+scale
effects
●​ Once complete, show: “Journal saved successfully!”​

3. Export Options
After saving, show two buttons:
●​ Generate Travel Video (via Remotion):
○​ Use [Link] to create a short 5–10 second video
○​ The video should:
■​ Animate each canvas element (text + images) entering the frame with
motion (slide/fade/scale)
■​ Visually reconstruct the journal as a quick recap montage​

●​ Export as PDF:
○​ Capture the current canvas layout and export it as a PDF file

Technical Requirements
●​ Use [Link] for save animations and any UI transitions.
●​ Use [Link] to generate the video (no screen recording).
●​ All canvas elements should be freely draggable (not constrained to grids or lists).
●​ The canvas should be responsive to most laptop screen sizes, maintaining usability
across 13”–15” screens.

Bonus (Optional)
●​ Allow resizing and rotating of canvas elements.
●​ Add travel-themed stickers/icons for decorative use.
●​ Let users choose from a few preset canvas themes (e.g., Beach, Mountains,
Cityscape).

Submission
Subject of email: “Frontend Assignment - TravelStory”
To: info@[Link]
●​ GitHub repo with:
○​ Setup instructions
○​ Hosted demo (if possible)
○​ README describing features and approach
●​ Clean UI and good UX are important
●​ Code should be modular, readable, and well-documented
●​ Send your resume, LinkedIn Profile (and portfolio website, if any)

Reference Image: Your travel journal page should look something similar to this. Images, texts,
and any other items present should be draggable.

You might also like