$\Huge\textbf{\color{#2196F3}TECHSAGE}$

$${\color{lightblue}Create, \space \color{#5EEAD4}manage \space \color{#FBF3D4}and \space \color{#D4D4FF}publish \space \color{#5EEAD4}scholarly \space \color{lightblue}blogs \space \color{#FBF3D4}with \space \color{#D4D4FF}real-time \space \color{#FBF3D4}interactions}$$

An academic blogging platform specially made for academics & researchers, which supports Markdown, LaTeX and collaborative writing—perfect for sharing papers, tutorials, academic journals and insights.

$\large\text{\color{#76DCF1}{Layer}}$	$\large\text{\color{#FD8FAB}{Technology}}$	$\large\text{\color{#52CCF6}{Version}}$
Frontend Library	Vite+React.js	18.2.0
Backend Framework	Django	5.2.1
Database	MongoDB	8.0.9
Real-Time	Redis	5.0.14.1
Tools & Languages	Python	3.13.1

$\large\textbf{\color{#2196F3}{User Roles}}$

$\large\text{\color{#76DCF1}{Role}}$	$\large\text{\color{#FD8FAB}{Description}}$
User	Can write, co-author, comment, upvote, and view academic profiles
Moderator	Reviews content, flags issues, and manages roles
Admin	Manages the entire platform, validates badges and user governance

$\large\textbf{\color{#2196F3}{Features}}$

$\large\textbf{\color{#98FB98}{Collaborative Writing}}$

• Co-author academic blogs.
• Seamless online drafting and synchronized edits
• Track edits per author with version history and contribution logs

$\large\textbf{\color{#AFF4E1}{Academic-Focused Editor}}$

• Supports LaTeX, Markdown, code blocks, and diagrams in a unified editor
• Designed specifically for academic content creators and researchers

$\large\textbf{\color{#919DF3}{Serialized and Topic-wise Blogging}}$

• Organize academic writing by topics or serialized series
• Easy navigation and categorization for readers

$\large\textbf{\color{#00F8FF}{Academic Profiles and Recognition}}$

• Link ORCID, Google Scholar, or other academic IDs
• Earn badges for contributions like reviews, citations, and collaborations
• Personal dashboard showing user impact and progress

$\large\textbf{\color{#FFFFA0}{Reader Engagement Tools}}$

• Support for comments, upvotes, and discussion threads
• Build a community around academic writing and reviews

$\large\textbf{\color{#00E0FF}{Moderation and Admin Capabilities}}$

• Admin can manage categories, moderators, assing badges
• Moderators can flag spam, review citations, and handle plagiarism reports

$\large\textbf{\color{#2196F3}{Target Users}}$

University students	Academic researchers	Educators and teachers	Content reviewers

$\large\textbf{\color{#2196F3}{File Structure}}$

techsage/
├── frontend/
│   ├── index.html
│   ├── node_modules/
│   ├── public/
│   ├── src/
│   │   ├── assets/
│   │   ├── components/
│   │   ├── context/
│   │   ├── pages/
│   │   ├── utils/
│   │   ├── App.jsx
│   │   ├── constants.js
│   │   ├── firebase.js
│   │   ├── index.css
│   │   ├── index.jsx
│   │   ├── main.jsx
│   │   ├── styles.css
│   │   └── .env.local
│   ├── .eslintrc.js
│   ├── .gitignore
│   ├── index.html
│   ├── package-lock.json
│   └── vite.config.js
├── backend/
│   ├── manage.py
│   ├── .env
│   ├── .gitignore
│   ├── auth/
│   ├── auth.log
│   ├── badges/
│   ├── blogs/
│   ├── checker/
│   ├── collab/
│   ├── comments/
│   ├── reports/
│   ├── techsage/
│   ├── templates/
│   ├── users/
│   ├── version_control/
│   ├── db.sqlite3
│   ├── debug.log
│   ├── manage.py
│   ├── pytest.ini
│   ├── requirements.txt
│   └── secret_key.py
├── .gitignore
├── README.md
└── requirements.txt

$\large\textnormal{\color{#2196F3}{Installation}}$

Clone the repository

https://github.com/AfrinJahanEra/TechSage.git

Or download the zip file, then extract it in a folder.

$\large\textnormal{\color{#2196F3}{How To Run}}$

Prerequisites

• Install Python and React.js and Mongodb(optional).

• Open an account at MongoDB Atlas and collect the credentials.

• Open account in Cloudinary and collect credentials from there.

• Then download Redis from redis-release (use the latest zip version). Extract the files from redis-release zip file. Then click on redis-server.exe. To check the server is running or not:

  Open the command prompt, write:

  cd "path\to\extracted folder"
  redis-cli
  ping

  Or directly open redis-cli.exe. Then write ping. If it results in PONG, then the Redis server is connected successfully.

  Successful connection example:

  127.0.0.1:6379> ping
  PONG
  127.0.0.1:6379>

  

  [!TIP]
  If the redis-server.exe isn't running, go to Task Manager (Run as administrator).

  • Search for something like redis.
  • If it's on, click on end task.

  If it still doesn't work, try checking that port 6379 is already running or not:

  • Open command prompt.
  • Run:

    netstat -aon | findstr :6379

    If you see something like this, means this port is already in use.

  $\large\text{\color{#76DCF1}{Proto}}$	$\large\text{\color{#76DCF1}{Local Address}}$	$\large\text{\color{#76DCF1}{Foreign Address}}$	$\large\text{\color{#76DCF1}{State}}$	$\large\text{\color{#76DCF1}{PID}}$
  TCP	0.0.0.0:6379	0.0.0.0:0	LISTENING	14220
  TCP	[::]:6379	[::]:0	LISTENING	14220

  - Kill this port (change the PID according to the output): ```console taskkill /PID 14220 /F ``` - Then try refreshing the PC and run the `redis-server.exe` again.

$\large\textnormal{\color{#2196F3}{Server Directory}}$

Then go to the directory path (where the code is):

cd "path\to\directory"

Then open right-click and click open in Terminal. Then in terminal run:

code .

This will directly take you to the VS Code interface. In Server directory, open terminal and run:

For Linux/MacOS:

python -m venv env
source env/bin/activate

For Windows:

python -m venv env
.\\env\\Scripts\\activate

Which will create the environment. Inside this, install the dependencies:

pip install -r requirements.txt

This will install all the pip dependencies required to run this code. If it doesn't work, run this in Command Prompt or in VS Code Terminal:

pip install Django python-dotenv djangorestframework django-cors-headers channels pytz pymongo dnspython certify daphne cloudinary requests pytest pytest-django

Then run in Server directory:

daphne techsage.asgi:application

If it's missing the static directory it will give this error:

django.core.exceptions.ImproperlyConfigured: 
You're using the staticfiles app without having set the required STATIC_URL setting.

This happens when:

• django.contrib.staticfiles is in INSTALLED_APPS
• But forgot to define STATIC_URL (and optionally STATICFILES_DIRS)

Add this to settings.py:

import os

# Required
STATIC_URL = '/static/'

# Optional (for development)
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]

# Optional (for production use)
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

Create the static directory (if needed):

mkdir static

$\large\textnormal{\color{#2196F3}{Client Directory}}$

In Client directory, open terminal and run:

npm install
npm run dev

Make sure Vite is installed as a dev dependency in your project. Check package.json inside Client/. If something like this is present:

"devDependencies": {
  "vite": "^5.0.0",  // or another version
  ...
}

It means Vite is present. If it's missing, install it:

npm install vite --save-dev

Tip

To fix vulnerabilities, run this:

npm audit fix

Or to fix all issues automatically (including breaking changes):

npm audit fix --force

Caution

Be cautious with --force. It may upgrade packages that break the project.

and serve it with Django or a production web server. Don’t deploy with npm run build.

Important

• This project uses ASGI (not WSGI), and runs via Daphne instead of python manage.py runserver.
• Redis & MongoDB must be running before you start the app.

Note

The app runs on http://localhost:8000 by default. If port is taken, use daphne -b 127.0.0.1 -p 8080 techsage.asgi:application.

You can change the port (-p) or host (-b) as needed.

$${\color{#2196F3}You \space can \space change \space the \space port \space (-p) \space or \space host \space (-b) \space as \space needed.}$$

$\large\textnormal{\color{#EE4B2B}{‼ Things To Consider}}$

List this in .env.example file do not commit this .env in github

MONGO_DB_NAME=techsage_db
MONGO_URI=mongodb+srv://username:password@cluster0.mongodb.net/techsage_db
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
SECRET_KEY=your_django_secret_key
PLAGIARISM_CHECKER_API_KEY=your_plagiarism_api_key
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_USE_TLS=True
EMAIL_HOST_USER=your_email@gmail.com
EMAIL_HOST_PASSWORD=your_email_password
DEFAULT_FROM_EMAIL=your_email@gmail.com
OTP_VALIDITY_MINUTES=2
ALLOWED_HOSTS=localhost,127.0.0.1

Commit a .env.example file instead, which shows others what keys they need to set (but with no real values)

Check port conflicts

$\large\text{\color{#76DCF1}{Service}}$	$\large\text{\color{#76DCF1}{Default Port}}$
Redis	6379
Daphne / Django	8000
React dev server	5173

Warning

Browsers block WebSocket connections on HTTP if the main site is HTTPS.

• Use WSS (wss://) with SSL in production
• Run Daphne behind an HTTPS reverse proxy (like Nginx)

$\large\textnormal{\color{#2196F3}{External Dependencies}}$

Below is a list of key dependencies used in the frontend, along with references to their official documentation for installation, usage, and examples:

Library/Tool	Purpose	Official Documentation/Reference
Tiptap	Rich text editor.	Tiptap Documentation - Install via npm install @tiptap/react @tiptap/starter-kit.
KaTeX	Rendering LaTeX equations.	KaTeX Documentation - Integrate with React using react-katex or directly in components.
Mermaid.js	Generating diagrams.	Mermaid Documentation - Diagram and chart library. Use mermaid package in React for rendering.
React Toast (react-toastify)	Displaying popup notifications.	react-toastify Documentation - Install via npm install react-toastify.
React Chart (react-chartjs-2)	Creating graphs and charts.	react-chartjs-2 Documentation - Install via npm install react-chartjs-2 chart.js.
jsPDF	Exporting content to PDF format.	jsPDF Documentation - Install via npm install jspdf.

Note

SMTP for email OTP/verification is handled on the backend (e.g., via Django's email backend or libraries like smtplib). Refer to Django Email Documentation for setup.

$\large\textnormal{\color{#2196F3}{Team Members}}$

$\large\text{\color{#DAA5A4}{Name}}$	$\large\text{\color{#D6C8FF}{Github Profile}}$
Afrin Jahan Era	github
Ramisa Anan Rahman	github
Ridika Naznin	github

$\large\textnormal{\color{#2196F3}{License}}$

$${\color{lightblue}This \space \color{#5EEAD4}project \space \color{#FBF3D4}is \space \color{#D4D4FF}under}$$ MIT License

Back to top