GithubHelp home page GithubHelp logo

philiptranp / stackoverflow-clone Goto Github PK

View Code? Open in Web Editor NEW

This project forked from salihozdemir/stackoverflow-clone

0.0 1.0 0.0 659 KB

This project is a simplified a full stack clone of Stackoverflow.

Home Page: https://clone-of-stackoverflow.vercel.app

License: MIT License

JavaScript 81.11% CSS 18.89%

stackoverflow-clone's Introduction

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.

stackoverflow-clone's People

Contributors

salihozdemir avatar dejvid98 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.