[develop->main] frontend refactor phase 1 - migrate to nuxt and ts

.gitignore

@@ -40,9 +40,25 @@ staticfiles/
 # Frontend generated files
 node_modules/
 dist/
+dist-ssr/
+coverage/
+.output/
+.data/
+.nuxt/
+.nitro/
 npm-debug.log*
 yarn-debug.log*
+yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+logs
+*.local
+*.tsbuildinfo
+.eslintcache
+__screenshots__/
+*.timestamp-*-*.mjs
+/cypress/videos/
+/cypress/screenshots/
 
 # Docs generated files
 docs/site/
@@ -54,10 +70,12 @@ infra/env/.env.stg
 apps/backend/env/.env.pro
 apps/backend/env/.env.stg
 
+apps/frontend/.env
+apps/frontend/.env.*
 apps/frontend/.env.local
 apps/frontend/.env.*.local
 !apps/frontend/.env.example
 
 # Observability runtime data
-observability/grafana/data/
-observability/loki/data/
+o11y/grafana/data/
+o11y/loki/data/

README.md

@@ -15,6 +15,33 @@ Observability: **Grafana + Loki + Alloy**
 Proxy: **Treafik**  
 Deployment: **Docker**
 
+[![My Skills](https://skillicons.dev/icons?i=py,django,html,css,tailwind,ts,js,vue,postgres,redis,grafana,docker)](https://skillicons.dev)
+
+## Project Structure
+`app/`: Web Applications
+- **Django** backend
+- **Vue** frontend
+
+`infra/`: Infrastructure
+- docker compose files
+- environment files
+
+`o11y/`: Observability
+- **grafana** config files
+- **loki** config files
+- **alloy** config files
+
+`docs/`: Developer Documentation  
+- **mkdocs**
+
+`.github/`: GitHub Configs
+- **GitHub** Workflows
+
+`Makefile`: Command Shortcuts
+
 ## Developer Documentation
 
-Documents for our developers: [alien-commons-docs](https://lazyalienserver.github.io/alien-commons-docs/)
+> [!Important]
+> This documentation is not yet up-to-date.
+
+Developer Documentation: [AlienCommons Docs](https://lazyalienserver.github.io/alien-commons/)

apps/backend/.dockerignore

@@ -4,6 +4,13 @@ __pycache__/
 *.pid
 *.sock
 *.sqlite3
+.coverage
+htmlcov/
+.pytest_cache/
+.mypy_cache/
+.ruff_cache/
+.cache/
+.idea/
 media/
 staticfiles/
 .venv/

apps/frontend/.dockerignore

@@ -1,8 +1,16 @@
-node_modules/
-dist/
+node_modules
+.nuxt
+.output
+dist
+
+.git
+.idea
+.vscode
+.DS_Store
+
+*.log
+coverage
+
 .env
 .env.*
-!.env.staging
-!.env.production
-*.log
-.DS_Store
+!.env.example

apps/frontend/Dockerfile

@@ -3,12 +3,12 @@ FROM node:23 AS build-stage
 ENV NODE_OPTIONS="--max-old-space-size=512"
 
 COPY package*.json ./
-RUN npm install
+RUN pnpm install
 
 COPY . .
 
 ARG VITE_MODE=production
-RUN npm run build -- --mode ${VITE_MODE}
+RUN pnpm run build -- --mode ${VITE_MODE}
 
 FROM nginx:1.27.4-alpine AS production-stage
 

apps/frontend/README.md

@@ -0,0 +1,31 @@
+# Nuxt Minimal Starter
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+pnpm install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+pnpm build
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```

apps/frontend/app/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

apps/frontend/src/assets/css/app.css → apps/frontend/app/assets/css/app.css

@@ -1,5 +1,5 @@
 /*  Custom tailwind themes, utilities, components, variants and base styles  */
-@import 'tailwindcss';
+@import '@tailwindcss';
 
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 

apps/frontend/src/assets/css/article.css → apps/frontend/app/assets/css/article.css

@@ -1,6 +1,5 @@
 /*  Custom editor styles  */
-@import 'tailwindcss';
-@import 'katex/dist/katex.min.css';
+@import '@tailwindcss';
 
 @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
 

apps/frontend/app/assets/css/main.css

@@ -0,0 +1 @@
+@import "tailwindcss";

apps/frontend/src/assets/css/modal.css → apps/frontend/app/assets/css/modal.css

@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import '@tailwindcss';
 
 @layer components {
     .modal {

apps/frontend/src/components/layout/AppHeader.vue → apps/frontend/app/components/AppHeader.vue

@@ -1,23 +1,13 @@
 <script setup>
 import {ref, computed, onMounted, onBeforeUnmount} from "vue";
 import { RouterLink, useRouter } from "vue-router";
-import { useUserStore, useThemeStore } from "@/features/user/stores";
+import { useUserStore, useThemeStore } from "~/features/users/stores";
 import {
-  YouTubeBlackIcon,
-  GithubIcon,
-  SunIcon,
-  GearIcon,
-  PersonIcon,
-  PersonIconFillLarge,
-  RepoIcon,
-  RocketIcon,
-  SignInIcon,
-  SignOutIcon,
-  XIcon,
-  PlusIcon,
-  TriangleDownIcon,
-} from "@/assets/icons";
-import { WebsiteIcon, LasLogo } from "@/assets";
+  YouTubeBlackIcon, GithubIcon, SunIcon, GearIcon,
+  PersonIcon, PersonIconFillLarge, RepoIcon, RocketIcon,
+  SignInIcon, SignOutIcon, XIcon, PlusIcon, TriangleDownIcon,
+} from "~/assets/icons";
+import { WebsiteIcon, LasLogo } from "@/core/assets";
 import { createSourceArticle } from '@/features/articles/api';
 import { useToast } from "vue-toastification";
 import { useRoute } from "vue-router";
@@ -211,7 +201,7 @@ onBeforeUnmount(() => {
         :class="isSidebarOpen ? 'translate-x-0' : 'translate-x-full'"
     >
 
-      <!-- If user has signed in -->
+      <!-- If users has signed in -->
       <div v-if="userInfo">
         <div class="absolute top-0 right-0 mt-8 mr-9 p-1 rounded-md hover:cursor-pointer hover:bg-gray-200 dark:hover:bg-[#2C2C2C]" @click="toggleSidebar">
           <XIcon class="sidebar-icon"/>
@@ -259,7 +249,7 @@ onBeforeUnmount(() => {
         </div>
       </div>
 
-      <!-- If user has not signed in -->
+      <!-- If users has not signed in -->
       <div v-else>
         <div class="flex flex-col gap-5 p-6">
           <div class="flex flex-row items-center gap-2">

apps/frontend/src/components/base/BaseModal.vue → apps/frontend/app/components/BaseModal.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { watch, onMounted, onBeforeUnmount } from 'vue'
 
 const props = defineProps({
@@ -72,4 +72,8 @@ onBeforeUnmount(() => {
       </div>
     </div>
   </Teleport>
-</template>
+</template>
+
+<style scoped>
+
+</style>

apps/frontend/src/components/static/HeroSection.vue → apps/frontend/app/components/HeroSection.vue

@@ -1,8 +1,8 @@
-<script setup>
+<script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
-import { getChannelSnapshot } from "@/api";
-import { extractErrorMessage } from "@/utils";
-import { WebsiteIcon } from "@/assets"
+import { getChannelSnapshot } from "@/core/api";
+import { extractErrorMessage } from "@/core/utils";
+import { WebsiteIcon } from "~/assets/logos"
 
 const snapshot = ref({})
 let intervalId = null
@@ -69,4 +69,4 @@ onUnmounted(() => {
 
     <WebsiteIcon class="w-70 h-70 fill-current"/>
   </div>
-</template>
+</template>

apps/frontend/src/api/axiosInstance.js → apps/frontend/app/composables/api/axiosInstance.ts

@@ -1,6 +1,6 @@
 import axios from 'axios'
-import { useUserStore } from "@/features/user/stores/useUserStore";
-import { getRefreshToken } from '@/utils'
+import { useUserStore } from "~/features/users/stores/useUserStore";
+import { getRefreshToken } from '@/core/utils'
 
 const api = axios.create({
     baseURL: `${import.meta.env.VITE_API_BASE_URL}/api/v1`,
@@ -93,7 +93,7 @@ api.interceptors.response.use(
 );
 
 
-// for requests outside the user system
+// for requests outside the users system
 const apiBare = axios.create({
     baseURL: `${import.meta.env.VITE_API_BASE_URL}/api/v1`,
     timeout: 10000,

apps/frontend/src/features/articles/api/article.js → apps/frontend/app/features/articles/api/article.ts

@@ -1,4 +1,4 @@
-import { api } from '@/api'
+import { api } from '@/core/api'
 
 
 function getMySourceArticles(query = undefined) {

apps/frontend/src/features/user/api/user.js → apps/frontend/app/features/users/api/user.ts

@@ -1,4 +1,4 @@
-import { api, apiBare } from '@/api'
+import { api, apiBare } from '@/core/api'
 
 function createProfile(email, password, confirmPassword) {
     return apiBare.post('/profiles/', {

apps/frontend/src/features/user/components/LoginForm.vue → apps/frontend/app/features/users/components/LoginForm.vue

@@ -1,9 +1,9 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useUserStore } from '@/features/user/stores';
 import { useToast } from "vue-toastification";
-import { MailIcon, KeyIcon } from "@/assets/icons"
+import { MailIcon, KeyIcon } from "@/core/assets/icons"
 
 const toast = useToast();
 const router = useRouter();

apps/frontend/src/features/user/components/LogoutCard.vue → apps/frontend/app/features/users/components/LogoutCard.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from "vue";
 import { useUserStore } from "@/features/user/stores";
 import { handleLogout } from "@/features/user/utils";

apps/frontend/src/features/user/components/Profile.vue → apps/frontend/app/features/users/components/Profile.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useUserStore } from "@/features/user/stores";
 import { RouterLink } from "vue-router";
 import { computed } from 'vue'

apps/frontend/src/features/user/components/RegisterForm.vue → apps/frontend/app/features/users/components/RegisterForm.vue

@@ -1,9 +1,9 @@
-<script setup>
+<script setup lang="ts">
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { createProfile } from '@/features/user/api'
 import { useToast } from "vue-toastification";
-import { MailIcon, KeyIcon } from "@/assets/icons"
+import { MailIcon, KeyIcon } from "@/core/assets/icons"
 
 const router = useRouter();
 const toast = useToast();

apps/frontend/src/features/user/components/SettingSideBar.vue → apps/frontend/app/features/users/components/SettingSideBar.vue

@@ -1,6 +1,6 @@
-<script setup>
+<script setup lang="ts">
 import { useUserStore } from "@/features/user/stores";
-import { PaintBrushIcon } from "@/assets/icons"
+import { PaintBrushIcon } from "@/core/assets/icons"
 import { computed } from "vue";
 import { RouterLink } from "vue-router";
 

apps/frontend/src/features/user/components/ThemeSetting.vue → apps/frontend/app/features/users/components/ThemeSetting.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useThemeStore } from "@/features/user/stores";
 
 const themeStore = useThemeStore();

apps/frontend/src/features/user/components/UserInfoCard.vue → apps/frontend/app/features/users/components/UserInfoCard.vue

@@ -1,9 +1,9 @@
-<script setup>
+<script setup lang="ts">
 import { ref, computed } from "vue";
 import { useUserStore } from "@/features/user/stores";
 import { updateAvatar, updateUsername } from "@/features/user/api";
 import { useToast } from "vue-toastification";
-import { PencilIcon, PersonIcon, MailIcon, RocketIcon } from "@/assets/icons"
+import { PencilIcon, PersonIcon, MailIcon, RocketIcon } from "@/core/assets/icons"
 
 const toast = useToast();
 const userStore = useUserStore();