Welcome to your step-by-step guide to setting up Instaclone, an Instagram clone built using the powerful trio of MongoDB, Express, React, and Socket.io. Whether you want to run it in development mode or deploy it using Docker, this guide has got you covered!

Tech Stack Overview

Before diving into the installation, let’s get acquainted with the technology that powers Instaclone:

• Frontend: React
• State management: Redux
• Routing: React Router
• Form management: Formik
• Animations: React Spring
• Websocket management: Socket.io
• Backend: Express
• Database: MongoDB
• Image hosting: Cloudinary

Installation – Development

Follow these steps to set up the development environment:

Clone the Repository

First, clone the repository to your local machine:

git clone https://github.com/Sandermoen/instaclone

Set Up Dependencies

Install the necessary npm dependencies:

npm install

Navigate to the client folder and install React dependencies:

cd client
npm install

Configuration

Now set up a MongoDB database and create a Cloudinary account. After that, create a .env file in the root directory with the following environment variables:

 
MONGO_URI= mongodb://localhost:27017/instaclone
JWT_SECRET= random string: j2390jf09kjsalkj4r93
CLOUDINARY_API_KEY= Cloudinary API key
CLOUDINARY_API_SECRET= Cloudinary API secret
CLOUDINARY_CLOUD_NAME= Cloudinary cloud name
SMTP_HOST= mail.example.com
SMTP_PORT= 587
EMAIL_USERNAME= example@example.com
EMAIL_PASSWORD= Password
HOME_URL= http://localhost:3000
GITHUB_CLIENT_ID= Client id for GitHub OAuth app
GITHUB_CLIENT_SECRET= Client secret for GitHub OAuth app
MODERATECONTENT_API_KEY= Free API key from https://moderatecontent.com

Launch Application

Finally, run both the backend and frontend with the following command:

npm run dev

Your app should now be live! Have fun exploring.

Installation – Production with Docker

If you prefer to deploy your application with Docker, follow these steps:

Clone the Repository

Again, start by cloning the repository:

git clone https://github.com/Sandermoen/instaclone

Configuration

Set up your Cloudinary account and GitHub OAuth app as mentioned previously. Then create a .env file in the root directory with similar environment variables as shown above, but adjust the MONGO_URI for Docker:

MONGO_URI= mongodb://mongo:27017/instaclone

Start Docker

To start the Docker container, use:

docker-compose up

Docker will manage everything for you, and your project should be accessible on port 9000 unless specified otherwise.

Troubleshooting

If you encounter any issues during the setup, consider the following troubleshooting tips:

• Ensure all dependencies are correctly installed.
• Check that your environmental variables are set correctly in the .env file.
• Verify that your MongoDB service is running or that you are connected to the MongoDB Atlas.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

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.