Welcome to your guide on creating a full stack clone of Stackoverflow using modern technologies such as Node.js, React, and MongoDB. This project serves as a hands-on learning experience, allowing you to explore pixel-perfect design and NoSQL databases. Let’s dive into the process of setting it up on your local machine and deploying it live!

Tech Stack

• ReactJs
• NextJs
• Storybook
• PostCSS
• NodeJs
• Express
• MongoDB
• Mongoose

Prerequisites

Before diving into setup, make sure you have the following installed:

• Node.js
• NPM
• MongoDB

How to Run Locally

Here’s a step-by-step guide to getting your clone up and running locally:

bash
# Clone this repository
$ git clone https://github.com/salihozdemir/stackoverflow-clone

# Go into the repository
$ cd stackoverflow-clone

# Go into server
$ cd server

# Start mongodb locally
$ mongod

# Install dependencies
$ npm install

# Start the backend server
$ npm run dev

# On another terminal, go to the client folder
$ cd ..client

# Install dependencies
$ npm install

# Use the command below for Android devices
$ npm run dev

# To see the incomplete storybook components
npm run storybook

Testing the Application

To ensure the server is functioning correctly, run the following commands. Remember, MongoDB must be running before testing:

bash
$ cd server
$ yarn test

Deployment Instructions

Deploying Server App on Heroku

Follow these steps to deploy your server application:

1. Set up a MongoDB Atlas account and database.
2. Ensure that your MongoDB cluster allows connections from anywhere.
3. Create a new app in Heroku.
4. Navigate to your app settings and add the following environment variables:
• DATABASE_URL (your MongoDB connection string)
• JWT_SECRET
5. Add Node.js to buildpacks.
6. Enter the following commands:

bash
    # Go into the repository
    $ cd stackoverflow-clone

    # Heroku Setup
    $ npm install -g heroku
    $ heroku login
    $ heroku git:remote -a your-app-name

    # Push subdirectory repository with subtree
    $ git subtree push --prefix server heroku master
    

Deploying Client App on Vercel

For deploying the client app, follow these steps:

1. Click the button below to prompt Vercel deployment:





2. Select the client directory.
3. Add your Heroku API URL to the SITE_NAME environment.
4. Finally, deploy the client application!

Future Improvements

Here are some features you could consider adding:

• Add missing components to Storybook.
• Complete the missing server tests.
• Incorporate a text editor for posting.

Troubleshooting

If you encounter issues while setting up or deploying your Stackoverflow clone, consider the following tips:

• Ensure that MongoDB is running and accessible on the specified port.
• Double-check environment variable settings, especially your database connection strings.
• Verify that all dependencies are installed correctly.

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

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.