Twitter Gallery is an open-source MIT-licensed Next.js application that allows you to easily browse and filter media files from Twitter users.
Twitter's built-in media tab is often cumbersome to use, and it lacks the ability to search within the media section alone. This limitation can be frustrating for users who primarily want to explore and view images without the distractions of other types of content. To address this issue, I have built Twitter Gallery.
With my app, you can effortlessly discover and filter media files shared by Twitter users. Here's what sets Twitter Gallery apart:
- Streamlined Media Display: I have reimagined the way media files are presented, providing a clean and intuitive interface focused solely on visual content. Say goodbye to clutter and distractions as you browse through beautiful images.
- Multiple Columns: Twitter Gallery optimizes screen space by displaying photos in multiple columns, allowing you to view more images at once. This efficient layout ensures you can explore media files more efficiently and enjoy a seamless browsing experience.
- Enhanced Search Functionality: My app empowers you to search specifically within the media section of Twitter. Easily find images related to your interests or discover captivating photography from your favorite users. Twitter Gallery takes the frustration out of media exploration.
- Caching System with Redis: Faster response time, fewer API requests. Caches frequently accessed data, reducing the need to fetch information from the database or external services repeatedly. Optimizes performance by minimizing response time and API calls.
├── public
│ ├── gallery.svg
│ ├── github.svg
│ ├── placeholder.jpeg
│ └── twitter.svg
├── src
│ └── app
│ ├── components
│ │ ├── BlurImage.jsx
│ │ ├── Header.jsx
│ │ └── LoadingSkeleton.jsx
│ ├── _actions.js
│ ├── layout.js
│ ├── page.js
│ ├── globals.css
│ └── icon.svg
├── next.config.js
├── tailwind.config.js
└── README.md- JavaScript
- Tailwind CSS
- React
- Next.js
- @upstash/redis SDK
- Twitter API SDK
- AutoAnimate
- Clone the repository to your local machine:
git clone https://github.com/dmoon16/gallery-twitter.git- Navigate to the project directory:
cd gallery-twitter- Install the dependencies using
npm:
npm install- Don't forget to configure
.envfile. Get your Twitter API Token and Create Redis database:
BEARER_TOKEN="{YOUR API TOKEN}"
UPSTASH_REDIS_REST_URL="{YOUR URL}"
UPSTASH_REDIS_REST_TOKEN="{YOUR API TOKEN}"- Start the development server:
npm run dev- Open your web browser and go to http://localhost:3000 to view the application.
That's it! You should now have the project running locally on your machine. If you encounter any issues, be sure to check the project's documentation and issue tracker on GitHub.
Bug reports, feature requests, and pull requests are welcome. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
- Sponsor to me on GitHub.
- Give a star to this repo.
- Upvote on ProductHunt.
- Follow me on GitHub @dmoon16.