AI Smart Notes App

An AI-powered study and knowledge assistant that converts topics and questions into structured, easy-to-understand study notes.

📌 Project Overview

AI Smart Notes App is a full-stack web application designed to help students learn faster and organize knowledge more effectively.

A user can enter a topic or question such as:

Explain Machine Learning in detail.

The application uses AI to generate structured learning content including:

• Short Summary
• Simple Explanation
• Important Points
• Key Terms
• Step-by-Step Explanation
• Examples
• Advantages and Disadvantages
• Frequently Asked Questions
• Study Notes

✨ Features

🤖 AI Study Assistant

Generate intelligent explanations and notes from any topic or question.

📝 Smart Notes

Convert large or complex topics into organized study material.

📚 Structured Learning

AI-generated responses can be organized into:

1. Summary
2. Simple Explanation
3. Important Points
4. Key Terms
5. Detailed Explanation
6. Examples
7. Advantages
8. Disadvantages
9. FAQs

🔐 Authentication

The backend supports user authentication using JWT.

🌐 Full-Stack Architecture

The application is designed with a separate frontend and backend.

🛠️ Technology Stack

Frontend

• React
• Vite
• JavaScript
• HTML5
• CSS3

Backend

• Python
• Flask
• Flask-CORS
• Python-dotenv
• Requests
• PyJWT
• OpenAI API

Development Tools

• VS Code
• PowerShell
• npm
• Python Virtual Environment

📁 Project Structure

AI-Smart-Notes-App/
│
├── README.md
├── requirements.txt
├── .env
│
├── backend/
│   ├── app.py
│   │
│   ├── config/
│   │   └── config.py
│   │
│   ├── routes/
│   │   ├── auth_routes.py
│   │   └── ...
│   │
│   ├── models/
│   │   └── ...
│   │
│   └── services/
│       └── ...
│
├── frontend/
│   ├── package.json
│   ├── index.html
│   ├── src/
│   │   ├── App.jsx
│   │   ├── main.jsx
│   │   ├── components/
│   │   └── pages/
│   │
│   └── public/
│
└── .venv/

⚙️ Backend Setup

Open PowerShell in the project directory.

1. Create virtual environment

python -m venv .venv

2. Activate virtual environment

.venv\Scripts\Activate.ps1

You should see:

(.venv)

3. Install dependencies

python -m pip install -r requirements.txt

If openai or PyJWT is missing:

python -m pip install openai PyJWT

4. Configure environment variables

Create a .env file in the project root.

OPENAI_API_KEY=your_api_key_here
SECRET_KEY=your_secret_key

Do not commit .env or your API key to GitHub.

5. Run backend

Because the backend uses imports such as config.config and routes.auth_routes, run it from the backend directory:

cd backend
python app.py

The backend should start at:

http://127.0.0.1:5000

🎨 Frontend Setup

Open a second PowerShell terminal.

Go to the frontend:

cd "E:\IIT DELHI PROJECT\AI-Smart-Notes-App\frontend"

Install dependencies:

npm install

Run the development server:

npm run dev

Vite should display a URL similar to:

http://localhost:5173

Open that URL in your browser.

▶️ Running the Complete Application

You need two terminals.

Terminal 1 — Backend

cd "E:\IIT DELHI PROJECT\AI-Smart-Notes-App\backend"
python app.py

Terminal 2 — Frontend

cd "E:\IIT DELHI PROJECT\AI-Smart-Notes-App\frontend"
npm run dev

Then open the frontend URL shown by Vite.

🔑 Environment Variables

The application may require the following variables:

Variable	Purpose
OPENAI_API_KEY	Connects the application to the OpenAI API
SECRET_KEY	Flask/JWT security
DATABASE_URL	Database connection, if configured

Never publish API keys or passwords in source code.

🔌 API Architecture

The frontend communicates with the Flask backend through HTTP APIs.

Example architecture:

User
  │
  ▼
React Frontend
  │
  │ HTTP / REST API
  ▼
Flask Backend
  │
  ├── Authentication
  │
  ├── Notes Management
  │
  ├── AI Service
  │
  └── Database
        │
        ▼
     Stored Notes

🧠 AI Generation Flow

User enters topic
        │
        ▼
React Frontend
        │
        ▼
Flask API
        │
        ▼
AI Service
        │
        ▼
AI-generated content
        │
        ▼
Structured Study Notes
        │
        ▼
React UI

🧪 Example

User Input

Explain Machine Learning in detail.

Generated Content

Summary
Machine Learning is a branch of AI that enables computers
to learn patterns from data.

Important Points
- Supervised Learning
- Unsupervised Learning
- Reinforcement Learning

Key Terms
- Dataset
- Model
- Training
- Prediction

Examples
- Spam detection
- Recommendation systems
- Image classification

🚀 Future Enhancements

• PDF upload and summarization
• AI-generated quizzes
• Flashcards
• Voice input
• Text-to-speech
• Note search
• Note categories
• Bookmarking
• Study progress tracking
• Personalized learning paths
• Dark mode
• Multi-language support
• Export notes to PDF
• Database integration
• User dashboard

🔒 Security

For development:

• Keep API keys inside .env.
• Never expose secret keys in frontend code.
• Do not commit .env to Git.
• Use JWT securely for authentication.
• Validate user input on the backend.

Add .env to .gitignore:

.env
.venv/
__pycache__/
node_modules/

🐛 Troubleshooting

npm run dev gives ENOENT package.json

Make sure you are inside the frontend directory:

cd frontend
npm install
npm run dev

ModuleNotFoundError: No module named 'jwt'

Install PyJWT:

python -m pip install PyJWT

ModuleNotFoundError: No module named 'openai'

Install OpenAI:

python -m pip install openai

ModuleNotFoundError: No module named 'config'

Run the backend from the backend directory:

cd backend
python app.py

requirements.txt installation was cancelled

Run:

python -m pip install -r requirements.txt

and allow the installation to finish.

📄 License

This project is developed as an educational/project application.

👨‍💻 Author

er.chand rain

Built using React, Flask, Python and AI technologies.