This is a Next.js project bootstrapped with create-next-app.
- I have set up pre-commit and pre-push hooks to run test cases before allowing any operation.
- The project is deployed on Netlify(https://master--insta-stories-test.netlify.app/), which automatically updates whenever a new commit is pushed to the master branch. Before building the project, Netlify runs a test command to ensure all unit test cases pass.
Note: Please use yarn for dependency management as pre-commit and pre-push hooks have been set up accordingly.
Following are the steps to run it locally:
- install the dependencies:
yarn install- run the development server:
yarn devOpen http://localhost:3000 with your browser to see the result.
- Implemented gradient border color for stories.
- Removed the scrollbar to align with Instagram's design.
- Clicking on a story opens a full-screen modal.
- Navigating between stories by clicking: left side for previous, right side for next .
- UI controls like dragging facilitate story navigation.
- Automatic transition to the next story after 5 seconds of inactivity.
- Implemented a close button to exit the story view.
- Clicking on any story in the homepage displays the expanded view with that story as the current image.
- I have implemented nextjs Image tag for images as it optimizes images for performance by automatically providing features like lazy loading, responsive sizes, and efficient formats.
- I have written API routes in Next.js which provides streamlined development, deployment, and performance benefits.