A full-stack web application built with React + Vite for the frontend and Django (with Django REST Framework) for the backend. The app supports JWT-based authentication, responsive UI, and API-driven interactions.
- 🔗 Frontend: Ghost App Frontend
- 🔗 Backend API: Ghost API Docs
- JWT (JSON Web Token): Used for secure user authentication and route protection.
- Access/Refresh Tokens: Refresh mechanism to maintain long-lived sessions securely.
- Axios Interceptors: Automatically attach access tokens and refresh when expired.
- Implemented in input fields (e.g., search or login forms) to reduce API calls by waiting until user stops typing.
- Helps improve performance and reduce unnecessary requests.
- Built using Axios to handle all frontend API requests with base URL from
VITE_API_BASE_URL. - Error handling and success notifications managed via
react-toastify.
- React Router DOM for client-side routing.
- Route protection using a custom
PrivateRoutecomponent that checks JWT tokens.
- Custom Hooks:
useAuth,useDebouncefor managing authentication and input behavior. - Component-Based Structure: Clean and scalable layout with modular reusable components like
Input,Button,Navbar, etc.
- Utilized React Context API for managing user auth state across the app.
- CI/CD via Render for both frontend (static site) and backend (web service).
- Environment variables used to manage API base URLs and secrets securely.
- React.js
- TypeScript
- Vite
- React Router
- Axios
- React Toastify
- JWT Client Authentication
- Python 3
- Django
- Django REST Framework
- Simple JWT
- PostgreSQL (Render)
- Clone the repo and go into the
backend/directory.
cd backend
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
pip install -r requirements.txt
python manage.py migrate
python manage.py runserver#💻 Frontend Setup Go into the frontend/ folder and install dependencies:
bash
cd frontend
npm install
npm run dev