SpreadIt: Social News Aggregation Platform
Tags: typescript, nextjs, react, webdev
Published: 2024-01-07 00:32:13

### Introduction

Welcome to SpreadIt, a cutting-edge social news aggregation platform that seamlessly blends cutting-edge backend technologies with a user-friendly interface to revolutionize the way you consume and share news. Powered by a robust stack of modern web development frameworks, including TypeScript, React, Next.js, and PostgreSQL, SpreadIt offers a scalable and efficient infrastructure for facilitating seamless content submission, sharing, and voting across various formats, including articles, images, and videos.

## Overview

SpreadIt is designed to offer users a smooth experience for discovering, sharing, and engaging with diverse content types. It facilitates content submission, voting, and sharing through an intuitive and responsive interface. The platform aims to foster a vibrant community-driven ecosystem.

## Features

- **Content Submission:** Users can submit articles, images, and videos effortlessly.
- **Voting System:** Enables users to vote on submitted content.
- **Seamless Sharing:** Facilitates easy sharing of content across various platforms.
- **Modern Interface:** User-friendly and responsive design for an enhanced browsing experience.
- **Authentication & Authorization:** Utilizes NextAuth and OAuth2 for secure user authentication.
- **Scalable Architecture:** Employs scalable backend technologies for efficient handling of data.
- **Optimistic Updates:** Provides a smooth and responsive interface using optimistic updates.
- **Infinite Scroll:** Implements infinite scroll for seamless content browsing.
- **Real-time Updates:** Utilizes Redis and Upstash Redis for real-time data updates.
- **Data Validation:** Implements Zod for robust data validation.
- **Styling:** Utilizes TailwindCSS and Shadcn-ui for a sleek and customizable UI.

## Demo

> Sign In
> ![Sign In](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bzcb64ichqdba4tpskjs.png)
> Sign Up
> ![Sign Up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jp231ibmsq3rs035o9e.png)
> Feed
> ![Feed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olm498bvgd0zs04cnpkj.png)
> Create Community
> ![Create Community](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weps81gju8eg3l8o3s20.png)
> Create Post
> ![Create Post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz02pwblgo2c7fvf9jse.png)
> Rich Text Editor
> ![Rich Text Editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uy07irf7dd304ntsz2km.png)
> Single Post View
> ![Single Post View](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ji1fhqupadg1gs93wpw.png)
> Reply Post
> ![Reply Post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwgaent27c3tnf0p0u75.png)
> Settings
> ![Settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcygfafdbcrkwklfnz9z.png)
> Search
> ![Search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5n9old5lw7xtzd3fnvyd.png)
> Dropdown Navigation
>![Dropdown Navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxlu79w2rs3rxq8gy16o.png)

## Tech Stack

- TypeScript
- React
- Next.js
- PostgreSQL
- Supabase
- Redis & Upstash Redis
- Tanstack/react-query
- Prisma
- NextAuth & OAuth2
- Axios
- Zod
- UploadThing
- TailwindCSS
- Shadcn-ui
- BlockNote

SpreadIt's robust technological stack ensures the platform's scalability, reliability, and efficiency:

- **TypeScript:** We leverage TypeScript for its type safety, enabling robust code development and preventing runtime errors.

- **React:** Utilizing React, we create interactive and dynamic user interfaces that enhance the user experience.

- **Next.js:** Next.js powers the server-side rendering capabilities of SpreadIt, optimizing performance and enhancing SEO.

- **PostgreSQL:** PostgreSQL serves as our relational database, providing a powerful and reliable foundation for managing content and user data.

- **Supabase:** Supabase acts as our backend infrastructure, simplifying database management and authentication processes.

- **Redis:** Redis, deployed on Upstash, handles caching and data retrieval, ensuring rapid content delivery and improved user experience.

- **Tanstack/react-query:** react-query enables efficient data fetching and caching, ensuring smooth user interactions.

- **Infinite scroll:** Infinite scroll provides a continuous and seamless user experience, allowing you to browse endless content without page reloads.

- **Optimistic updates:** Optimistic updates deliver real-time feedback to users, keeping them informed of content changes and interactions.

- **Prisma:** Prisma simplifies data access and management, providing an abstraction layer for interacting with the database.

- **NextAuth:** NextAuth handles user authentication, ensuring secure and seamless user logins and registrations.

- **OAuth2:** OAuth2 enables authentication with various social media platforms, providing users with convenient sign-in options.

- **Axios:** Axios facilitates HTTP requests, enabling communication with external APIs.

- **Zod:** Zod provides type validation for API requests and responses, ensuring data integrity.

- **UploadThing:** UploadThing streamlines file uploading, making it easy for users to share multimedia content.

- **TailwindCSS:** TailwindCSS powers our responsive and stylish user interface, enhancing visual appeal and user experience.

- **Shadcn-ui:** Shadcn-ui provides a collection of React components for building modern and accessible user interfaces.

- **BlockNote:** BlockNote enables users to create and edit rich text content, facilitating engaging and informative posts.

## Conclusion

SpreadIt is a testament to modern web technologies, fostering a community-driven news sharing experience. Follow the links below to explore the repositories, contribute, and witness the innovative power of SpreadIt in transforming social news aggregation.

### Repositories & Social Links

- [SpreadIt](https://github.com/RicardoGEsteves/SpreadIt)
- [RicardoGEsteves](https://github.com/RicardoGEsteves)