POST IT

A simple rip-off of social media apps like Twitter, Facebook, Instagram, etc. This is a project to learn the basics of Next.JS, React, TailwindCSS & Drizzle ORM.

!! ⚠ Warning !!

PLEASE DO NOT ENTER YOUR REAL PASSWORDS IN THE APP. Even though the passwords are hashed, it is not safe to enter your real passwords. This project is just for learning purposes and should not be used in production.
WE DO NOT REGULATE THE CONTENT POSTED BY THE USERS REGULARLY. We are not responsible for any content posted by the users. If you find any inappropriate content, please report it to us.
WE DO NOT STORE ANY PERSONAL DATA. We only store the username and your password as a hashed string. We do not store any other personal data.
WE DO NOT SELL YOUR DATA TO ANY THIRD-PARTY. We do not sell your data to any third-party. We only use your data to provide you with the services.

Tech Stack

Next.JS - React Framework to build SSR React Apps with ease.
React - A JavaScript library for building user interfaces.
TailwindCSS - A utility-first CSS framework for rapidly building custom designs.
Drizzle ORM - A simple ORM for interacting with the SQL databases.
Supabase PostgreSQL - A simple PostgreSQL database with a REST API.
Vercel - A cloud platform for static sites and Serverless Functions.
ShadCN UI - A collection of UI components for React.
jose - A JavaScript implementation of the JSON Object Signing and Encryption (JOSE) for JWTs.
tRPC - A TypeScript RPC framework for building reliable HTTP APIs with ease, on top of Next.JS.
TanStack Query - A React Hooks for fetching, caching and updating asynchronous data in React.
React Hook Form - Performant, flexible and extensible forms with easy-to-use validation.
UploadThing - A simple file upload API for your projects.

Features

Post
- Create a post, similar to Twitter.
- Add images to your post.
- Maximize 2 images per post.
- Auto-detects links in the post and converts them to clickable links.
- Auto-embeds YouTube videos in the post.
- Auto-embeds links to images in the post.
View Post
- View a post with all the details.
- View the images in the post.
- View the YouTube video in the post.
- View the links in the post.
- Infinite scrolling to view more posts.
Authentication
- Authentication with username and password.
- JWT based authentication.
- Auto-login with the JWT token.
- Logout from the app.
- Register a new account.
- Single session login.

Installation

The repo uses bun as the package manager. You can use npm or yarn if you want. But I recommend using bun as it is faster and more secure.

# Clone the repo
git clone https://github.com/itsdrvgo/post-it

# Install the dependencies
bun i

# Fill the environment variables
# You can find the list of environment variables in .env.example file
# Get your own API keys from https://uploadthing.com/ and https://supabase.com/
cp .env.example .env

# To know more about generating the access token and refresh token, visit https://github.com/itsdrvgo/nextjs-jwt-auth-example

# Run the development server
bun run dev

The app should be up and running on localhost.

# Build the app for production
bun run build

# Run the app in production mode
bun run start

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Feel free to add more features to the app. I could've added likes, comments, etc. but I wanted to keep it simple.

I didn't have much time to work on this project as we are already working on a similar project, and this was just a rip-off of that project. Thank you!

Read the CONTRIBUTING.md file for more information.

License

This project is licensed under the MIT License.

Feedback

Feel free to send me feedback on X or file an issue. Feature requests are always welcome. If you wish to contribute, please take a quick look at the CONTRIBUTING.md file.

itsdrvgo/post-it