WeaveTalk is a community platform designed to foster connections and discussions among users across topics and interests. Inspired by popular social media dynamics, WeaveTalk integrates MERN stack technologies to deliver a engaging user experience. This is a Next.js project bootstrapped with create-next-app.
Dynamic Threads: Create and engage with threads that capture diverse discussions. Real-Time Interactions: Responses and updates to keep the conversation flowing. Community Building: Join or create communities to gather individuals with shared interests. Find Users and Communities: Recommend popular users and communities.
Frontend - primarily deal with the user interface and client-side interactions:
- Next.js
- React Hook Form
- TypeScript
- TailwindCSS
- Shadcn UI
- Zod, for form validation
Backend - used for server-side computing, user authentication, data management, and backend services:
- MongoDB
- Clerk, for authentication and user management
- Webhooks, used for sending real-time updates to applications.
- Serverless APIs
- Uploadthing, for user image upload.
Prerequisites
Make sure you have the following installed on your machine:
- Git
- Node.js
- npm (Node Package Manager)
First, clone the git repository in a directory of your choosing:
https://github.com/Symorglass/WeaveTalk-App.git
Change the directory into the cloned repository:
cd WeaveTalk-App
Then, install all the dependencies that are necessary for this project from package.json
npm install
Create a new file named .env in the root of your project and add the following content:
This project uses Clerk to provide backend services on authentication and user management. For data management, this project uses a MongoDB NoSQL database to store application data. This project also uses Uploadthing to handle user image upload.
Replace the placeholder values with your actual credentials obtained from MongoDB, Clerk, and Uploadthing.
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
NEXT_CLERK_WEBHOOK_SECRET=
MONGODB_URL=
UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=
Also, setup Clerk authentication route in the .env as follows.
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/onboarding
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
npm run dev
Open http://localhost:3000 with your browser to see the web application.
To deploy this web application, use the Vercel Platform.
- Optimize Next.js server-side rendering performance by improving serverless functions to offload tasks from the application server.
- Utilize MongoDB’s replication and sharding features to distribute data across multiple servers, enhancing both data availability and load distribution.
- Enhance the indexing strategy for more efficient data retrieval methods to reduce latency.
- Employ caching at both the server and client levels to reduce database reads and API calls. In-memory data stores like Redis could be used for session management and data fetching operations.
shadcn/ui
- Installation and start shadcn/ui.
- Building form components with React Hook Form and Zod.
- Zod for form validation.
I built this project referring to the amazing lesson provided by @adrianhajdin. Thank you so much for offering the full stack MERN Next.js course for completely free.