Assignment for a Frontend Developer Role in Noida

Build "Instagram Stories" feature

Objective

Develop a simplified version of the Instagram Stories feature. This application should allow users to view a series of "stories" – short, temporary posts that disappear after a set period (for the purposes of this assignment, the disappearance logic does not need to be implemented). The focus will be on the user interface and interaction, rather than backend logic or persistence.

Requirements

Implement the following features:

• Build this only for mobile and not desktop.

• You should use React.js with TypeScript for this assignment.

• A list of stories (only images) should be visible in a smaller view in a horizontally scrollable list.

• Fetch the list of stories from an external file.

• User should be able to start viewing one of the available stories from list.

• The user should be able to manually navigate between stories using UI controls. Tapping on the left side of an open story should take the user to the previous story. Tapping on the right side of an open story should take the user to the next story.

• Stories should automatically advance to the next one after 5 seconds. The loading states should be handled properly.

• Do NOT use any external library for the core functionality.

• Use transitions for smoother story viewing.

• Write e2e tests for the basic functionality of the app.

Submission Guidelines

• Provide a Git repository containing your code, including all source files, test files, and any configuration files needed to run the application.

• Include a README.md file with:

  • Deployment link of your application. Do deploy your app somewhere.

  • Instructions for setting up and running your application and tests.

  • A brief explanation of your design choices, particularly how you optimized for performance and scalability.

• Steps:

  • Commit initial generated project structure (project scaffolding) on master/main branch.

  • Build the complete assignment on a different branch with a meaningful name.

  • Raise PR from this branch to master/main.

  • Submit the PR link.

Evaluation Criteria

• Functionality: The basic story viewing and navigation functionalities must be correctly implemented.

• Performance: How efficiently the stories load and progress while viewing.

• Code Quality: Code is clean, modular, and follows best practices for TypeScript development. We love to see clear code rather than clever code.

• UI/UX Design: The stories feature should be intuitive to use, with attention paid to the user experience on mobile.

• Testing: Tests should be comprehensive for the core functionality.

Do spend some time initially to plan out how you will do it. Manage your time accordingly.

Submit here: https://forms.gle/ER387znmXfN4MvzdA

All the best. You got this!