Merge pull request #21 from hardworking-toptal-dev/code_revamp

Code revamp

.gitignore

@@ -135,7 +135,7 @@ flycheck_*.el
 *.webp
 
 # Portable Network Graphics
-*.png
+# *.png
 
 # Animated Portable Network Graphics
 *.apng

Makefile.toml

@@ -36,13 +36,18 @@ script = '''
 npm run build --workspace=packages/app
 '''
 
+[tasks.build-frontend]
+script = '''
+npm run build --workspace=packages/frontend
+'''
+
 [tasks.build-backend]
 script = '''
 cargo build -p backend --release
 '''
 
 [tasks.build]
-dependencies = ["build-server", "build-bindings", "build-app", "build-backend"]
+dependencies = ["build-server", "build-bindings", "build-app","build-frontend", "build-backend"]
 
 [tasks.clean-server]
 script = '''
@@ -60,19 +65,32 @@ rm -rf packages/app/dist
 rm -rf packages/app/assets/wasm
 '''
 
+[tasks.clean-frontend]
+script = '''
+rm -rf packages/frontend/.next
+'''
+
 [tasks.clean]
-dependencies = ["clean-server", "clean-app"]
+dependencies = ["clean-server", "clean-app", "clean-frontend"]
 
 [tasks.format]
 script = '''
 cargo +nightly fmt --all
 '''
 
-[tasks.run]
+[tasks.run-server]
 script = '''
-./target/release/backend --frontend_folder packages/app/dist --port 9000
+./target/release/backend --frontend_folder packages/app/dist --port 4444
 '''
 
+[tasks.run-frontend]
+script = '''
+npm run start --workspace=packages/frontend
+'''
+
+[tasks.run]
+run_task = { name = ["run-server", "run-frontend"], parallel = true }
+
 [tasks.test-backend]
 script = '''
 cargo test
@@ -83,8 +101,13 @@ script = '''
 npm run test --workspace=packages/app
 '''
 
+[tasks.test-frontend]
+script = '''
+npm run test --workspace=packages/frontend
+'''
+
 [tasks.test]
-dependencies = ["test-backend", "test-app"]
+dependencies = ["test-backend", "test-app", "test-frontend"]
 
 [tasks.docker-build]
 script = '''

package.json

@@ -1,7 +1,8 @@
 {
   "private": true,
   "workspaces": [
-    "packages/app"
+    "packages/app",
+    "packages/frontend"
   ],
   "scripts": {
     "test": "npm run test --workspaces"

packages/app/src/app.ts

@@ -166,7 +166,7 @@ export default class App {
       (async () => {
         const result = await compileRequest(
           // FIXME: This should be configurable
-          { compileUrl: "http://localhost:9000/compile" },
+          { compileUrl: "http://localhost:4444/compile" },
           { source: code }
         );
 

packages/frontend/.eslintrc.json

@@ -0,0 +1,16 @@
+{
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-extra-semi": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "prefer-const": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off"
+  },
+
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

packages/frontend/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

packages/frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

packages/frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

packages/frontend/next.config.ts

@@ -0,0 +1,19 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  async rewrites() {
+    return [
+      {
+        source: "/compile",
+        destination: "http://localhost:4444/compile",
+      },
+      {
+        source: "/health",
+        destination: "http://localhost:4444/health",
+      },
+    ];
+  },
+};
+
+export default nextConfig;

packages/frontend/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@statelyai/inspect": "^0.4.0",
+    "@xstate/store": "^2.6.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "debounce": "^2.2.0",
+    "immer": "^10.1.1",
+    "jotai": "^2.10.3",
+    "json-rpc-2.0": "^1.3.0",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.468.0",
+    "monaco-editor": "^0.52.2",
+    "monaco-editor-core": "^0.52.2",
+    "monaco-languageclient": "^1.0.1",
+    "nanoid": "^5.0.9",
+    "next": "15.0.3",
+    "next-themes": "^0.4.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.4.0",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7",
+    "vscode-languageserver-protocol": "^3.17.5",
+    "zustand": "^5.0.2"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3",
+    "postcss": "^8",
+    "sass": "^1.83.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.7.2"
+  }
+}

packages/frontend/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;