Introduction

Are you looking to create your own social platform similar to DEV.to? Look no further! This blog will guide you through setting up a DEV.to Clone built using MongoDB, Express, React, Node, and Socket.io. Not only will you get to explore how to set it up locally, but you will also discover the numerous features it offers.

Live Site and APIs

• Live Site
• Backend API

Technology Stack

• UI: React
• Routing: React Router
• Real-time Notifications: Socket.io
• Backend: Express
• Database: MongoDB
• ORM: Mongoose
• Image Hosting: Cloudinary

Features

• Login / Signup
• OAuth via Google, Facebook, Twitter, GitHub
• Create, Remove, Update, Delete Post
• Like, Unicorn, Bookmark Post
• Reading List
• Create and Add Tags to Post
• Follow Tags
• Find Posts by Tags
• Comments & Replies
• Like Comment
• Edit / Delete Comment
• View Profile
• Edit Profile
• Follow User
• Search Posts
• Real-time Notifications
• Skeleton Loading

How to Set Up Locally

Follow these easy steps to get your DEV.to Clone running on your local machine.

1. Clone the repository

Clone the repo to your local machine by using:

git clone https://github.com/eknoorpreet/dev.to-clone

2. Setup

Install npm dependencies in both client and server subdirectories:

cd server
npm install
cd client
npm install

3. Configure Environment

Set up a MongoDB database either locally or online via MongoDB Atlas. Create a Cloudinary account and set up a new project on Google Cloud Platform. Create a `.env` file in both client and server subdirectories and set up the following environment variables:

In client/.env:

REACT_APP_BASE_URL=http://localhost:5000/api
REACT_APP_SOCKET_IO_URL=http://localhost:5000
REACT_APP_GOOGLE_CLIENT_ID=GOOGLE_CLIENT_ID
REACT_APP_GITHUB_CLIENT_ID=GITHUB_CLIENT_ID
REACT_APP_FB_APP_ID=FACEBOOK_CLIENT_ID

In server/.env:

DB_USER=user_name_for_db
DB_PASSWORD=password_for_db
DB_NAME=name_for_db
JWT_KEY=random_string
COOKIE_KEY=random_string
NODE_ENV=development
CLIENT_URL=http://localhost:3000
CLOUDINARY_CLOUD_NAME=cloud_name
CLOUDINARY_API_KEY=api_key
CLOUDINARY_API_SECRET=api_secret
GOOGLE_API_KEY=google_api_key
GH_CLIENT_ID=github_client_id
GH_CLIENT_SECRET=github_client_secret
TWITTER_CONSUMER_KEY=twitter_consumer_key
TWITTER_CONSUMER_SECRET=twitter_consumer_secret

4. Finally, run the application

In both the client and server subdirectories, run the following command:

npm start

Screenshots

Here are some glimpses of the app’s user interface:

• Login/Signup: 
• Like / Unicorn / Bookmark: 
• New Post: 
• Comments and Replies: 
• Real-time Notifications: 
• Follow Tags: 
• Edit Profile: 
• Search: 

Troubleshooting

If you encounter issues while setting up or running the project, here are some troubleshooting tips:

• Ensure all environment variables are correctly set up.
• Check that your MongoDB service is running and accessible.
• Reinstall npm packages in both the client and server directories if any package errors occur.
• Confirm that your ports (3000 and 5000) are not blocked or in use by other applications.
• If real-time notifications do not work, ensure Socket.io is properly configured.

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.