🤖 Aile - Mark - I

An AI-powered conversational assistant built with the MERN stack, featuring secure authentication, persistent conversation history, and workflow-driven responses using n8n. The workflow architecture allows the underlying AI provider to be swapped or extended without changing the application code.

🌐 Frontend

🚀 Live Demo

⚙️ Backend API

🔗 Render API

📖 About The Project

Aile Mark 1 is a production-oriented AI conversation platform designed to simulate the architecture of modern AI assistants.

Instead of focusing only on AI responses, the project emphasizes secure authentication, conversation persistence, scalable backend architecture, and workflow automation through n8n.

It demonstrates how modern AI applications can be built using industry-standard technologies including React, Express.js, MongoDB Atlas, JWT authentication, and cloud deployment platforms.

✨ Key Highlights

🔐 JWT Authentication & Protected Routes
🤖 AI-powered Conversations
💬 Persistent Conversation History
📂 User-specific Chat Management
🎨 Responsive Modern Interface
🌙 Dark & High Contrast Themes
☁️ Cloud Deployment
⚡ MERN Architecture
🔄 n8n Workflow Integration

📸 Application Preview

🔑 Login

Authenticate securely using JWT-based authentication.

📝 Register

Create an account with client-side and server-side validation.

🤖 AI Chat Workspace

Modern AI chat interface with persistent conversation history.

🚀 Features

🤖 AI Conversation

AI-powered responses using n8n workflows
Persistent chat history
Markdown message rendering
Session-based conversations
Copy message functionality
Like / Dislike interactions

🔐 Authentication & Security

User Registration
Secure Login
Password Hashing (bcrypt)
JWT Authentication
Protected Routes
Authentication Middleware

💬 Conversation Management

User-specific conversations
Automatic conversation titles
Persistent MongoDB storage
Conversation history
Delete conversations
Session restoration

🎨 User Experience

Responsive Layout
Sidebar Navigation
Message timestamps
Dark Theme
High Contrast Theme
Persistent Login Session

☁️ Deployment

Netlify Frontend
Render Backend
MongoDB Atlas Database
Railway n8n Workflow

🛠️ Tech Stack

Frontend

React.js
Vite
JavaScript
React Router
CSS

Backend

Node.js
Express.js
MongoDB
Mongoose

Authentication

JWT
bcrypt

AI Workflow

n8n

Deployment

Netlify
Render
Railway
MongoDB Atlas

🏗️ System Architecture

                ┌────────────────────┐
                │       Browser      │
                └─────────┬──────────┘
                          │
                          ▼
              React + Vite Frontend
                     (Netlify)
                          │
                REST API (Axios)
                          │
                          ▼
                Express.js Backend
                     (Render)
                  ┌───────┴────────┐
                  ▼                ▼
          MongoDB Atlas      n8n Workflow

📂 Project Structure

AILE-MARK-1/

├── backend/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   ├── app.js
│   └── package.json
│
├── src/
│   ├── assets/
│   ├── components/
│   ├── pages/
│   ├── services/
│   ├── utils/
│   ├── App.jsx
│   └── main.jsx
│
├── public/
├── package.json
└── README.md

🔌 API Overview

Authentication

POST /api/auth/register
POST /api/auth/login

Conversations

GET    /api/conversations
GET    /api/conversation/:sessionId
POST   /api/chat
DELETE /api/conversations/:sessionId

⚙️ Environment Variables

Backend

PORT=8000

MONGODB_URI=<your_mongodb_connection_string>

JWT_SECRET=<your_jwt_secret>

N8N_WEBHOOK_URL=<your_n8n_webhook_url>

Frontend

VITE_API_URL=<your_backend_api_url>

🚀 Installation

Clone Repository

git clone https://github.com/iamHaneef/aile-mark-1.git

Install Frontend

npm install

Install Backend

cd backend

npm install

Start Development

Frontend

npm run dev

Backend

cd backend

npm run dev

✅ Project Modules

Phase 1 — Authentication

Phase 2 — Conversation System

Phase 3 — User Interface

Phase 4 — Deployment

⚡ Challenges

Maintaining secure conversation ownership
Persisting chat sessions across refreshes
Managing JWT expiration
Integrating asynchronous AI workflows
Deploying frontend, backend, database, and workflow services together

📚 What I Learned

Through this project, I strengthened my understanding of:

MERN Stack Development
REST API Design
JWT Authentication
MongoDB Schema Design
Express Middleware
Cloud Deployment
AI Workflow Automation
Full-Stack Application Architecture

📄 License

This project is intended for learning, portfolio, and educational purposes.

👨‍💻 Author

Haneef

⭐ Star this repository if you found it useful!

Name		Name	Last commit message	Last commit date
backend		backend
project-audit		project-audit
public		public
src		src
.gitignore		.gitignore
HOST.md		HOST.md
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
vite.config.js		vite.config.js

Latest commit

History

Folders and files

Repository files navigation

🤖 Aile - Mark - I

📖 About The Project

✨ Key Highlights

📸 Application Preview

🔑 Login

📝 Register

🤖 AI Chat Workspace

🚀 Features

🤖 AI Conversation

🔐 Authentication & Security

💬 Conversation Management

🎨 User Experience

☁️ Deployment

🛠️ Tech Stack

Frontend

Backend

Authentication

AI Workflow

Deployment

🏗️ System Architecture

📂 Project Structure

🔌 API Overview

Authentication

Conversations

⚙️ Environment Variables

Backend

Frontend

🚀 Installation

Clone Repository

Install Frontend

Install Backend

Start Development

✅ Project Modules

Phase 1 — Authentication

Phase 2 — Conversation System

Phase 3 — User Interface

Phase 4 — Deployment

⚡ Challenges

📚 What I Learned

📄 License

👨‍💻 Author

About

Topics

Resources

Stars

Watchers

Forks

Packages

Used by

Contributors

Languages