diff --git a/README.md b/README.md
index 4390707..261e612 100644
--- a/README.md
+++ b/README.md
@@ -4,5 +4,10 @@ This template is used in the [Building An Activity](https://discord.com/develope
Read more about building Discord Activities with the Embedded App SDK at [https://discord.com/developers/docs/activities/overview](https://discord.com/developers/docs/activities/overview).
-# web-app
-# web-app
+# installation
+WIP
+
+run
+npm run dev in ./server and ./client
+cloudflared tunnel --url http://localhost:5173
+then fix the discord app and vite.config.js
diff --git a/client/App.jsx b/client/App.jsx
index ae5eaa7..465ccc8 100644
--- a/client/App.jsx
+++ b/client/App.jsx
@@ -1,133 +1,18 @@
-import React, { useState, useEffect } from 'react';
-import { DiscordSDK } from '@discord/embedded-app-sdk';
+import React from 'react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import AppProject from './components/pages/Project';
import './styles/sidebar.css';
import './index.css';
-import Interface from './components/Interface.jsx';
-import Calendar from './components/Calendar.jsx';
-import Task from './components/Task.jsx';
-import Board from './components/Board.jsx';
-import SettingsPopup from './components/Settings.jsx';
-import ProjectPopup from './components/ProjectPopup.jsx';
-import ConfirmationPopup from './components/ConfirmationPopup.jsx';
-import TaskLabel from './components/TaskLabel.jsx';
-import BoardProject from './components/BoardProject.jsx';
-import List from './components/List.jsx';
-import Member from './components/Member.jsx';
-
-const App = () => {
- const [discordSdk, setDiscordSdk] = useState(null);
- const [user, setUser] = useState(null);
- const [isConfirmationVisible, setIsConfirmationVisible] = useState(false);
- const [labelPopupVisible, setLabelPopupVisible] = useState(false);
-
- useEffect(() => {
- const setupDiscordSdk = async () => {
- try {
- const discordClientId = import.meta.env.VITE_DISCORD_CLIENT_ID;
- const discordClientSecret = import.meta.env.VITE_DISCORD_CLIENT_SECRET;
-
- if (!discordClientId || !discordClientSecret) {
- throw new Error('Discord Client ID or Client Secret is missing');
- }
-
- console.log('Setting up Discord SDK...');
-
- // Initialize Discord SDK
- const sdk = new DiscordSDK(discordClientId);
- await sdk.ready();
-
- console.log('Discord SDK Ready...');
-
- // Authorize with Discord OAuth
- const { code } = await sdk.commands.authorize({
- client_id: discordClientId,
- response_type: 'code',
- state: '',
- prompt: 'none',
- scope: ['identify', 'guilds', 'applications.commands'],
- });
-
- console.log('Authorization code received...');
-
- // Exchange authorization code for access token
- const response = await fetch('/api/token', {
- method: 'POST',
- headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ code }),
- });
-
- if (!response.ok) {
- throw new Error('Failed to fetch access token');
- }
-
- const { access_token } = await response.json();
- console.log('Access Token received...');
-
- // Authenticate with Discord SDK using the access token
- await sdk.commands.authenticate({ access_token });
-
- console.log('Authentication successful...');
-
- // Fetch the user profile
- const userProfile = await fetchUserProfile(access_token);
- console.log('User Profile:', userProfile);
-
- setUser({
- username: userProfile.username,
- avatarUrl: `https://cdn.discordapp.com/avatars/${userProfile.id}/${userProfile.avatar}.png`,
- });
-
- setDiscordSdk(sdk);
- } catch (error) {
- console.error('Error setting up Discord SDK:', error);
- }
- };
-
- const fetchUserProfile = async (token) => {
- const response = await fetch('https://discord.com/api/users/@me', {
- headers: { Authorization: `Bearer ${token}` },
- });
- if (!response.ok) {
- throw new Error('Failed to fetch user profile');
- }
- return await response.json();
- };
-
- setupDiscordSdk();
- }, []);
-
- const handleConfirmation = () => {
- setIsConfirmationVisible(false);
- };
-
- if (!user) {
- console.log('User data is still loading...');
- return Loading...
;
- }
-
- return (
-
-
-
-
-
-
-
-
setIsConfirmationVisible(false)}
- />
- console.log('Selected label:', label)}
- onClose={() => setLabelPopupVisible(false)}
- />
-
-
-
+// Example components for different routes
+
+const App = () => (
+
+
+
+ } />
+
- );
-};
+
+);
-export default App;
+export default App;
\ No newline at end of file
diff --git a/client/components/pages/Project.jsx b/client/components/pages/Project.jsx
new file mode 100644
index 0000000..bdf7d66
--- /dev/null
+++ b/client/components/pages/Project.jsx
@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react';
+import { DiscordSDK } from '@discord/embedded-app-sdk';
+import Interface from '../Interface.jsx';
+import Calendar from '../Calendar.jsx';
+import Task from '../Task.jsx';
+import Board from '../Board.jsx';
+import SettingsPopup from '../Settings.jsx';
+import ProjectPopup from '../ProjectPopup.jsx';
+import ConfirmationPopup from '../ConfirmationPopup.jsx';
+import TaskLabel from '../TaskLabel.jsx';
+import BoardProject from '../BoardProject.jsx';
+import List from '../List.jsx';
+import Member from '../Member.jsx';
+
+const Project = () => {
+ const [discordSdk, setDiscordSdk] = useState(null);
+ const [user, setUser] = useState(null);
+ const [isConfirmationVisible, setIsConfirmationVisible] = useState(false);
+ const [labelPopupVisible, setLabelPopupVisible] = useState(false);
+
+ useEffect(() => {
+ const setupDiscordSdk = async () => {
+ try {
+ const discordClientId = import.meta.env.VITE_DISCORD_CLIENT_ID;
+
+ if (!discordClientId) {
+ throw new Error('Discord Client ID is missing');
+ }
+
+ console.log('Setting up Discord SDK...');
+
+ // Initialize Discord SDK
+ const sdk = new DiscordSDK(discordClientId);
+ await sdk.ready();
+
+ console.log('Discord SDK Ready...');
+
+ // Authorize with Discord OAuth
+ const { code } = await sdk.commands.authorize({
+ client_id: discordClientId,
+ response_type: 'code',
+ state: '',
+ prompt: 'none',
+ scope: ['identify', 'guilds', 'applications.commands'],
+ });
+
+ console.log('Authorization code received...');
+
+ // Exchange authorization code for access token
+ const response = await fetch('/.proxy/api/api/v1/token', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ code }),
+ });
+
+ if (!response.ok) {
+ throw new Error('Failed to fetch access token');
+ }
+
+ const { access_token } = await response.json();
+ console.log('Access Token received...');
+
+ // Authenticate with Discord SDK using the access token
+ await sdk.commands.authenticate({ access_token });
+
+ console.log('Authentication successful...');
+
+ // Fetch the user profile
+ const userProfile = await fetchUserProfile(access_token);
+ console.log('User Profile:', userProfile);
+
+ setUser({
+ username: userProfile.username,
+ avatarUrl: `https://cdn.discordapp.com/avatars/${userProfile.id}/${userProfile.avatar}.png`,
+ });
+
+ setDiscordSdk(sdk);
+ } catch (error) {
+ console.error('Error setting up Discord SDK:', error);
+ }
+ };
+
+ const fetchUserProfile = async (token) => {
+ const response = await fetch('https://discord.com/api/users/@me', {
+ headers: { Authorization: `Bearer ${token}` },
+ });
+ if (!response.ok) {
+ throw new Error('Failed to fetch user profile');
+ }
+ return await response.json();
+ };
+
+ setupDiscordSdk();
+ }, []);
+
+ const handleConfirmation = () => {
+ setIsConfirmationVisible(false);
+ };
+
+ if (!user) {
+ console.log('User data is still loading...');
+ return Loading...
;
+ }
+
+ return (
+
+
+
+
+
+
+
+
setIsConfirmationVisible(false)}
+ />
+ console.log('Selected label:', label)}
+ onClose={() => setLabelPopupVisible(false)}
+ />
+
+
+
+