Awesome Open Source
Awesome Open Source

Stackoverflow Clone

This project is a simplified a full stack clone of Stackoverflow. I wrote it to learn more about Nodejs, React/Next, pixel perfect design and NoSQL databases in general. Feel free to contribute!

🚀 Tech Stack

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

⚠️ Prerequisite

  • node
  • npm
  • mongodb

💿 How to run local

# 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

Make sure mongodb is running before testing the server.

$ cd server
$ yarn test

There are missing tests on the server side and there are no tests on the client side yet.

🌐 Deploy

Deploying Server App on Heroku

  • You will need to have setup a MongoDB Atlas account and database.

  • Make sure that the cluster has allowlisted connections from anywhere.

  • Create a Heroku new app.

  • Go to app settings

  • Add the following enviroments.

    • DATABASE_URL (to use your MongoDB connection string)
    • JWT_SECRET
  • Add Nodejs to buildpacks

  •   # 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

  • Deploy with Vercel

  • Select client directory

  • Add heroku api url to SITE_NAME enviorement

  • Finally deploy client application

📜 Todo

  • [ ] Add missing components to storybook
  • [ ] Complete missing server tests
  • [ ] Add text editor for post

📝 License

This project is made available under the MIT License.



Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,059,387
Reactjs (162,343
Express (30,219
Mongodb (29,765
Heroku (19,117
Stack (16,095
Nextjs (10,902
Clone (6,892
Postcss (3,382
Storybook (3,097
Stackoverflow (1,820
Context Api (564
Moongose (39