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: 12 days 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 year ago)
- Default Branch: main
- Last Pushed: 2025-04-11T08:06:28.000Z (about 1 year ago)
- Last Synced: 2025-04-11T09:54:27.170Z (about 1 year 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 and register with a username and password using JWT-based authentication.
- **CRUD Operations**: Users can create, read, update, and delete questions, answers, and comments.
- **Upvote/Downvote**: Ability to upvote or downvote both questions and answers to manage content quality.
- **Tagging**: Organize questions using tags for better categorization and navigation.
- **Page Views**: Each question page registers a page view when opened, helping track content engagement.
- **Sorting**: Sort questions based on:
- Hot (most upvoted and active questions)
- Votes (questions with the most votes)
- Views (questions with the most views)
- Newest (most recently asked questions)
- Oldest (questions listed by creation date)
- **Search Functionality**: Search questions over the server based on question title and body text.
- **Pagination**: Questions are paginated with a "Load More" button to load more posts dynamically.
- **Error Handling**: Graceful error management to prevent app crashes and provide helpful feedback.
- **Toast Notifications**: Real-time toast notifications for actions like adding questions, deleting comments, etc.
- **Loading Spinners**: Visible spinners during data fetching processes for better user experience.
- **Formatted Dates**: Display questions, answers, and comments with human-readable formatted dates (e.g., "2 hours ago").
- **Dark Mode**: Toggle dark mode with settings saved in local storage for persistent user preferences.
- **Responsive UI**: A fully responsive design ensuring smooth usability across all screen sizes.
- **Leaderboard**: A leaderboard section showcasing top users based on their activity and reputation.
## Sample
.png)
## 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
```