In the digital age, social media plays a pivotal role in connecting people. With PostIt, a fully-featured social media web application built on the MERN stack, you can create, share, and engage within a vibrant online community. This article will guide you through the installation and usage of PostIt, ensuring you get it up and running seamlessly.
Features of PostIt
- Create, read, update, and delete posts
- Like and unlike posts
- Create, reply to, read, update, and delete nested comments
- Markdown support for posts and comments
- Sign up and login using JWT for authentication
- Real-time private messaging using socket.io
- View profiles and browse through users’ posts, liked posts, and comments
- Enjoy infinite scrolling
- Sort posts by different attributes such as like count and date created
- Profanity filtering and cooldowns for posting and commenting
- Update your bio visible to others
- Search for posts by their title
- View users who liked a post
- Fully responsive layout
Installation and Usage
Follow these simple steps to get PostIt up and running on your machine:
- Clone the repository:
git clone https://github.com/ihtasham42/social-media-app.git - Install dependencies:
cd social-media-app npm install cd client npm install - Create a .env file in the root directory:
cd .. touch .env - Configure your environment variables in the .env file. You will need to acquire your MONGO_URI by creating a free cluster at MongoDB. The TOKEN_KEY is a secret key of your choosing, which you can generate at RandomKeyGen.
MONGO_URI=YOUR_MONGO_URI TOKEN_KEY=YOUR_TOKEN_KEY PORT=4000 - Run the main server:
npm run server - Open a new terminal and start the React development server:
cd social-media-app cd client npm start
Understanding the Code Setup
Let’s say our code is like building a house. First, you need the foundation (the server) to support everything else. Then comes the walls (the React client), where you’ll hang your pictures (the features) and make it uniquely yours. Just like a well-constructed house needs careful arrangements—ensuring the plumbing (database connection) and electrical systems (JWT for authentication) are in place—your code needs to be arranged correctly for it to function optimally.
Troubleshooting Tips
If you encounter issues while setting up or using PostIt, here are some troubleshooting ideas:
- Ensure all environment variables in your .env file are correctly set without any missing components.
- Double-check if the server is running before trying to start the client.
- If you have database connectivity issues, make sure your MONGO_URI is accurate and that the database is up and running.
- For real-time messaging problems, ensure that socket.io is properly implemented and running.
- For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.
Visuals of PostIt
Take a look at these screenshots of PostIt in action!
Explore View
Post View
Nested Comments
Profile View
Real-Time Private Messenger
Search View
Conclusion
PostIt is a remarkable project that showcases the power of the MERN stack in creating engaging social media platforms. With its diverse features and functionality, you can tailor it to suit your needs and preferences. At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.