Repository files navigation

This project is an educational demonstration of building a web application todownload Instagram videos using Next.js. The primary goal is to explore modernweb development techniques, including server-side rendering/components, APIinteraction (potentially via Next.js API routes), state management, formhandling, and building a clean UI with Shadcn/ui.

Disclaimer: This tool is intended for educational purposes only. Downloadingvideos from Instagram may violate their Terms of Service. Please respectcopyright laws and the platform's policies. Use this tool responsibly and onlyfor content you have the right to download.

Website Preview:gram-grabberz.vercel.app

• Download Instagram Videos: Input an Instagram video URL to fetch anddownload the video file. (Note: Functionality depends on the backendimplementation, which isn't detailed here but is a core part of the learningexperience).
• Modern Frontend Stack: Built with the latest Next.js (App Router).
• Clean UI: User interface crafted usingShadcn/uicomponents and styled with Tailwind CSS v4.
• Responsive Layout: Ensures a consistent and user-friendly experienceacross different screen sizes.
• Type-Safe: Written entirely in TypeScript.
• Form Handling & Validation: Robust input handling using React Hook Formand Zod for schema validation.
• Client-Side Caching: Efficient data fetching and state management withTanStack Query (React Query).
• Theming: Supports light and dark mode usingnext-themes.
• Internationalization (i18n): Setup for multi-language support usingnext-intl.
• User Feedback: Usessonner for toast notifications.
• Optimized Development: Utilizes Next.js Turbopack (--turbopack) forfaster development builds.

This project serves as a learning resource for understanding:

• Next.js Fundamentals: App Router, Server Components, Client Components,API Routes (if implemented for backend logic), SSR/SSG concepts.
• UI Development: Building composable and accessible UI components withShadcn/ui, Radix UI primitives, and Tailwind CSS utility classes.
• State Management: Managing server state, caching, and background updateswith TanStack Query.
• Form Management: Implementing complex forms with validation using ReactHook Form and Zod.
• API Integration: Fetching data from external sources or custom backendendpoints. (The specifics of interacting with Instagram are a key learningchallenge).
• TypeScript: Leveraging static typing in a full-stack React framework.
• Modern Styling: Using Tailwind CSS v4 features and utilities likeclsxandtailwind-merge.
• Internationalization: Setting up and managing translations withnext-intl.
• Project Structure & Tooling: Organizing a Next.js application, usingESLint and Prettier for code quality.

• Framework:Next.js (v15+)
• UI Library:Shadcn/ui
• Styling:Tailwind CSS (v4)
• Component Primitives:Radix UI
• Language:TypeScript
• Data Fetching:TanStack Query (React Query) (v5)
• Form Handling:React Hook Form (v7)
• Schema Validation:Zod
• Internationalization:next-intl
• Theming:next-themes
• Notifications:Sonner
• Linting/Formatting: ESLint, Prettier
• Package Manager: Yarn

Follow these steps to set up and run the project locally:

1. Clone the repository:

   git clone https://github.com/riad-azz/instagram-video-downloader.git

   cd instagram-video-downloader

2. Install dependencies:

   yarn install# or npm install

3. Run the development server:

   • This project uses Turbopack for faster development builds.

   yarn dev# or npm run dev

   • The application should now be running onhttp://localhost:3000.

4. Build for production:

   Ensures Locales are up to date, must be run every time you add/edit a localefile for production(no need to run for development).

   yarn build:locales# or npm run build:locales

   yarn build# or npm run build

5. Start the production server:

   yarn start# or npm run start

1. Open the application in your web browser.
2. Find the Instagram video you wish to download and copy its URL.
3. Paste the URL into the input field on the application's main page.
4. Click the "Download" button.
5. If successful, a download link or button for the video file should appear.

As this is primarily an educational project, contributions might focus onimproving code clarity, adding explanations, fixing bugs, or exploringalternative approaches to the problems tackled.

If you'd like to contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature-name).
3. Make your changes.
4. Commit your changes (git commit -m 'Add some feature').
5. Push to the branch (git push origin feature/your-feature-name).
6. Open a Pull Request.

This project is licensed under the MIT License - see theLICENSE.md file fordetails.

Happy Coding! Remember to use this project responsibly and focus on the learningaspects.