Skip to content

SETUP.md

Latest commit

 

History

History
255 lines (171 loc) · 4.65 KB

SETUP.md

File metadata and controls

255 lines (171 loc) · 4.65 KB

Notes App - Setup Guide

A full-stack notes application built with Django REST Framework (backend) and React (frontend).

Features

  • User Authentication: Secure registration and login with JWT tokens
  • CRUD Operations: Create, Read, Update, and Delete notes
  • User-specific Notes: Each user can only see and manage their own notes
  • Auto Token Refresh: Automatic token refresh on expiry
  • Modern UI: Clean and responsive user interface

Prerequisites

  • Python 3.8 or higher
  • Node.js 16 or higher
  • npm or yarn

Backend Setup

1. Navigate to Backend Directory

cd backend

2. Create Virtual Environment

# Windows
python -m venv venv
venv\Scripts\activate

# macOS/Linux
python3 -m venv venv
source venv/bin/activate

3. Install Dependencies

pip install -r requirements.txt

4. Configure Environment Variables

The .env file is already created with SQLite configuration. For production or if you want to use PostgreSQL:

# Database Configuration
DB_NAME=your_database_name
DB_USER=your_database_user
DB_PWD=your_database_password
DB_HOST=localhost
DB_PORT=5432

# Django Secret Key
SECRET_KEY=your-secret-key-here

5. Run Migrations

python manage.py makemigrations
python manage.py migrate

6. Create Superuser (Optional)

python manage.py createsuperuser

7. Start Development Server

python manage.py runserver

The backend will be available at http://127.0.0.1:8000

Frontend Setup

1. Navigate to Frontend Directory

cd frontend

2. Install Dependencies

npm install

3. Configure Environment Variables

The .env file is already configured. Update if needed:

VITE_API_URL=http://127.0.0.1:8000

4. Start Development Server

npm run dev

The frontend will be available at http://localhost:5173

Using the Application

1. Register a New Account

  • Navigate to http://localhost:5173/register
  • Enter a username and password
  • Click "Register"

2. Login

  • Navigate to http://localhost:5173/login
  • Enter your credentials
  • Click "Login"

3. Create Notes

  • After logging in, you'll see the home page
  • Scroll to the "Create a Note" form
  • Enter a title and content
  • Click "Create Note"

4. Edit Notes

  • Click the "Edit" button on any note
  • The form will populate with the note's content
  • Make your changes and click "Update Note"

5. Delete Notes

  • Click the "Delete" button on any note
  • Confirm the deletion

6. Logout

  • Click the "Logout" button in the top-right corner

API Endpoints

Authentication

  • POST /api/user/register/ - Register a new user
  • POST /api/token/ - Login and get access/refresh tokens
  • POST /api/token/refresh/ - Refresh access token

Notes

  • GET /api/notes/ - List all notes for authenticated user
  • POST /api/notes/ - Create a new note
  • PUT /api/notes/update/<id>/ - Update a specific note
  • DELETE /api/notes/delete/<id>/ - Delete a specific note

Technology Stack

Backend

  • Django 5.1
  • Django REST Framework
  • djangorestframework-simplejwt (JWT authentication)
  • django-cors-headers (CORS support)
  • PostgreSQL/SQLite (database)

Frontend

  • React 18
  • Vite
  • React Router DOM
  • Axios
  • jwt-decode

Troubleshooting

Backend Issues

Port already in use:

python manage.py runserver 8001

Database connection errors:

  • Ensure PostgreSQL is running (if using PostgreSQL)
  • Verify database credentials in .env
  • For development, the app uses SQLite by default

Migration errors:

python manage.py migrate --run-syncdb

Frontend Issues

Port already in use:

npm run dev -- --port 5174

API connection errors:

  • Verify backend is running on http://127.0.0.1:8000
  • Check CORS settings in backend
  • Ensure .env has correct API URL

Module not found errors:

rm -rf node_modules package-lock.json
npm install

Development Tips

  • Backend admin panel: http://127.0.0.1:8000/admin/
  • Check browser console for frontend errors
  • Check terminal for backend errors
  • JWT tokens expire after 30 minutes (configurable in settings.py)

Production Deployment

Backend

  1. Set DEBUG = False in settings.py
  2. Set proper ALLOWED_HOSTS
  3. Use environment variables for sensitive data
  4. Use PostgreSQL database
  5. Configure static files serving
  6. Use a production WSGI server (gunicorn, uWSGI)

Frontend

  1. Build the production bundle:
npm run build
  1. Serve the dist folder using a web server
  2. Update VITE_API_URL to production backend URL

License

This project is open source and available under the MIT License.