Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prashantrahul141/plex
A Social Media Web App.
https://github.com/prashantrahul141/plex
create-t3-app framer-motion next-auth nextjs prisma react tailwindcss trpc typescript
Last synced: about 1 month ago
JSON representation
A Social Media Web App.
- Host: GitHub
- URL: https://github.com/prashantrahul141/plex
- Owner: prashantrahul141
- License: mit
- Created: 2023-02-01T07:00:05.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-12T22:31:21.000Z (6 months ago)
- Last Synced: 2024-07-13T00:02:21.783Z (6 months ago)
- Topics: create-t3-app, framer-motion, next-auth, nextjs, prisma, react, tailwindcss, trpc, typescript
- Language: TypeScript
- Homepage:
- Size: 18.8 MB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Plex
Plex is a fully featured social media application for getting together with people.
### Table of contents
- [Installation & Setup](#️-installation--set-up)
- [Screenshots](#️-screenshots)
- [Technologies used](#-technologies-used)
### 🛠️ Installation & Set Up
1. Clone the repo
```sh
git clone https://github.com/prashantrahul141/plex.git
```
2. Add env file using these vars:
```sh
# Prisma
DATABASE_URL=mysql db url
# Next Auth
# You can generate the secret via https://generate-secret.vercel.app/32
NEXTAUTH_SECRET=
NEXTAUTH_URL=http://localhost:3000
# Next Auth Discord Provider
DISCORD_CLIENT_ID=
DISCORD_CLIENT_SECRET=
# Github
G_GITHUB_CLIENT_ID=
G_GITHUB_CLIENT_SECRET=
# Google
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
# Cloudinary
NEXT_PUBLIC_CLOUDINARY_CLOUDNAME=
NEXT_PUBLIC_CLOUDINARY_CLOUDAPIKEY=
NEXT_PUBLIC_CLOUDINARY_ENDPOINT=https://api.cloudinary.com/v1_1
CLOUDINARY_CLOUDAPISECRET=
```
You can see these docs to learn how to create OAuth app for Github, Google, Discord.
3. Install packages
```sh
npm i
```
### 🖼️ Screenshots
Home
Trending
Notifications
Bookmarks
Profile
Create posts, upload images
Edit profile
Fully responsive
### 💻 Technologies used
- [Next.js](https://nextjs.org)
- [tRPC](https://trpc.io)
- [Tailwind CSS](https://tailwindcss.com)
- [TypeScript](https://typescriptlang.org)
- [Prisma (with MySQL)](https://prisma.io)
- [NextAuth.js](https://next-auth.js.org)
- [Cloudinary](https://cloudinary.com/)
- [framer-motion](https://www.framer.com/motion/)