Skip to content

SETUP_GUIDE.md

Latest commit

 

History

History
248 lines (188 loc) · 5.53 KB

SETUP_GUIDE.md

File metadata and controls

248 lines (188 loc) · 5.53 KB

Setup Guide - Notes Taking App

Prerequisites

  • Python 3.11+ installed
  • Node.js 18+ installed
  • pip package manager
  • npm package manager

Step-by-Step Setup

Part 1: Backend Setup (5 minutes)

  1. Navigate to backend directory

    cd backend/notes_project

  2. Create and activate virtual environment

    python3 -m venv venv

# On macOS/Linux:
source venv/bin/activate

# On Windows:
venv\Scripts\activate

  3. Install Python dependencies

    pip install -r ../requirements.txt

    This installs:

    • Django 5.0.1
    • djangorestframework 3.14.0
    • djangorestframework-simplejwt 5.3.1
    • django-cors-headers 4.3.1

  4. Create database and run migrations

    python manage.py makemigrations
python manage.py migrate

  5. Seed initial categories

    python manage.py seed_categories

    This creates 4 categories:

    • Random Thoughts (#E8B4A0)
    • School (#F4E4C1)
    • Personal (#B8D4D1)
    • Drama (#D4D8B8)

  6. Create admin superuser (optional but recommended)

    python manage.py createsuperuser

    Follow prompts to set username, email, and password.

  7. Start Django development server

    python manage.py runserver

    ✅ Backend should now be running at: http://localhost:8000 ✅ Admin panel accessible at: http://localhost:8000/admin ✅ API docs at: http://localhost:8000/api/

Part 2: Frontend Setup (3 minutes)

  1. Open a NEW terminal window (keep backend running)

  2. Navigate to frontend directory

    cd frontend

  3. Install Node.js dependencies

    npm install

    This installs:

    • React 18.2.0
    • React Router v6
    • Axios
    • Tailwind CSS
    • Vite

  4. Start React development server

    npm run dev

    ✅ Frontend should now be running at: http://localhost:5173 ✅ Browser should auto-open

Part 3: Test the Application

  1. Open browser to http://localhost:5173

  2. Create an account

    • Click "Oops! I've never been here before"
    • Enter email and password (8+ characters)
    • Click "Sign Up"

  3. Create your first note

    • Click "+ New Note" button
    • Select a category
    • Add title and content
    • Close editor (autosaves automatically)

  4. Test features

    • Create multiple notes
    • Filter by category in sidebar
    • Edit existing notes
    • View version history (after editing a note)
    • Press N key to create new note

Troubleshooting

Backend Issues

Error: "ModuleNotFoundError: No module named 'django'"

  • Solution: Make sure virtual environment is activated
  • Run: source venv/bin/activate (or venv\Scripts\activate on Windows)

Error: "Port 8000 already in use"

  • Solution: Kill existing Django process or use different port
  • Run: python manage.py runserver 8001

Error: "No such table: notes_api_category"

  • Solution: Run migrations
  • Run: python manage.py migrate

Frontend Issues

Error: "Cannot find module 'react'"

  • Solution: Install dependencies
  • Run: npm install

Error: "Failed to fetch"

  • Solution: Make sure backend is running on port 8000
  • Check .env file has: VITE_API_URL=http://localhost:8000/api

Error: CORS issues

  • Solution: Check Django CORS settings in settings.py
  • Verify CORS_ALLOWED_ORIGINS includes http://localhost:5173

Database Issues

Want to reset database?

# Stop Django server (Ctrl+C)
rm db.sqlite3
python manage.py migrate
python manage.py seed_categories
python manage.py createsuperuser  # optional
python manage.py runserver

Development Workflow

Both servers running:

  1. Terminal 1: Backend (Django)

    cd backend/notes_project
source venv/bin/activate
python manage.py runserver

  2. Terminal 2: Frontend (React)

    cd frontend
npm run dev

Making changes:

  • Backend changes: Django auto-reloads on file save
  • Frontend changes: Vite hot-reloads on file save
  • Model changes: Run python manage.py makemigrations then python manage.py migrate

Testing the API Directly

Using curl or Postman:

  1. Register user

    curl -X POST http://localhost:8000/api/auth/register/ \
  -H "Content-Type: application/json" \
  -d '{"email": "test@example.com", "password": "testpass123"}'

  2. Login

    curl -X POST http://localhost:8000/api/auth/login/ \
  -H "Content-Type: application/json" \
  -d '{"email": "test@example.com", "password": "testpass123"}'

    Copy the access token from response.

  3. Get notes

    curl http://localhost:8000/api/notes/ \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"

Production Deployment Notes

⚠️ Before deploying to production:

  1. Backend:

    • Change SECRET_KEY in settings.py
    • Set DEBUG = False
    • Use PostgreSQL instead of SQLite
    • Configure ALLOWED_HOSTS
    • Set up proper CORS origins
    • Use environment variables for secrets

  2. Frontend:

    • Build production bundle: npm run build
    • Update VITE_API_URL to production API URL
    • Deploy dist/ folder to static hosting

  3. Security:

    • Use HTTPS for all connections
    • Consider httpOnly cookies instead of localStorage for tokens
    • Set up rate limiting
    • Configure CSP headers

Need Help?

Check the main README.md for:

  • Architecture decisions
  • API documentation
  • Feature list
  • Known limitations

You're all set! Start building your notes! 📝