Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yasinatesim/facebook-album-downloader

This project is s simple web application that allows users to download Facebook albums in full resolution
https://github.com/yasinatesim/facebook-album-downloader

album-downloader facebook facebook-album nextjs puppeteer typescript typescript-react

Last synced: 13 days ago
JSON representation

This project is s simple web application that allows users to download Facebook albums in full resolution

Awesome Lists containing this project

README

        




Facebook Album Downloader


Facebook Album Downloader



A simple web application that allows users to download Facebook albums in full resolution.


ยท Report Bug
ยท Request Feature

## ๐Ÿ“– About

Facebook Album Downloader is a web application that allows users to download Facebook photo albums in full resolution. Simply enter the link to the album you want to download, and the application will create a ZIP archive containing all photos from the album.

### ๐Ÿ“š Tech Stack


Puppeteer
A Node library for controlling headless Chrome or Chromium browsers

Axios
A promise-based HTTP client for the browser and Node.js

JSZip
A JavaScript library for creating, reading, and editing ZIP archives

Next.js
The React Framework for SEO Friendly website and more...


React
A JavaScript library for building user interfaces


skratchdot/react-github-corner
Add a Github banner to your project page for React


Commitlint
Send commit messages to conventional commits rules


TypeScript
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.


SASS
The most mature, stable, and powerful professional grade CSS extension language in the world


Editorconfig
Helps maintain consistent coding styles for my working on the same project across various editors and IDEs


Eslint
Find and fix problems in your JavaScript code


Prettier
An opinionated code formatter

## ๐Ÿง What's inside?

### Features

The main feature of this application is to allow users to download Facebook albums after entering the album link. When users enter a Facebook album link and click the "download" button, the application uses a tool called Puppeteer to scrape the HTML of the album and then presents these files as a downloadable ZIP file. Additionally, the application also includes a feature that warns the user if they are leaving the page while the download process may not have been completed yet.

## Structure

- `pages` - Contains top-level pages of the application.
- `api` - Contains serverless API endpoints.
- `download.ts` - Downloads a Facebook album using Puppeteer to scrape the HTML.
- `index.tsx` - Renders the root component into the DOM.

The `src` directory contains the following:

- `styles` - Contains global styles.
`global.scss` - Global SCSS stylesheet.
- `containers`
- `Home` - Contains the main component of the application.
- `Home.module.scss` - Local SCSS stylesheet for the Home component.
- `Home.tsx` - Renders a form that allows users to input a Facebook album link and start downloading it.
- `Hooks`
`index.ts` - Exports all custom hooks.
`useBeforeUnload.ts` - Provides a hook that warns the user before leaving the page if a download is in progress.

## Getting Started

### ๐Ÿ“ฆ Prerequisites

- Node (v17.0.0+)

- Npm (v8.1.0+)

### โš™๏ธ How To Use

1. Clone this repository

```bash
git clone https://github.com/yasinatesim/facebook-album-downloader.git
```

2. Install the project dependencies

```bash
yarn install
```

**For Development**

```bash
yarn dev
```

### For Docker

2. Change the directory

```bash
cd facebook-album-downloader
```

3. Rename .env.example file to .env

4. Run this command **without `yarn` or `yarn install`**

```bash
yarn setup
```

or

```bash
yarn && docker-compose up --build

# or

# For Build
docker build -t facebook-album-downloader .

# For Run
docker run -p 3000:3000 facebook-album-downloader
```

App is running on [http://localhost:3000](http://localhost:3000)

**For Production Build & Build Start**

```bash
yarn build
```

and

```bash
yarn start
```

**For Lint & Format**

```bash
yarn lint
yarn format
```

## ๐Ÿ”‘ License

- Copyright ยฉ 2023 - MIT License.

See [LICENSE](https://github.com/yasinatesim/facebook-album-downloader/blob/main/LICENSE) for more information.

---

_This README was generated with by [markdown-manager](https://github.com/yasinatesim/markdown-manager)_ ๐Ÿฅฒ