Building a Fullstack NexLink App with React, NextJS, TailwindCSS & MongoDB

Full Stack MERN Next.js 13 NexLink App | React, Next JS, TypeScript, MongoDB

Technologies

• Next.js 13.4 with Server Side Rendering
• MongoDB handling of complex schemas, multiple data population
• Beautiful layouts with TailwindCSS
• Use Clerk for authentication
• File uploads with UploadThing
• Shadcn components
• Listen to real-time events with webhooks
• Understand middleware, API actions, and authorization
• Explore & integrate new Next.js layout route groups
• Validate data with Zod
• Manage forms with react hook form
• Create reusable components

🔐 Setup .env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY

CLERK_SECRET_KEY

NEXT_PUBLIC_CLERK_SIGN_IN_URL

NEXT_PUBLIC_CLERK_SIGN_UP_URL

NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL

NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL

MONGODB_URL

UPLOADTHING_SECRET

UPLOADTHING_APP_ID

NEXT_CLERK_WEBHOOK_SECRET

Screenshot

🏃 Run Locally

Clone the project

  git clone https://github.com/badiniibrahim/nexlink-app-with-next.js-13.git

Install dependencies This is a Next.js project bootstrapped with create-next-app.

  yarn install

Getting Started

Start the server First, run the development server:

  yarn run dev

This is a Next.js project bootstrapped with create-next-app.

Open http://localhost:3000 with your browser to see the result.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

🚩 Deployment

To deploy this project run

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.