Messenger

Description

• 🌟 Interactive User Interface: Designed using Vue.js for a smooth and engaging user experience.
• 💬 Instant Messaging Support: Allows real-time sending and receiving of messages.
• 🔐 Identity Verification: Uses Django REST Framework SimpleJWT for secure login and identity verification.
• 👤 User Management: Enables account creation and management of user profiles.
• 🛎️ Notifications: Users receive notifications for new messages.
• 🎨 Interface Customization: Tailwind and PrimeVue libraries used for customizable design and user experience.
• 📱 PWA Support: Installable as a Progressive Web App (PWA) on mobile devices.
• 🔍 Search Capability: Easily search conversations or users.

Preview Website Image

FrontEnd Language

1. Vue
2. Html
3. Css
4. Javascript

Vue Libraries

1. • 1️⃣ Tailwind
2. • 2️⃣ PrimeVue
3. • 3️⃣ scss
4. • 4️⃣ Axios
5. • 5️⃣ Fontawesome
6. • 6️⃣ Pwa
7. • 7️⃣ Prism
8. • 8️⃣ Swiper

BackEnd Language

1. Django

Django Libraries

1. • 🌐 Django Rest Framework
2. • 🔒 Django Rest Framework Simplejwt 🛡️
3. • 🌍 Django Cors Headers 🔗
4. • 🖼️ pillow 📷

Plugins

• Name Demo

Website Demo

Link Demo

📦 Django

• 🚀 Activate Virtual Environment 🔋

messenger_virtual_environment\Scripts\activate

• Go To

cd messenger_django

• Modifications To Models File

python manage.py makemigrations

• Modifications To The Database

python manage.py migrate

• Run Project

python manage.py runserver

🖥️ Vue

• Go To

cd messenger_vue

npm run dev

npm run build

🖥️ Vue Press

• Go To

cd messenger_vuepress

npm run docs:dev

---

📝 Create File Gitignore

.gitignore

🖊️ Write Inside File

node_modules/

📋 Review changes and formulate change action

git status

📂 Add all new and changed files to the Staging Area.

git add *

💾 This command sends the file from the Staging Area to the Local Repo.

git commit -m "Commit Explain Code"

🌐 This command sends files from (Local Repo) to (Remote Repo).

git push origin main