NextJS 13 Social Tip sharing app

Social media web application, that allows users to share their thoughts (tips), with their friends and family. Built with TypeScript using Next.js 13 with Server Side Rendering. It uses MongoDB as a database, and Clerk as an authentication provider. It also uses UploadThing to upload images to the cloud. The application is styled with Tailwind CSS and Shadcn components.

View Demo

Folder Structure

app

(auth)/ - (root)/ - (api)/

components

atoms/ - cards/ - forms/ - shared/ - ui/

The components directory contains all the components used in the application. The components are grouped into atoms, cards, forms, shared and ui. the ui folder generated by shadcn/ui package and contains all the required shadcn components that used in the application.

constants

index.js

This is a JavaScript code contains all the constants used in the application, specifically the Sidebar Navigation (sidebarLinks), Profile Tabs (profileTabs) and Community Tabs (communityTabs) constants.

lib

actions/ - models/ - validations/ - mongoose.ts - uploadthing.ts - utils.ts

lib

• actions: Manage actions using Mongoose for database interaction.\
• models: Define mongoose schemas.\
• validations: Provide validation schemas with Zod.\
• mongoose.ts: Establishes and manages MongoDB connections for the application.\
• uploadthing.ts: Offers a React utility for simplified file uploads to UploadThing.\
• utils.ts: Contains various reusable utility functions.

public

assets/ - next.svg - vercel.svg

Public directory contains the media used in the application. The assets folder contains all the images used in the application.

(back to top)

Technologies Used

The app is built using the following technologies:

• TypeScript: TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
• Next.js: Next.js is a React framework for building server-side rendered and statically generated web applications.
• Tailwind CSS: Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.
• Shadcn: Shadcn is a collection of Tailwind CSS components.
• Clerk: Clerk is a developer-first authentication API that handles all the logic for user sign up, sign in, and more.
• UploadThing: UploadThing is a simple, fast, and reliable file uploader for your website.
• MongoDB: MongoDB is a general purpose, document-based, distributed database built for modern application developers and for the cloud era.
• Mongoose: Mongoose is a MongoDB object modeling tool designed to work in an asynchronous environment.
• Zod: Zod is a TypeScript-first schema declaration and validation library.
• svix: Svix is a webhook proxy that allows you to receive webhooks locally.
• Vercel: Vercel is a cloud platform for frontend developers, providing the frameworks, workflows, and infrastructure to build a faster, more personalized Web.

(back to top)

Features

the web application comes with the following features:

• CRUD Tips
• CRUD Communities
• CRU Profiles
• Like Tips
• Multi-level Comment Tips
• Follow Profiles
• Search Profiles and Communities
• Activity Feed (Likes, Comments, Follows)
• Explore Feed (Tips of Followed Profiles)
• Profile Tabs (Tips, Followers, Following)
• Community Tabs (Tips, Members, Requests)
• Suggested Communities and Profiles
• Likes Page (Profiles that liked a post)

and much more...

In terms of technical features, the web application comes with the following features:

• TypeScripted Codebase with Next.js
• Authentication with Clerk
• User Management with Clerk
• Organization Management with Clerk
• File Upload with UploadThing
• Server Side Rendering with Next.js
• MongoDB Database
• Mongoose ODM
• Zod Validation
• Shadcn Components
• Tailwind CSS
• Svix Webhook Proxy
• Vercel Deployment

and much more..

(back to top)

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<CLERK_PUBLISHABLE_KEY>
CLERK_SECRET_KEY=<CLERK_SECRET_KEY>
NEXT_CLERK_WEBHOOK_SECRET=<CLERK_WEBHOOK_SECRET>

NEXT_PUBLIC_CLERK_SIGN_IN_URL=<CLERK_SIGN_IN_URL>
NEXT_PUBLIC_CLERK_SIGN_UP_URL=<CLERK_SIGN_UP_URL>
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=<CLERK_AFTER_SIGN_IN_URL>
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=<CLERK_AFTER_SIGN_UP_URL>

MONGODB_URL=<MONGODB_URL>
UPLOADTHING_SECRET=<UPLOADTHING_SECRET>
UPLOADTHING_APP_ID=<UPLOADTHING_APP_ID>

(back to top)

🧰 Getting Started

Installation and Run Locally

Step 1:

Download or clone this repo

Step 2:

make sure that Node.js is installed by execute the following command in consle

  node -v

Step 3:

Go to root folder and execute the following command in console to get nodemon the required packages:

npm install

Step 4:

Go to root folder and execute the following command in console to start the application locally:

npm run dev

(back to top)