https://github.com/ajay2002bb/techtalk-hub
A MERN stack project for tech discussions and community engagement. Fullstack TechTalk-Hub(Stack Overflow clone) (QnA site) made with MERN + GraphQL
https://github.com/ajay2002bb/techtalk-hub
express full-stack graphql mern mongodb node react
Last synced: about 1 month ago
JSON representation
A MERN stack project for tech discussions and community engagement. Fullstack TechTalk-Hub(Stack Overflow clone) (QnA site) made with MERN + GraphQL
- Host: GitHub
- URL: https://github.com/ajay2002bb/techtalk-hub
- Owner: Ajay2002bb
- Created: 2025-04-11T07:49:28.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-04-11T08:06:28.000Z (about 1 month ago)
- Last Synced: 2025-04-11T09:54:27.170Z (about 1 month ago)
- Topics: express, full-stack, graphql, mern, mongodb, node, react
- Language: JavaScript
- Homepage:
- Size: 2.49 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TechTalk-Hub | SOF Clone | MERN-GraphQL
Fullstack [Stack Overflow](https://stackoverflow.com/) clone (QnA site) made with MERN + GraphQL
## Built using
#### Front-end
- [ReactJS](https://reactjs.org/) - Frontend framework
- [Apollo Client](https://www.apollographql.com/docs/react/) - State management library to manage both local and remote data with GraphQL
- [Context API w/ hooks](https://reactjs.org/docs/context.html) - For state of user, toast notifs, theme etc.
- [React Router](https://reactrouter.com/) - For general routing & navigation
- [React Hook Form](https://react-hook-form.com/) - For flexible forms
- [Material-UI w/ lots of CSS customisations](https://material-ui.com/) - UI library
- [Yup](https://github.com/jquense/yup) - For form validation
- [date-fns](https://date-fns.org/) - For manipulating & formatting of dates
#### Back-end
- [Node.js](https://nodejs.org/en/) - Runtime environment for JS
- [Apollo Server](https://www.apollographql.com/docs/apollo-server/) - To build a self-documenting GraphQL API server
- [MongoDB](https://www.mongodb.com/) - Database to store document-based data
- [Mongoose](https://mongoosejs.com/) - MongoDB object modeling for Node.js
- [JSON Web Token](https://jwt.io/) - A standard to secure/authenticate HTTP requests
- [Bcrypt.js](https://www.npmjs.com/package/bcryptjs) - For hashing passwords
- [Mongoose Unique Validator](https://www.npmjs.com/package/mongoose-unique-validator) - Plugin for better error handling of unique fields within Mongoose schema
- [Dotenv](https://www.npmjs.com/package/dotenv) - To load environment variables from a .env file
## Features
- Authentication (login/register with username-password)
- CRUD questions, answers & comments
- Upvote/downvote questions & answers
- Tags for organising questions
- Page views - A view is registered whenever the question page is opened
- Pages for added tags, registered users & more
- Sorting of questions on basis of hot, votes, views, newest & oldest
- Search questions over the server on basis of question title & body
- Pagination of posts in the form of "Load More" button
- Error management to prevent app crashes
- Toast notifications for actions: adding questions, deleting comments etc.
- Loading spinners for relevant fetching processes
- Formatted dates for adding/updating questions/answers/comments
- Dark mode toggle w/ local storage save
- Proper responsive UI for all screens
## Usage
#### Env variable:
Create a .env file in server directory and add the following:
```
MONGODB_URI = "Your Mongo URI"
PORT = 4000
SECRET = "Your JWT secret"
```
#### Client:
Open client/src/backendUrl.js & change "backend" variable to `"http://localhost:4000"`
```
cd client
npm install
npm start
```
#### Server:
Note: Make sure that you have installed 'nodemon' as global package.
```
cd server
npm install
npm run dev
```