Vue.js Authentication with Django REST Framework

This project demonstrates authentication in Vue.js using Django REST Framework (DRF). Key concepts include Vue's watch function, Vue Router, and DRF setup.

---

Public Boilerplate

Both the frontend and backend are publicly available for anyone to use as a boilerplate for their own projects.

---

Atomic Design Methodology

For scalable and maintainable Vue applications, the Atomic Design methodology organizes components into a hierarchy:

• Atoms: Basic UI elements (e.g., buttons, icons)
• Molecules: Groups of atoms (e.g., search bars)
• Organisms: Complex components (e.g., navigation bars)
• Templates: Layouts displaying component structure
• Pages: Actual UI screens with real data

This structure supports smooth transitions from simple to complex components.

---

Frontend Structure

/src
├── components
│   ├── atoms
│   │   ├── AtomButton.vue
│   │   └── AtomIcon.vue
│   ├── molecules
│   │   ├── MoleculeSearchInput.vue
│   │   └── MoleculePokemonThumbnail.vue
│   ├── organisms
│   │   ├── OrganismPokemonCard.vue
│   │   └── OrganismHeader.vue
│   ├── templates
│   │   ├── TemplatePokemonList.vue
│   │   └── TemplatePokemonDetail.vue
├── pages
│   ├── PageHome.vue
│   └── PagePokemonDetail.vue
├── composables
│   └── usePokemon.js
├── utils
│   └── validators.js
├── layout
│   ├── LayoutDefault.vue
│   └── LayoutAdmin.vue
├── plugins
│   └── translate.js
├── router
│   └── index.js
├── store
│   └── index.js
├── assets
│   ├── images
│   └── styles
├── tests
│   └── ...
├── App.vue
└── main.js

---

Backend Structure

(Add Django backend structure details here as needed)

---

User Stories

Project Management

• Users can upload projects:
  • project_id
  • project_title
  • project_status
  • project_detail
  • project_deadline (status updates based on deadline)
  • user_id
  • workspace_id

Workspace Collaboration

• Users can create or join workspaces:
  • workspace_id
  • workspace_name
  • workspace_owner (creator)
  • workspace_members (list of users with roles)

---

For further details, see the documentation or source code.