Home Page
Home Page
Explore Page
Explore page - time filters
Trending Page
Generate Post Window
Live Generated Post

Inspiration 💡

In the fast-paced digital content landscape, creators struggle to quickly transform trending news into engaging social media posts. Snippet emerges as the ultimate solution, empowering content creators to generate high-impact posts in minutes.

What it does 🌐

The web app quickly creates well-organized posts from news articles, making them ready to be shared on platforms like LinkedIn and Medium. It has two pages:

Explore Page: Here, users can choose from different genres such as sports, entertainment, and more. Based on their selection, they can see news sorted by engagement and can also generate a post from any news article.
Trending Page: This page shows the top news headlines from around the world, sorted by engagement. Users can go directly here and create a post by clicking on the generate post button.

How we built it 🛠️

Frontend & Backend:

We chose Next.js for its powerful capabilities in building dynamic, high-performance web applications. Its server-side rendering and static site generation features ensure fast load times and a smooth user experience across devices.

News Aggregation:

We seamlessly integrated the News API, a cutting-edge solution for aggregating news from reliable sources in real-time to keep users informed with the latest updates based on genres, and time filters. Engagement data is obtained via the SharedCount API, which provides interaction metrics for each article. News articles are then sorted based on engagement levels.

Post Generation:

Used Summarization API to condense the article descriptions into concise summaries. The summaries are passed to a Prompt API, which, with predefined prompts and templates, generates posts that are well-structured and suitable for all platforms.

Styling:

We brought our design to life using Tailwind CSS. This utility-first framework allowed us to create a sleek, modern interface that is both visually appealing and fully responsive, ensuring an optimal experience on any device.

Deploy

We have deployed our website on Vercel.

Technical Stack 💻

Framework: Next.js
Built-in AI API: Prompt API, Summarization API
Styling: Tailwind CSS
Data Source: News API
Engagement: ShareCount API

Key Features 🔑

One-click news-to-post conversion
Intelligent content summarization
Trending news tracking
Platform-specific post optimization

Challenges we ran into

Initially, we faced CORS errors after deploying the project. This issue was resolved by setting up backend API routing within the Next.js framework. By creating API routes, we ensured smooth communication between the front end and back end, effectively bypassing CORS restrictions and enabling seamless integration.
Response time of the Prompt API: Initially, we used the non-streaming variant, which increased the response time because the summarization API's output was processed as a whole. We addressed this by implementing the streamingPrompt function, which delivers output in chunks, improving both the UI experience and overall response time.

Accomplishments that we're proud of

We are proud of what we ideated, we were able to deliver with 99.9% accuracy. This near-perfect execution is what truly makes us happy and satisfied

What we learned

Team Coordination: Successfully turning ideas into deliverables with precision and collaboration.
Adaptability: Learning to address real-world issues and iteratively improve solutions.
Efficient Workflow: Streamlining API integrations, from summarization to post-generation, for better performance.
Optimizing Response Time: Reducing latency by implementing the streamingPrompt function, enhancing UI responsiveness.
CORS Resolution: Overcoming deployment challenges by creating backend API routes within Next.js for seamless frontend-backend communication.