Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devsrijit/poetic-echoes
Poetic Echoes: A Next.js-powered social media platform for poetry enthusiasts.Engage in threaded discussions, explore communities, and showcase your poetic prowess.Built with Clerk for authentication and a modular structure for easy customization.
https://github.com/devsrijit/poetic-echoes
Last synced: 3 days ago
JSON representation
Poetic Echoes: A Next.js-powered social media platform for poetry enthusiasts.Engage in threaded discussions, explore communities, and showcase your poetic prowess.Built with Clerk for authentication and a modular structure for easy customization.
- Host: GitHub
- URL: https://github.com/devsrijit/poetic-echoes
- Owner: DevSrijit
- Created: 2024-01-11T09:49:51.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-02-02T19:39:14.000Z (10 months ago)
- Last Synced: 2024-02-02T20:39:13.351Z (10 months ago)
- Language: TypeScript
- Homepage: https://poetic-echoes.vercel.app
- Size: 228 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Poetic Echoes
Poetic Echoes is a social media platform designed for discovering and sharing poetry. It provides a space for poets and poetry enthusiasts to connect, engage, and explore the world of poetry. This README.md file provides an overview of the project structure, features, and credits.
## Table of Contents
- [Features](#features)
- [Project Structure](#project-structure)
- [Credits](#credits)
## Features
- **User Authentication**: Poetic Echoes uses [Clerk](https://clerk.dev/) for user authentication, providing a secure and seamless login experience.
- **Threaded Discussions**: Users can create and participate in threaded discussions, allowing for in-depth conversations and replies.
- **Search Functionality**: The search feature allows users to find specific posts or threads based on keywords or tags.
- **Profile Pages**: Each user has a profile page where they can showcase their posts and engage with other users.
- **Activity Feed**: The activity feed provides users with updates on recent posts, comments, and interactions.
- **Responsive Design**: The site is fully responsive, ensuring a seamless experience across different devices and screen sizes.
## ⚙️ Tech Stack
- Next.js
- MongoDB
- Shadcn UI
- TailwindCSS
- Clerk
- Webhooks
- Serverless APIs
- React Hook Form
- Zod
- TypeScript
## 🔋 Features
👉 **Authentication**: Authentication using Clerk for email, password, and social logins (Google and GitHub) with a comprehensive profile management system.
👉 **Visually Appealing Home Page**: A visually appealing home page showcasing the latest threads for an engaging user experience.
👉 **Create Posts Page**: A dedicated page for users to create posts, fostering community engagement
👉 **Commenting Feature**: A commenting feature to facilitate discussions within posts.
👉 **Nested Commenting**: Commenting system with nested posts, providing a structured conversation flow.
👉 **User Search with Pagination**: A user search feature with pagination for easy exploration and discovery of other users.
👉 **Activity Page**: Display notifications on the activity page when someone comments on a user's thread, enhancing user engagement.
👉 **Profile Page**: User profile pages for showcasing information and enabling modification of profile settings.
👉 **Blazing-Fast Performance**: Optimal performance and instantaneous page switching for a seamless user experience.
👉 **Server Side Rendering**: Utilize Next.js with Server Side Rendering for enhanced performance and SEO benefits.
👉 **MongoDB with Complex Schemas**: Handle complex schemas and multiple data populations using MongoDB.
👉 **File Uploads with UploadThing**: File uploads using UploadThing for a seamless media sharing experience.
👉 **Real-Time Events Listening**: Real-time events listening with webhooks to keep users updated.
👉 **Middleware, API Actions, and Authorization**: Utilize middleware, API actions, and authorization for robust application security.
👉 **Next.js Layout Route Groups**: New Next.js layout route groups for efficient routing
👉 **Data Validation with Zod**: Data integrity with data validation using Zod
👉 **Form Management with React Hook Form**: Efficient management of forms with React Hook Form for a streamlined user input experience.
and many more, including code architecture and reusability improvements.
## Project Structure
The project follows a modular structure, with different components and pages organized into separate files. Here is an overview of the main files and directories:
- `components`: Contains reusable components used throughout the site, such as `ThreadCard`, `Bottombar`, `Topbar`, etc.
- `app/(root)`: Contains the main pages of the application, including the home page, profile page, and thread page.
- `constants`: Contains constants used throughout the application, such as sidebar links and profile tabs.
- `layout.tsx`: Defines the layout of the site, including the top bar, sidebars, and bottom bar.
- `globals.css`: Contains global CSS styles used throughout the site.
## 🤸 Quick Start
Follow these steps to set up the project locally on your machine.
**Prerequisites**
Make sure you have the following installed on your machine:
- [Git](https://git-scm.com/)
- [Node.js](https://nodejs.org/en)
- [npm](https://www.npmjs.com/) (Node Package Manager)
**Cloning the Repository**
```bash
git clone https://github.com/devsrijit/poetic-echoes.git
cd threads
```
**Installation**
Install the project dependencies using npm:
```bash
npm install
```
**Set Up Environment Variables**
Create a new file named `.env` in the root of your project and add the following content:
```env
MONGODB_URL=
CLERK_SECRET_KEY=
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=
NEXT_CLERK_WEBHOOK_SECRET=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
```
Replace the placeholder values with your actual credentials. You can obtain these credentials by signing up for the corresponding websites on [MongoDB](https://www.mongodb.com/), [Clerk](https://clerk.com/), and [Uploadthing](https://uploadthing.com/).
**Running the Project**
```bash
npm run dev
```
Open [http://localhost:3000](http://localhost:3000) in your browser to view the project.