Live Demo: BuzzBox on Vercel

BuzzBox is a social media web application inspired by platforms like Twitter and Reddit. Built with Next.js and React.js, BuzzBox offers a full range of CRUD functionalities as well as additional features such as real-time changes, post sharing, and user authentication. Read below to learn more about its features and the technologies used.

• Live Demo
• Features
• Technologies
• Installation
• Usage

Check out the live demo of the application here: BuzzBox on Vercel.

• User Authentication: Users can authenticate via trusted providers like Google, GitHub, Reddit, and Discord.
• CRUD Functionality: Users can create, read, update, and delete posts and spaces.
• Real-time Interaction: Real-time upvotes, downvotes, comments, and post sharing.
• Intuitive UI: The application is styled with TailwindCSS for better performance and user experience.

• Next.js: For server-side rendering and page routing.
• React.js: For building the UI components.
• Supabase: For real-time PostgreSQL database changes.
• Stepzen: To convert PostgreSQL to GraphQL for queries and mutations.
• Apollo Client: To interact with the database through the frontend.
• react-share: To enable share functionality for each post.
• next-auth: For authenticating users.
• Dicebear: To generate profile pictures and space images.
• Heroicons: To provide SVG icons.
• TailwindCSS: For styling.
• Vercel: For hosting and custom domain setup.

To run this project locally, follow these steps:

1. Clone the repository:

git clone https://github.com/your-username/BuzzBox.git

2. Install dependencies:

cd BuzzBox
npm install

3. Set up environment variables:

# .env file
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_KEY=your_supabase_key

4. Run the development server:

npm run dev

Open http://localhost:3000 with your web browser to see the application.