Gym Website

A gym membership management system with Django backend and Vue.js frontend.

Features

• Django REST API: Manage gym member data (CRUD operations).
• Vue.js Frontend: Responsive member list with Bootstrap 5 styling.
• CORS Configuration: Pre-configured for cross-origin requests.

Technologies

• Backend: Django 3.0+, Django REST Framework
• Frontend: Vue.js 3, Axios, Bootstrap 5
• Tools: npm, django-cors-headers

Setup Guide

Prerequisites

• Python ≥3.6, Node.js ≥12, npm/yarn

1. Clone Repository

git clone https://github.com/Abdullah-Niaz/gym-website.git
cd gym-website

2. Backend Setup

Create and activate virtual environment

python -m venv venv
source venv/bin/activate # Linux/macOS
venv\Scripts\activate # Windows

Install dependencies

pip install -r backend/requirements.txt

Configure CORS (add to backend/settings.py)

INSTALLED_APPS = [
...
'corsheaders',
]

MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
]

CORS_ALLOWED_ORIGINS = [
"http://localhost:8080",
]

Apply migrations

cd backend
python manage.py migrate

Run server (http://localhost:8000)

python manage.py runserver

3. Frontend Setup

cd frontend npm install

Start development server (http://localhost:8080)

npm run serve

API Endpoints

• GET /api/members/: List all members
• POST /api/members/: Add new member
• GET /api/members//: Member details

Project Structure

gym-website/
├── backend/               # Django project
│   ├── gymapp/           # Members app
│   │   ├── models.py     # Member model
│   │   └── api/          # DRF views and serializers
├── frontend/             # Vue.js project
│   └── src/
│       ├── components/   # Vue components
│       └── App.vue       # Main component

Demo