An open API service indexing awesome lists of open source software.

https://github.com/manishrwt15/threads_app

A modern, full-featured social media web application that replicates the core functionalities of thread-based platforms like Threads by Meta or Reddit.
https://github.com/manishrwt15/threads_app

axios clerk mongodb nextjs react shadcn-ui typescript vercel

Last synced: 2 months ago
JSON representation

A modern, full-featured social media web application that replicates the core functionalities of thread-based platforms like Threads by Meta or Reddit.

Awesome Lists containing this project

README

          

# Threads App – A Social Media Platform

A modern, full-featured social media web application that replicates the core functionalities of thread-based platforms like Threads by Meta or Reddit.

---

## Live Demo

[Click here to visit the deployed site](https://threads-app-six-mauve.vercel.app/)

---

## Features

- Create and participate in threaded discussions
- User authentication and authorization with Clerk
- Real-time commenting system
- User profiles with activity tracking
- Follow/unfollow users
- Join and interact in communities
- Search functionality for users, threads, and communities
- Personalized activity dashboard
- Fully responsive UI with modern design
- Deployed seamlessly on Vercel

---

## Technologies Used

| Technology | Purpose |
|----------------|-------------------------------------------------|
| **Next.js** | Frontend framework with server-side rendering |
| **TypeScript** | Type-safe JavaScript for scalable code |
| **Tailwind CSS** | Utility-first CSS framework |
| **ShadCN UI** | Pre-built React UI components |
| **MongoDB** | NoSQL database for storing application data |
| **Clerk** | Authentication and Authorization provider |
| **Vercel** | Hosting and deployment platform |
| **React** | Component-based UI library |
| **Axios** | Handling HTTP requests |

---

## Setup & Installation

```bash
git clone https://github.com/your-username/threads-app.git
cd threads-app
npm install
```
---

## Environment Variables

- Create a .env file in the root directory and add the following:
- CLERK_PUBLISHABLE_KEY=your_key
- CLERK_SECRET_KEY=your_key
- MONGODB_URI=your_mongodb_uri
- NEXT_PUBLIC_CLERK_FRONTEND_API=your_key
- NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_key

---

## Start the Development Server

``` bash
npm run dev
```

---

## Challenges Faced

- Integrating Clerk seamlessly with Next.js routing

- Ensuring responsiveness across various screen sizes

- Handling relational data using MongoDB's flexible schema

- Managing state consistency in a multi-user environment

- Implementing secure and scalable backend APIs

---

## References

- [Next.js Documentation](https://nextjs.org/docs) – Framework for building full-stack React applications.
- [MongoDB Documentation](https://www.mongodb.com/docs/) – NoSQL database used for storing application data.
- [Clerk.dev Authentication](https://clerk.dev/docs) – Authentication and user management platform.
- [Tailwind CSS](https://tailwindcss.com/docs) – Utility-first CSS framework for styling the UI.
- [ShadCN UI](https://ui.shadcn.dev/docs) – Collection of accessible components built using Radix UI and Tailwind.
- [Vercel Deployment](https://vercel.com/docs) – Cloud platform for frontend deployment and serverless functions.
- [TypeScript Handbook](https://www.typescriptlang.org/docs/) – Official documentation for the TypeScript language.
- [Axios GitHub Repository](https://github.com/axios/axios) – Promise-based HTTP client for making API requests.

---

## Author

**Manish Rawat**
Email: manishrwat15@gmail.com
Portfolio: [https://github.com/Manishrwt15](https://github.com/Manishrwt15)
Location: Kaladhungi, Nainital, India
Master of Computer Applications (MCA), Batch 2023–2025

---