Skip to content

Latest commit

 

History

History
297 lines (204 loc) · 8.51 KB

README.md

File metadata and controls

297 lines (204 loc) · 8.51 KB

Python IDLE Django DRF JWT alt text Vite React Tailwind Axios NodeJS

🚀✨ Django Vite React Tailwind Project ✨🚀

A full-stack web application for managing products with 🔐 User Authentication and Authorization. ✨ Built with Django | Django REST Framework for the backend and Vite | React | Tailwind CSS for the frontend. ⚡ fully Optimized Code with Fully Responsive Desing for all devices! 🖥️📱

🌟 Features

User Authentication

  • 👤 Register: Create a new user account.
  • 🔑 Login: Authenticate and access the system.
  • 🚪 Logout: Securely log out of the system.

Product Management

  • ➕ Add Product: Add a new product to the system.
  • 🗑️ Delete Product: Remove a product from the system.
  • ✏️ Edit Product: Update product details (only the author can edit).
  • 👀 View Products: Browse all products in the system.
  • 🔎 Search Products: Search products by name, id, description.

Authorization

  • 🔒 Only the author of a product can edit or delete it.
  • 🔓 All users can view the product list

🛠️ Tech Stack

🔙 Backend

  • 🐍 Python: Programming language.
  • 🎯 Django: Web framework.
  • 🔄 Django REST Framework (DRF): For building RESTful APIs.
  • 🔐 Simple JWT: For JSON Web Token authentication.
  • 💾 SQLite (Default): Lightweight disk-based database (easily swappable).

🔝 Frontend

  • ⚡ Vite: Fast build tool for React.
  • ⚛️ React: JavaScript library for building user interfaces.
  • 🎨 Tailwind CSS: Utility-first CSS framework for styling.
  • 🔄 Axios: For making HTTP requests to the backend.
  • 📦 Node.js/npm: JavaScript runtime and package manager.

🚀 Getting Started

📋 Prerequisites

  • 🐍 Python 3.x installed.
  • 📦 Node.js and npm (or yarn) installed.
  • 💾 Database Setup:
    • The project uses SQLite by default (no extra setup needed).
    • If using PostgreSQL: Ensure PostgreSQL is installed and running. You might also need C++ build tools installed on your system (build-essential on Debian/Ubuntu, Build Tools for Visual Studio on Windows) for the psycopg2 package.

⚙️ Backend Setup

  1. Clone the repository:
git clone https://github.com/kevinThulnith/django-vite-react-tailwind-project.git
  1. Create a virtual environment:
python -m venv venv
source venv/bin/activate  # On Windows: .\venv\Scripts\activate
  1. Install dependencies:
  • install postgressSQL and c++ buid tool first.
pip install -r requirements.txt
  1. Run migrations:
python manage.py migrate
  1. Start the Django development server:
python manage.py runserver
  1. Access the backend API at:
http://localhost:8000/

⚙️ Frontend Setup

  1. Navigate to the frontend directory:
cd ../frontend
  1. Install dependencies:
npm install
  1. Configure API Base URL:
    • Create a .env file in the frontend directory if it doesn't exist, and set the backend API URL:
VITE_API_BASE_URL=http://localhost:8000
  1. Start the Vite development server:
npm run dev
  1. Access the frontend at:
http://localhost:5173/

🌐 Hosting on Local Network

To access the application from other devices on your local network:

  1. Get device Ip address

    • Windows: ipconfig (Look for "IPv4 Address" under your active network adapter)
    • macOS: ipconfig getifaddr en0 (or en1 for Wi-Fi)
    • Linux: ip addr show (Look for inet under your active network interface)

  2. Start bachend

py .\manage.py runserver <Device Ip address>:8000

  1. Start frontend

    • change .env file fist
npx vite --host {Device Ip Address}

📂 Project Structure

Backend

backend/
├── manage.py
├── products/
│   ├── models.py          # Product model
│   ├── serializers.py     # Product serializer
│   ├── views.py           # Product views
│   └── urls.py            # Product URLs
├── users/
│   ├── models.py          # User model
│   ├── serializers.py     # User serializer
│   ├── views.py           # User views
│   └── urls.py            # User URLs
└── settings.py            # Django settings

Frontend

frontend/
├── src/
│   ├── components/        # Reusable components
│   ├── pages/             # Pages (Login, Register, Product List, etc.)
│   ├── api/               # Axios API calls
│   ├── App.jsx            # Main application component
│   └── main.jsx           # Entry point
├── public/                # Static assets
└── tailwind.config.js     # Tailwind CSS configuration

🔐 Authentication Flow

  • Register: A new user provides credentials (e.g., username, email, password) via the frontend form.

  • API Call: Frontend sends a POST request to /api/user/register/.

  • Backend: Creates the new user in the database.

  • Login: User provides login credentials.

  • API Call: Frontend sends a POST request to /api/token/ (Simple JWT endpoint).

  • Backend: Verifies credentials, generates access and refresh JWT tokens, and returns them.

  • Frontend: Stores the tokens (e.g., in local storage or memory) and uses the access token in the Authorization: Bearer <token> header for subsequent protected requests.

  • Protected Routes: Frontend routes/components check for a valid token before rendering. API requests to protected endpoints are validated by the backend using the token.

  • Logout: User clicks logout.

  • API Call: Frontend sends a POST request to /api/token/blacklist/ with the refresh token (optional but good practice).

  • Frontend: Removes tokens from storage, redirecting the user (e.g., to the login page).

🛒 Product Management Flow

  • Edit Product: Only the author of a product can edit its details.
  • Delete Product: Only the author of a product can delete it.
  • Add Product: Authenticated users can add a new product.
  • View Products: All users can view the list of products.
  • Search products: All users can search the list of products.

🧪 Testing

Backend

  • Run the Django test suite:
python manage.py test

Frontend

  • Run the React tests:
npm test

📝 API Endpoints

Users

  • POST /api/user/register/ - Register a new user.
  • POST /api/token/ - Log in and get an authentication token.
  • POST /api/token/blacklist/ - Log out and invalidate the token.

Products

  • GET /api/products/all/ - Get a list of all products.
  • POST /api/products/ - Add a new product (authenticated users only).
  • GET /api/products/<id>/ - Get details of a specific product.
  • PUT /api/products/update/<id>/ - Update a product (author only).
  • DELETE /api/products/delete/<id>/ - Delete a product (author only).

📸 Screenshots

Login Page

Product List

Add Product

Update Product

🤝 Contributing

Contributions are welcome! Please follow these steps:

  • Fork the repository.
  • Create a new branch (git checkout -b feature/YourFeature).
  • Commit your changes (git commit -m 'Add some feature').
  • Push to the branch (git push origin feature/YourFeature).
  • Open a pull request.

📜 License

This project is licensed under the MIT License. See the LICENSE file for details. 🙏 Acknowledgments

  • Django REST Framework for the powerful backend.
  • Vite and React for the blazing-fast frontend.
  • Tailwind CSS for the beautiful and responsive design.

Made with ❤️ by Kevin Thulnith 🚀 Happy coding! 🚀