🥘 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
2. Tech Stack
3. Getting Started
   • Prerequisites
   • Installation
4. Setting Up the Environment
5. Authentication Setup
6. Additional Features
7. Development Workflow
8. Final Project Structure
9. Contribution
10. License
11. Connect with Us
12. 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:

   python -m venv env
   

   Activate the virtual environment:

   • On Linux/macOS:

     source env/bin/activate
     

   • On Windows:

     .\env\Scripts\activate
     

2. Install the Package:

   With the virtual environment activated, install the package via pip:

   pip install django-react-jollof
   

3. Run the Setup Command:

   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:

VITE_GOOGLE_CLIENT_ID=<your_google_client_id>

To start the backend server, navigate to the backend directory, activate your virtual environment, and run:

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:

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:

GOOGLE_CLIENT_ID=<your_google_client_id>
GOOGLE_CLIENT_SECRET=<your_google_client_secret>

Frontend:

VITE_GOOGLE_CLIENT_ID=<your_google_client_id>

Obtain the credentials from the Google Developer Console.

---

🎁 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:

   git clone https://github.com/your-username/django-react-jollof.git
   

3. Create a branch:

   git checkout -b feature/your-feature
   

4. Make your changes and commit:

   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 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. Your support helps us grow and improve!

🌐 Useful Links

• Documentation: django-react-jollof Docs
• Changelog: Releases
• Bug Tracker: Issues

---

Conclusion

With Django-React-Jollof, building a full-stack app has never been easier! 🍲 Let us know what you create!