# 🥘 Django-React-Jollof
Welcome to **Django-React-Jollof**! This package scaffolds a full-stack web application with **Django** for the backend and **React** for the frontend. It simplifies the setup process by automating configuration, migration, and installation of necessary dependencies.
---
## 📖 Table of Contents
1. [Features](#-features)
2. [Tech Stack](#️-tech-stack)
3. [Getting Started](#-getting-started)
- [Prerequisites](#-prerequisites)
- [Installation](#-installation)
4. [Setting Up the Environment](#setting-up-the-environment)
5. [Authentication Setup](#-authentication-setup)
6. [Additional Features](#-additional-features)
7. [Development Workflow](#-development-workflow)
8. [Final Project Structure](#final-project-structure)
9. [Contribution](#-contribution)
10. [License](#-license)
11. [Connect with Us](#-connect-with-us)
12. [Conclusion](#conclusion)
---
## 🌟 Features
- **🔧 Full-Stack Scaffolding**: Django + React setup in seconds.
- **⚡ Modern Frontend**: React with Vite for fast development.
- **🔐 Authentication**: Optional Google login integration.
- **🎨 Customizable**: Choose Bootstrap or Material UI for styling.
- **📡 API Ready**: Django REST Framework for seamless backend/frontend communication.
---
## 🛠️ Tech Stack
| **Component** | **Technology** |
| ------------- | --------------------------------------------------- |
| **Backend** | Django, Django REST Framework |
| **Frontend** | React, Axios |
| **Database** | SQLite (default, configurable) |
| **Styling** | Bootstrap or Material UI |
| **Tools** | ESLint, Prettier, Vite (for fast React development) |
---
## 🚀 Getting Started
### ✅ Prerequisites
Make sure you have the following installed:
#### **Backend**:
- Python 3.10+
- pip
- virtualenv
#### **Frontend**:
- Node.js 20+ (recommended version)
- npm or Yarn
### 🔗 Installation
1. **Create a Virtual Environment**:
Navigate to your project directory and run the following commands to create and activate a virtual environment:
```bash
python -m venv env
```
**Activate the virtual environment**:
- On Linux/macOS:
```bash
source env/bin/activate
```
- On Windows:
```bash
.\env\Scripts\activate
```
2. **Install the Package**:
With the virtual environment activated, install the package via pip:
```bash
pip install django-react-jollof
```
3. **Run the Setup Command**:
```bash
django-react-jollof cook
```
During the setup, you will be prompted to provide a project name. Choose your desired name, and it will be automatically configured throughout the app, including:
- App name in the NavBar.
- The browser tab title for the frontend.
The command will also:
- Set up the Django backend and install necessary requirements.
- Set up the React frontend and install dependencies.
- Run database migrations.
- Configure social login (if selected).
---
## Setting Up the Environment
In the `frontend/` directory, create a `.env` file:
```plaintext
VITE_GOOGLE_CLIENT_ID=<your_google_client_id>
```
To start the backend server, navigate to the `backend` directory, activate your virtual environment, and run:
```bash
cd backend
source env/bin/activate # For Linux/macOS
# venv\Scripts\activate # For Windows
python manage.py runserver
```
The backend will be available at `http://localhost:8000`.
Next, start the frontend development server. Navigate to the `frontend` directory and run:
```bash
cd frontend
npm run dev
```
The React app will be available at `http://localhost:5173`.
---
## 🔑 Authentication Setup
To enable Google login, configure the following in your `.env` files:
**Backend**:
```plaintext
GOOGLE_CLIENT_ID=<your_google_client_id>
GOOGLE_CLIENT_SECRET=<your_google_client_secret>
```
**Frontend**:
```plaintext
VITE_GOOGLE_CLIENT_ID=<your_google_client_id>
```
Obtain the credentials from the [Google Developer Console](https://console.cloud.google.com/).
---
## 🎁 Additional Features
- **Styling Frameworks**: Choose between Bootstrap and Material UI for the frontend.
- **API Integration**: Powered by Django REST Framework.
- **CORS**: Pre-configured for frontend-backend communication.
---
## 🔄 Development Workflow
Edit backend code in the `backend/` directory and use Django's tools for migrations, testing, and database management. Modify React components in `frontend/src/` and use Vite for hot-reload development.
---
## Final Project Structure
```
backend
│ ├── backend
│ │ ├── __init__.py
│ │ ├── asgi.py
│ │ ├── settings.py
│ │ ├── urls.py
│ │ └── wsgi.py
│ ├── db.sqlite3
│ ├── manage.py
│ ├── requirements.txt
│ └── users
│ ├── models.py
│ ├── permissions.py
│ ├── serializers.py
│ ├── tests
│ │ ├── __init__.py
│ │ ├── test_models.py
│ │ ├── test_permissions.py
│ │ ├── test_serializers.py
│ │ └── test_views.py
│ ├── urls.py
│ └── views.py
frontend
│ ├── env.d.ts
│ ├── index.html
│ ├── jsconfig.json
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ └── vite.svg
│ ├── src
│ │ ├── App.jsx
│ │ ├── actions
│ │ │ └── authActions.js
│ │ ├── assets
│ │ │ └── react.svg
│ │ ├── components
│ │ │ ├── Navbar.jsx
│ │ │ └── auth_buttons
│ │ │ ├── AuthButtons.jsx
│ │ │ └── GoogleLoginButton.jsx
│ │ ├── context
│ │ │ ├── AuthContext.jsx
│ │ │ └── ThemeContext.jsx
│ │ ├── main.jsx
│ │ ├── pages
│ │ │ ├── Login.jsx
│ │ │ ├── Profile.jsx
│ │ │ └── Register.jsx
│ │ ├── services
│ │ │ └── api.js
│ │ └── styles
│ │ └── main.css
│ └── vite.config.js
LICENSE
README.md
```
---
## 🤝 Contribution
1. Fork the repository.
2. Clone your fork:
```bash
git clone https://github.com/your-username/django-react-jollof.git
```
3. Create a branch:
```bash
git checkout -b feature/your-feature
```
4. Make your changes and commit:
```bash
git commit -m "Add your feature"
```
5. Push to your fork and submit a pull request.
---
## 📜 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
## 📣 Connect with Us
Feel free to open an issue on GitHub for bugs, feature requests, or questions.
If you find **Django-React-Jollof** helpful, please give the repository a ⭐ on [GitHub](https://github.com/sir-temi/django-react-jollof). Your support helps us grow and improve!
### 🌐 Useful Links
- **Documentation**: [django-react-jollof Docs](https://github.com/sir-temi/django-react-jollof#readme)
- **Changelog**: [Releases](https://github.com/sir-temi/django-react-jollof/releases)
- **Bug Tracker**: [Issues](https://github.com/sir-temi/django-react-jollof/issues)
---
## Conclusion
With **Django-React-Jollof**, building a full-stack app has never been easier! 🍲 Let us know what you create!
Raw data
{
"_id": null,
"home_page": "https://github.com/sir-temi/django-react-jollof",
"name": "django-react-jollof",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.10",
"maintainer_email": null,
"keywords": "django react cli scaffolding jwt social-auth",
"author": "Temitope Kayode",
"author_email": "cwt@temilimited.com",
"download_url": "https://files.pythonhosted.org/packages/42/75/c34b9e81199807a6dba6acbeaef99312b4b4bc0276f02d269a8f33cf3c97/django_react_jollof-1.0.1.tar.gz",
"platform": null,
"description": "# \ud83e\udd58 Django-React-Jollof\n\nWelcome to **Django-React-Jollof**! This package scaffolds a full-stack web application with **Django** for the backend and **React** for the frontend. It simplifies the setup process by automating configuration, migration, and installation of necessary dependencies.\n\n---\n\n## \ud83d\udcd6 Table of Contents\n\n1. [Features](#-features)\n2. [Tech Stack](#\ufe0f-tech-stack)\n3. [Getting Started](#-getting-started)\n - [Prerequisites](#-prerequisites)\n - [Installation](#-installation)\n4. [Setting Up the Environment](#setting-up-the-environment)\n5. [Authentication Setup](#-authentication-setup)\n6. [Additional Features](#-additional-features)\n7. [Development Workflow](#-development-workflow)\n8. [Final Project Structure](#final-project-structure)\n9. [Contribution](#-contribution)\n10. [License](#-license)\n11. [Connect with Us](#-connect-with-us)\n12. [Conclusion](#conclusion)\n\n---\n\n## \ud83c\udf1f Features\n\n- **\ud83d\udd27 Full-Stack Scaffolding**: Django + React setup in seconds.\n- **\u26a1 Modern Frontend**: React with Vite for fast development.\n- **\ud83d\udd10 Authentication**: Optional Google login integration.\n- **\ud83c\udfa8 Customizable**: Choose Bootstrap or Material UI for styling.\n- **\ud83d\udce1 API Ready**: Django REST Framework for seamless backend/frontend communication.\n\n---\n\n## \ud83d\udee0\ufe0f Tech Stack\n\n| **Component** | **Technology** |\n| ------------- | --------------------------------------------------- |\n| **Backend** | Django, Django REST Framework |\n| **Frontend** | React, Axios |\n| **Database** | SQLite (default, configurable) |\n| **Styling** | Bootstrap or Material UI |\n| **Tools** | ESLint, Prettier, Vite (for fast React development) |\n\n---\n\n## \ud83d\ude80 Getting Started\n\n### \u2705 Prerequisites\n\nMake sure you have the following installed:\n\n#### **Backend**:\n\n- Python 3.10+\n- pip\n- virtualenv\n\n#### **Frontend**:\n\n- Node.js 20+ (recommended version)\n- npm or Yarn\n\n### \ud83d\udd17 Installation\n\n1. **Create a Virtual Environment**:\n\n Navigate to your project directory and run the following commands to create and activate a virtual environment:\n\n ```bash\n python -m venv env\n ```\n\n **Activate the virtual environment**:\n\n - On Linux/macOS:\n ```bash\n source env/bin/activate\n ```\n - On Windows:\n ```bash\n .\\env\\Scripts\\activate\n ```\n\n2. **Install the Package**:\n\n With the virtual environment activated, install the package via pip:\n\n ```bash\n pip install django-react-jollof\n ```\n\n3. **Run the Setup Command**:\n\n ```bash\n django-react-jollof cook\n ```\n\n During the setup, you will be prompted to provide a project name. Choose your desired name, and it will be automatically configured throughout the app, including:\n\n - App name in the NavBar.\n - The browser tab title for the frontend.\n\n The command will also:\n\n - Set up the Django backend and install necessary requirements.\n - Set up the React frontend and install dependencies.\n - Run database migrations.\n - Configure social login (if selected).\n\n---\n\n## Setting Up the Environment\n\nIn the `frontend/` directory, create a `.env` file:\n\n```plaintext\nVITE_GOOGLE_CLIENT_ID=<your_google_client_id>\n```\n\nTo start the backend server, navigate to the `backend` directory, activate your virtual environment, and run:\n\n```bash\ncd backend\nsource env/bin/activate # For Linux/macOS\n# venv\\Scripts\\activate # For Windows\npython manage.py runserver\n```\n\nThe backend will be available at `http://localhost:8000`.\n\nNext, start the frontend development server. Navigate to the `frontend` directory and run:\n\n```bash\ncd frontend\nnpm run dev\n```\n\nThe React app will be available at `http://localhost:5173`.\n\n---\n\n## \ud83d\udd11 Authentication Setup\n\nTo enable Google login, configure the following in your `.env` files:\n\n**Backend**:\n\n```plaintext\nGOOGLE_CLIENT_ID=<your_google_client_id>\nGOOGLE_CLIENT_SECRET=<your_google_client_secret>\n```\n\n**Frontend**:\n\n```plaintext\nVITE_GOOGLE_CLIENT_ID=<your_google_client_id>\n```\n\nObtain the credentials from the [Google Developer Console](https://console.cloud.google.com/).\n\n---\n\n## \ud83c\udf81 Additional Features\n\n- **Styling Frameworks**: Choose between Bootstrap and Material UI for the frontend.\n- **API Integration**: Powered by Django REST Framework.\n- **CORS**: Pre-configured for frontend-backend communication.\n\n---\n\n## \ud83d\udd04 Development Workflow\n\nEdit backend code in the `backend/` directory and use Django's tools for migrations, testing, and database management. Modify React components in `frontend/src/` and use Vite for hot-reload development.\n\n---\n\n## Final Project Structure\n\n```\nbackend\n\u2502 \u251c\u2500\u2500 backend\n\u2502 \u2502 \u251c\u2500\u2500 __init__.py\n\u2502 \u2502 \u251c\u2500\u2500 asgi.py\n\u2502 \u2502 \u251c\u2500\u2500 settings.py\n\u2502 \u2502 \u251c\u2500\u2500 urls.py\n\u2502 \u2502 \u2514\u2500\u2500 wsgi.py\n\u2502 \u251c\u2500\u2500 db.sqlite3\n\u2502 \u251c\u2500\u2500 manage.py\n\u2502 \u251c\u2500\u2500 requirements.txt\n\u2502 \u2514\u2500\u2500 users\n\u2502 \u251c\u2500\u2500 models.py\n\u2502 \u251c\u2500\u2500 permissions.py\n\u2502 \u251c\u2500\u2500 serializers.py\n\u2502 \u251c\u2500\u2500 tests\n\u2502 \u2502 \u251c\u2500\u2500 __init__.py\n\u2502 \u2502 \u251c\u2500\u2500 test_models.py\n\u2502 \u2502 \u251c\u2500\u2500 test_permissions.py\n\u2502 \u2502 \u251c\u2500\u2500 test_serializers.py\n\u2502 \u2502 \u2514\u2500\u2500 test_views.py\n\u2502 \u251c\u2500\u2500 urls.py\n\u2502 \u2514\u2500\u2500 views.py\nfrontend\n\u2502 \u251c\u2500\u2500 env.d.ts\n\u2502 \u251c\u2500\u2500 index.html\n\u2502 \u251c\u2500\u2500 jsconfig.json\n\u2502 \u251c\u2500\u2500 package-lock.json\n\u2502 \u251c\u2500\u2500 package.json\n\u2502 \u251c\u2500\u2500 public\n\u2502 \u2502 \u2514\u2500\u2500 vite.svg\n\u2502 \u251c\u2500\u2500 src\n\u2502 \u2502 \u251c\u2500\u2500 App.jsx\n\u2502 \u2502 \u251c\u2500\u2500 actions\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 authActions.js\n\u2502 \u2502 \u251c\u2500\u2500 assets\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 react.svg\n\u2502 \u2502 \u251c\u2500\u2500 components\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 Navbar.jsx\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 auth_buttons\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 AuthButtons.jsx\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 GoogleLoginButton.jsx\n\u2502 \u2502 \u251c\u2500\u2500 context\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 AuthContext.jsx\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 ThemeContext.jsx\n\u2502 \u2502 \u251c\u2500\u2500 main.jsx\n\u2502 \u2502 \u251c\u2500\u2500 pages\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 Login.jsx\n\u2502 \u2502 \u2502 \u251c\u2500\u2500 Profile.jsx\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 Register.jsx\n\u2502 \u2502 \u251c\u2500\u2500 services\n\u2502 \u2502 \u2502 \u2514\u2500\u2500 api.js\n\u2502 \u2502 \u2514\u2500\u2500 styles\n\u2502 \u2502 \u2514\u2500\u2500 main.css\n\u2502 \u2514\u2500\u2500 vite.config.js\nLICENSE\nREADME.md\n```\n\n---\n\n## \ud83e\udd1d Contribution\n\n1. Fork the repository.\n2. Clone your fork:\n\n ```bash\n git clone https://github.com/your-username/django-react-jollof.git\n ```\n\n3. Create a branch:\n\n ```bash\n git checkout -b feature/your-feature\n ```\n\n4. Make your changes and commit:\n\n ```bash\n git commit -m \"Add your feature\"\n ```\n\n5. Push to your fork and submit a pull request.\n\n---\n\n## \ud83d\udcdc License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n---\n\n## \ud83d\udce3 Connect with Us\n\nFeel free to open an issue on GitHub for bugs, feature requests, or questions.\n\nIf you find **Django-React-Jollof** helpful, please give the repository a \u2b50 on [GitHub](https://github.com/sir-temi/django-react-jollof). Your support helps us grow and improve!\n\n### \ud83c\udf10 Useful Links\n\n- **Documentation**: [django-react-jollof Docs](https://github.com/sir-temi/django-react-jollof#readme)\n- **Changelog**: [Releases](https://github.com/sir-temi/django-react-jollof/releases)\n- **Bug Tracker**: [Issues](https://github.com/sir-temi/django-react-jollof/issues)\n\n---\n\n## Conclusion\n\nWith **Django-React-Jollof**, building a full-stack app has never been easier! \ud83c\udf72 Let us know what you create!\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A CLI tool to scaffold Django + React projects with options for social login and styling frameworks.",
"version": "1.0.1",
"project_urls": {
"Bug Tracker": "https://github.com/sir-temi/django-react-jollof/issues",
"Changelog": "https://github.com/sir-temi/django-react-jollof/releases",
"Documentation": "https://github.com/sir-temi/django-react-jollof#readme",
"Homepage": "https://github.com/sir-temi/django-react-jollof",
"Source Code": "https://github.com/sir-temi/django-react-jollof"
},
"split_keywords": [
"django",
"react",
"cli",
"scaffolding",
"jwt",
"social-auth"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "fb1a8cf2fe8b9929e9001e4a38363c97baf1e0ba63d9eced55d0c45adfed3422",
"md5": "7c19d152969bb154d924a3ae18ecd318",
"sha256": "af98a0ba6c255db28d19725fd7de98c89f2b5e1481b310e1eb8cad632aa295aa"
},
"downloads": -1,
"filename": "django_react_jollof-1.0.1-py3-none-any.whl",
"has_sig": false,
"md5_digest": "7c19d152969bb154d924a3ae18ecd318",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.10",
"size": 46690,
"upload_time": "2024-12-30T17:41:34",
"upload_time_iso_8601": "2024-12-30T17:41:34.383394Z",
"url": "https://files.pythonhosted.org/packages/fb/1a/8cf2fe8b9929e9001e4a38363c97baf1e0ba63d9eced55d0c45adfed3422/django_react_jollof-1.0.1-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "4275c34b9e81199807a6dba6acbeaef99312b4b4bc0276f02d269a8f33cf3c97",
"md5": "c842597cabda1c169192a7c2ae7017cb",
"sha256": "9ca57b1f0fcae44c1eb25cdc4c5271cc2aa34c3404ae827d0ea48434dfd0986d"
},
"downloads": -1,
"filename": "django_react_jollof-1.0.1.tar.gz",
"has_sig": false,
"md5_digest": "c842597cabda1c169192a7c2ae7017cb",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.10",
"size": 36605,
"upload_time": "2024-12-30T17:41:36",
"upload_time_iso_8601": "2024-12-30T17:41:36.896334Z",
"url": "https://files.pythonhosted.org/packages/42/75/c34b9e81199807a6dba6acbeaef99312b4b4bc0276f02d269a8f33cf3c97/django_react_jollof-1.0.1.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-12-30 17:41:36",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "sir-temi",
"github_project": "django-react-jollof",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [
{
"name": "click",
"specs": [
[
"==",
"8.1.8"
]
]
},
{
"name": "django-allauth",
"specs": [
[
"==",
"65.3.1"
]
]
},
{
"name": "django-cors-headers",
"specs": [
[
"==",
"4.6.0"
]
]
},
{
"name": "djangorestframework",
"specs": [
[
"==",
"3.15.2"
]
]
},
{
"name": "djangorestframework-simplejwt",
"specs": [
[
"==",
"5.3.1"
]
]
},
{
"name": "python-decouple",
"specs": [
[
"==",
"3.8"
]
]
}
],
"lcname": "django-react-jollof"
}
JSON
