https://github.com/aalug/recipe-app-drf-vue
Django REST framework and Vue.js recipe app
https://github.com/aalug/recipe-app-drf-vue
api backend django djangorestframework docker drf frontend full-stack pinia postgres python rest-api typescript vue vuejs vuetify
Last synced: about 1 hour ago
JSON representation
Django REST framework and Vue.js recipe app
- Host: GitHub
- URL: https://github.com/aalug/recipe-app-drf-vue
- Owner: aalug
- Created: 2023-01-10T21:00:36.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-22T18:46:16.000Z (over 2 years ago)
- Last Synced: 2025-03-14T12:45:11.198Z (4 months ago)
- Topics: api, backend, django, djangorestframework, docker, drf, frontend, full-stack, pinia, postgres, python, rest-api, typescript, vue, vuejs, vuetify
- Language: Python
- Homepage:
- Size: 155 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Django REST framework and Vue.js recipe app
The app is built with the **Django REST framework** on the backend and **Vue.js** on the frontend.
DRF backend uses:
- Docker
- Postgres
- drf-spectacular for documentation
Vue frontend uses:
- Vue 3
+ TypeScript
+ Composition API
- Pinia
- Vuetify
## Getting started
1. Clone the repository.
2. To run the backend app:
1) In the main project directory, run in the terminal `cd drf_backend`
2) Rename `.env.sample` to `.env` and replace the values
3) Then run `docker-compose up --build`
4) Now everything should be set up and app's documentation available on http://localhost:8000/api/docs/
3. To run the frontend app:
1) In the main project directory, run in the terminal `cd vue_frontend`
2) Rename `.env.sample` to `.env` and replace the values
3) Run in the terminal `yarn` or `npm install`
4) Then run: `yarn dev` or `npm run dev`
5) Now, app should be running at http://localhost:3000/
## Testing
To run DRF tests:
1. If containers are not running, run in your terminal (in `drf_backend` directory) `docker-compose up`
2. In the second terminal tab, run `docker ps` and get the ID of the app container
3. Run `docker exec -itu 0 sh` to get access to the container's shell as a root user
4. Run `python manage.py test` to run all tests or `python manage.py test .tests` to run tests for a specific
app.
## API Endpoints
**User app**
- Use `/api/user/create/` to create a new user
- Then use `/api/user/token/` to create a token for the created user
- Use `/api/user/me/` to retrieve and update user details
**Recipe app**
- Use `/api/recipe/recipes/` to create a new recipe and retrieve all recipes
- Use `/api/recipe/recipes/{id}/` to see recipe details, update and delete a recipe
- Use `/api/recipe/recipes/{id}/upload-image/` to upload recipe image
- Use `/api/recipe/tags/` to retrieve all tags
- Use `/api/recipe/tags/{id}/` to update and delete a tag
- Use `/api/recipe/ingredients/` to retrieve all ingredients
- Use `/api/recipe/ingredients/{id}/` to update and delete an ingredient
More information about API endpoints, with examples of data that needs to be sent with a request, can be found
on http://localhost:8000/api/docs/
### More Information
This DRF app uses djangorestframework-camel-case to enable the server to send and receive data in a format that is compatible with TypeScript. This package provides support for camel-case style serialization and deserialization, which is appropriate for the conventions used in Vue.js.