{"id":15043067,"url":"https://github.com/kalana99/cml_trs","last_synced_at":"2026-01-06T22:41:50.739Z","repository":{"id":257233050,"uuid":"857400458","full_name":"Kalana99/cml_trs","owner":"Kalana99","description":"Full-Stack Web Application (React + Django + PostgreSQL + Docker)","archived":false,"fork":false,"pushed_at":"2024-09-17T19:08:21.000Z","size":215,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T12:14:08.485Z","etag":null,"topics":["django","django-rest-framework","docker","docker-compose","material-ui","postgresql","reactjs","rest-api"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kalana99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-09-14T15:00:21.000Z","updated_at":"2024-09-18T16:13:37.000Z","dependencies_parsed_at":"2024-10-15T17:01:11.803Z","dependency_job_id":"153f36ab-87b8-42c3-95e9-9057e9c1066e","html_url":"https://github.com/Kalana99/cml_trs","commit_stats":null,"previous_names":["kalana99/cml_trs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kalana99%2Fcml_trs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kalana99%2Fcml_trs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kalana99%2Fcml_trs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kalana99%2Fcml_trs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kalana99","download_url":"https://codeload.github.com/Kalana99/cml_trs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245841755,"owners_count":20681195,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["django","django-rest-framework","docker","docker-compose","material-ui","postgresql","reactjs","rest-api"],"created_at":"2024-09-24T20:48:31.528Z","updated_at":"2026-01-06T22:41:50.690Z","avatar_url":"https://github.com/Kalana99.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Full-Stack Web Application (React + Django + PostgreSQL + Docker)\n\nThis project is a full-stack web application consisting of a **React frontend**, **Django backend**, and **PostgreSQL database**. The frontend and backend source code is contained within the same GitHub repository, and both the frontend and backend have separate `.env` files for environment-specific configurations. The application is containerized using Docker and Docker Compose.\n\n## Table of Contents\n\n- [System Design and Architecture](#system-design-and-architecture)\n- [Technologies](#technologies)\n- [Running the System](#running-the-system)\n  - [Running with Docker](#running-with-docker)\n  - [Running without Docker](#running-without-docker)\n- [Environment Variables](#environment-variables)\n- [Testing](#testing)\n\n---\n\n## System Design and Architecture\n\nThe application follows a **client-server architecture** where the frontend (React) communicates with the backend (Django) via HTTP requests. The backend handles business logic and data persistence, while PostgreSQL serves as the database.\n\n1. **Frontend (React)**: The React application serves the user interface, fetching and sending data from and to the backend through API calls. It is built with a Node.js environment and served via Nginx in production.\n\n2. **Backend (Django)**: The Django backend exposes RESTful API endpoints for the frontend to interact with the database. It manages user authentication, request processing, and data manipulation.\n\n3. **Database (PostgreSQL)**: The PostgreSQL database is used to store application data, including user information, events, and other entities relevant to the application.\n\n4. **Containerization (Docker)**: The entire system is containerized using Docker. The frontend, backend, and PostgreSQL each run in separate containers, orchestrated with Docker Compose for ease of deployment and development.\n\n---\n\n## Technologies\n\n- **React** (Frontend)\n- **Django** (Backend)\n- **PostgreSQL** (Database)\n- **Docker \u0026 Docker Compose** (Containerization)\n- **Nginx** (Frontend web server)\n- **Python** (Backend language)\n\n---\n\n## Running the System\n\n### Running with Docker\n\nTo run the entire system with Docker and Docker Compose, follow the steps below:\n\n#### 1. Clone the repository\n\n```bash\ngit clone https://github.com/Kalana99/cml_trs.git\ncd your-repo\n```\n\n### 2. Configure Environment Variables\n\nMake sure both the frontend and backend .env files are properly configured. Here's a sample .env for each:\n\n- **Frontend** (.env)\n\n```env\nVITE_API_BASE_URL=http://localhost:8000\n```\n\n- **Backend** (.env)\n\n```env\nAPP_ENV=dev\nSECRET_KEY=secret_key\nDEBUG=True\nDB_NAME=mydatabase\nDB_USER=myuser\nDB_HOST=localhost\nDB_PASSWORD=mypassword\nDB_PORT=5432\n```\n\n### 3. Create Dockerfiles\n\nCreate Dockerfile for the frontend and backend.\n\n- **Frontend Dockerfile** (client/Dockerfile):\n\n```dockerfile\n# Stage 1: Build the frontend\nFROM node:18 as build\n\nWORKDIR /app\n\nCOPY package*.json ./\nRUN npm install\n\nCOPY . .\n\n# Build the app\nRUN npm run build\n\n# Stage 2: Serve the frontend with Nginx\nFROM nginx:alpine\n\n# Remove default Nginx website\nRUN rm -rf /usr/share/nginx/html/*\n\n# Copy the React build from the previous stage\nCOPY --from=build /app/dist /usr/share/nginx/html\n\n# Copy Nginx configuration\nCOPY nginx.conf /etc/nginx/conf.d/default.conf\n\n# Expose port\nEXPOSE 80\n\n# Start Nginx\nCMD [\"nginx\", \"-g\", \"daemon off;\"]\n```\n\n- **Backend Dockerfile** (server/Dockerfile):\n\n```dockerfile\nFROM python:3.11-slim\n\n# Set environment variables\nENV PYTHONDONTWRITEBYTECODE 1\nENV PYTHONUNBUFFERED 1\n\n# Set work directory\nWORKDIR /app\n\n# Install dependencies\nCOPY requirements.txt /app/\nRUN pip install -r requirements.txt\n\n# Copy the application code\nCOPY . /app/\n\n# Copy environment file\nCOPY .env /app/.env\n\nRUN python manage.py collectstatic --noinput\n\n# Expose the port\nEXPOSE 8000\n\n# Run Django development server\nCMD [\"python\", \"manage.py\", \"runserver\", \"0.0.0.0:8000\"]\n```\n\n### 4. Create Nginx Config\n\nCreate nginx.conf for the frontend in the frontend directory.\n\n```nginx\nserver {\n    listen 80;\n    server_name localhost;\n\n    # Root directory for serving the React build files\n    location / {\n        root /usr/share/nginx/html;\n        try_files $uri /index.html;\n    }\n\n    # Custom error pages for HTTP error codes\n    error_page 500 502 503 504 /50x.html;\n    location = /50x.html {\n        root /usr/share/nginx/html;\n    }\n\n    # Enable Gzip compression for text-based resources\n    gzip on;\n    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;\n    gzip_min_length 256;\n\n    # Security headers\n    add_header X-Content-Type-Options nosniff;\n    add_header X-Frame-Options SAMEORIGIN;\n    add_header X-XSS-Protection \"1; mode=block\";\n\n    # Caching for static files (JavaScript, CSS, images)\n    location ~* \\.(js|css|png|jpg|jpeg|gif|svg|ico)$ {\n        expires 7d;\n        add_header Cache-Control \"public\";\n    }\n}\n```\n\n### 5. Create Docker Compose File\n\nCreate docker-compose.yml at the root of your project.\n\n```yaml\nservices:\n  client:\n    build:\n      context: ./client\n    ports:\n      - \"3000:80\"\n    env_file:\n      - ./client/.env\n    depends_on:\n      - server\n    networks:\n      - my-network\n    volumes:\n      - ./client/nginx.conf:/etc/nginx/conf.d/default.conf  # Make sure the Nginx config is copied if customized\n\n  server:\n    build:\n      context: ./server\n    command: \u003e\n      bash -c \"python manage.py migrate \u0026\u0026\n               python manage.py collectstatic --noinput \u0026\u0026\n               python manage.py runserver 0.0.0.0:8000\"\n    volumes:\n      - ./server:/app\n    ports:\n      - \"8000:8000\"\n    env_file:\n      - ./server/.env\n    depends_on:\n      - db\n    networks:\n      - my-network\n\n  db:\n    image: postgres:13\n    container_name: postgres_db\n    volumes:\n      - postgres_data:/var/lib/postgresql/data/\n    environment:\n      POSTGRES_DB: cml\n      POSTGRES_USER: postgres\n      POSTGRES_PASSWORD: 1232\n    ports:\n      - \"5432:5432\"\n    env_file:\n      - ./server/.env\n    networks:\n      - my-network\n\nnetworks:\n  my-network:\n    driver: bridge\n\nvolumes:\n  postgres_data:\n```\n\n### 6. Build and Run Containers\n\nRun the following command to build and start the containers:\n\n```bash\ndocker-compose up --build\n```\n\nThis will:\n\n- Build the frontend and backend images.\n- Create containers for the frontend, backend, and PostgreSQL database.\n- Automatically start the system and set up network communication between services.\n\n### 7. Access the Application\n\n- Frontend: [http://localhost:3000]\n- Backend: [http://localhost:8000]\n\n### 8. Stopping the Containers\n\nTo stop the running containers, run:\n\n```bash\ndocker-compose down\n```\n\n## Running without Docker\n\nIf you prefer running the application locally without Docker, follow these steps:\n\n### 1. Install Dependencies\n\nYou will need to install the dependencies for both the frontend and backend.\n\n#### 1.1 Frontend (React)\n\nNavigate to the frontend directory and install the necessary Node.js packages:\n\n```bash\ncd client\nnpm install\n```\n\nTo run the React development server:\n\n```bash\nnpm run dev\n```\n\nThe React frontend will now be accessible at [http://localhost:3000].\n\n#### 1.2 Backend (Django)\n\nNavigate to the backend directory and create a virtual environment:\n\n```bash\ncd server\npython -m venv env\nenv\\Scripts\\activate\n```\n\nInstall the Python dependencies from the requirements.txt file:\n\n```bash\npip install -r requirements.txt\n```\n\nRun the following command to start the Django development server:\n\n```bash\npython manage.py runserver\n```\n\nThe Django backend will now be accessible at [http://localhost:8000].\n\n### 2. Set up PostgreSQL\n\nYou will need to install and run PostgreSQL locally. Make sure you configure the same environment variables in your .env file.\n\n```bash\n# Sample PostgreSQL commands\npsql -U postgres\nCREATE DATABASE mydatabase;\nCREATE USER myuser WITH PASSWORD 'mypassword';\nGRANT ALL PRIVILEGES ON DATABASE mydatabase TO myuser;\n```\n\nOnce PostgreSQL is running, run the following command to apply migrations:\n\n```bash\npython manage.py migrate\n```\n\nYou can now access both the frontend and backend locally.\n\n## Environment Variables\n\nEach service has its own .env file. The following variables need to be configured:\n\n### Frontend (frontend/.env):\n\n- `VITE_API_BASE_URL`: The URL of the Django backend (e.g., `http://localhost:8000`).\n\n### Backend (backend/.env):\n\n- `APP_ENV`: Application environment.\n- `SECRET_KEY`: Django's secret key.\n- `DEBUG`: Set to `True` for development mode.\n- `DB_NAME`: Name of the PostgreSQL database.\n- `DB_USER`: PostgreSQL user.\n- `DB_HOST`: The hostname for the PostgreSQL database.\n- `DB_PASSWORD`: PostgreSQL password.\n- `DB_PORT`: The port for the PostgreSQL database (default is 5432).\n\n## Testing\n\n```bash\ncd server\nenv\\Scripts\\activate\npython manage.py test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkalana99%2Fcml_trs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkalana99%2Fcml_trs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkalana99%2Fcml_trs/lists"}