feat: use Next.js 13 App directory

front/app/_orgs/[orgslug]/collections/new/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { Title } from "../../../../../components/UI/Elements/Styles/Title";
+import Layout from "../../../../../components/UI/Layout";
+import { getOrganizationContextInfo } from "../../../../../services/orgs";
+import { getOrgCourses } from "../../../../../services/courses/courses";
+import { createCollection } from "../../../../../services/collections";
+
+function NewCollection(params : any) {
+  const orgslug = params.params.orgslug;
+  const [name, setName] = React.useState("");
+  const [org, setOrg] = React.useState({}) as any;
+  const [description, setDescription] = React.useState("");
+  const [selectedCourses, setSelectedCourses] = React.useState([]) as any;
+  const [courses, setCourses] = React.useState([]) as any;
+  const [isLoading, setIsLoading] = React.useState(false);
+  const router = useRouter();
+
+  async function getCourses() {
+  
+    setIsLoading(true);
+    const org = await getOrganizationContextInfo(orgslug);
+    setOrg(org);
+    const courses = await getOrgCourses(org.org_id);
+    setCourses(courses);
+    setIsLoading(false);
+  }
+
+  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+
+  const handleDescriptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setDescription(event.target.value);
+  };
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    console.log("selectedCourses", selectedCourses);
+    const collection = {
+      name: name,
+      description: description,
+      courses: selectedCourses,
+      org_id: org.org_id,
+    };
+    await createCollection(collection);
+    router.push("/org/" + orgslug + "/collections");
+  };
+
+  React.useEffect(() => {
+    if (params.params.orgslug) {
+      getCourses();
+    }
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params.params.orgslug]);
+
+  return (
+    <Layout>
+      <Title>Add new</Title>
+      <br />
+      <input type="text" placeholder="Name" value={name} onChange={handleNameChange} />
+      {isLoading ? (
+        <p>Loading...</p>
+      ) : (
+        <div>
+          {courses.map((course: any) => (
+            <div key={course.course_id}>
+              <input
+                type="checkbox"
+                id={course.course_id}
+                name={course.course_id}
+                value={course.course_id}
+                onChange={(e) => {
+                  if (e.target.checked) {
+                    setSelectedCourses([...selectedCourses, e.target.value]);
+                  } else {
+                    setSelectedCourses(selectedCourses.filter((item: any) => item !== e.target.value));
+                  }
+                }}
+              />
+              <label htmlFor={course.course_id}>{course.name}</label>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <br />
+      <input type="text" placeholder="Description" value={description} onChange={handleDescriptionChange} />
+      <br />
+      <button onClick={handleSubmit}>Submit</button>
+    </Layout>
+  );
+}
+
+export default NewCollection;

front/app/_orgs/[orgslug]/collections/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+import Layout from "../../../../components/UI/Layout";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React from "react";
+import styled from "styled-components";
+import { Title } from "../../../../components/UI/Elements/Styles/Title";
+import { deleteCollection, getOrgCollections } from "../../../../services/collections";
+import { getOrganizationContextInfo } from "../../../../services/orgs";
+import { getBackendUrl } from "../../../../services/config";
+
+function Collections(params:any) {
+  const orgslug = params.params.orgslug;
+
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [collections, setCollections] = React.useState([]);
+
+  async function fetchCollections() {
+    setIsLoading(true);
+    const org = await getOrganizationContextInfo(orgslug);
+    const collections = await getOrgCollections(org.org_id);
+    setCollections(collections);
+    setIsLoading(false);
+  }
+
+  async function deleteCollectionAndFetch(collectionId: number) {
+    setIsLoading(true);
+    await deleteCollection(collectionId);
+    await fetchCollections();
+    setIsLoading(false);
+  }
+
+  React.useEffect(() => {
+    fetchCollections();
+  }, []);
+
+  return (
+    <Layout>
+      <Title>
+        {orgslug} Collections :{" "}
+        <Link href={"/collections/new"}>
+          <button>+</button>
+        </Link>{" "}
+      </Title>
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <div>
+          {collections.map((collection: any) => (
+            <CollectionItem key={collection.collection_id}>
+              <Link href={"/org/" + orgslug + "/collections/" + collection.collection_id}>{collection.name}</Link>
+              <CourseMiniThumbnail>
+                {collection.courses.map((course: any) => (
+                  <Link key={course.course_id} href={"/org/" + orgslug + "/course/" + course.course_id.substring(7)}>
+                    <img key={course.course_id} src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt={course.name} />
+                  </Link>
+                ))}
+              </CourseMiniThumbnail>
+              <button onClick={() => deleteCollectionAndFetch(collection.collection_id)}>Delete</button>
+            </CollectionItem>
+          ))}
+        </div>
+      )}
+    </Layout>
+  );
+}
+
+const CollectionItem = styled.div`
+  display: flex;
+  flex-direction: row;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.03);
+  background: #ffffff;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  &:hover {
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
+  }
+`;
+
+const CourseMiniThumbnail = styled.div`
+  display: flex;
+  flex-direction: row;
+  img {
+    width: 20px;
+    height: 20px;
+    border-radius: 5px;
+    margin: 5px;
+    transition: all 0.2s ease-in-out;
+  }
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+export default Collections;

front/app/_orgs/[orgslug]/course/[courseid]/edit/page.tsx

@@ -0,0 +1,294 @@
+"use client";
+import React from "react";
+import { useState, useEffect } from "react";
+import styled from "styled-components";
+import { Header } from "../../../../../../components/UI/Header";
+import Layout from "../../../../../../components/UI/Layout";
+import { Title } from "../../../../../../components/UI/Elements/Styles/Title";
+import { DragDropContext, Droppable } from "react-beautiful-dnd";
+import { initialData, initialData2 } from "../../../../../../components/Drags/data";
+import Chapter from "../../../../../../components/Drags/Chapter";
+import { createChapter, deleteChapter, getCourseChaptersMetadata, updateChaptersMetadata } from "../../../../../../services/courses/chapters";
+import { useRouter } from "next/navigation";
+import NewChapterModal from "../../../../../../components/Modals/CourseEdit/NewChapter";
+import NewElementModal from "../../../../../../components/Modals/CourseEdit/NewElement";
+import { createElement, createFileElement } from "../../../../../../services/courses/elements";
+
+function CourseEdit(params: any) {
+  const router = useRouter();
+
+  // Initial Course State
+  const [data, setData] = useState(initialData2) as any;
+
+  // New Chapter Modal State
+  const [newChapterModal, setNewChapterModal] = useState(false) as any;
+  // New Element Modal State
+  const [newElementModal, setNewElementModal] = useState(false) as any;
+  const [newElementModalData, setNewElementModalData] = useState("") as any;
+
+  // Check window availability
+  const [winReady, setwinReady] = useState(false);
+  const courseid = params.params.courseid;
+  const orgslug = params.params.orgslug;
+
+  async function getCourseChapters() {
+    const courseChapters = await getCourseChaptersMetadata(courseid);
+    setData(courseChapters);
+    console.log("courseChapters", courseChapters);
+  }
+
+  useEffect(() => {
+    if (courseid && orgslug) {
+      getCourseChapters();
+    }
+
+    setwinReady(true);
+  }, [courseid, orgslug]);
+
+  // get a list of chapters order by chapter order
+  const getChapters = () => {
+    const chapterOrder = data.chapterOrder ? data.chapterOrder : [];
+    return chapterOrder.map((chapterId: any) => {
+      const chapter = data.chapters[chapterId];
+      let elements = [];
+      if (data.elements) {
+        elements = chapter.elementIds.map((elementId: any) => data.elements[elementId])
+          ? chapter.elementIds.map((elementId: any) => data.elements[elementId])
+          : [];
+      }
+      return {
+        list: {
+          chapter: chapter,
+          elements: elements,
+        },
+      };
+    });
+  };
+
+  // Submit new chapter
+  const submitChapter = async (chapter: any) => {
+    await createChapter(chapter, courseid);
+    await getCourseChapters();
+    setNewChapterModal(false);
+  };
+
+  // Submit new element
+  const submitElement = async (element: any) => {
+    console.log("submitElement", element);
+    await updateChaptersMetadata(courseid, data);
+    await createElement(element, element.chapterId);
+    await getCourseChapters();
+    setNewElementModal(false);
+  };
+
+  // Submit File Upload
+  const submitFileElement = async (file: any, type: any, element: any, chapterId: string) => {
+    console.log("submitFileElement", file);
+    await updateChaptersMetadata(courseid, data);
+    await createFileElement(file, type, element, chapterId);
+    await getCourseChapters();
+    setNewElementModal(false);
+  };
+
+  const deleteChapterUI = async (chapterId: any) => {
+    console.log("deleteChapter", chapterId);
+    await deleteChapter(chapterId);
+    getCourseChapters();
+  };
+
+  const updateChapters = () => {
+    console.log(data);
+    updateChaptersMetadata(courseid, data);
+  };
+
+  /* 
+  
+  Modals
+
+  */
+
+  const openNewElementModal = async (chapterId: any) => {
+    console.log("openNewElementModal", chapterId);
+    setNewElementModal(true);
+    setNewElementModalData(chapterId);
+  };
+
+  // Close new chapter modal
+  const closeNewChapterModal = () => {
+    setNewChapterModal(false);
+  };
+
+  const closeNewElementModal = () => {
+    setNewElementModal(false);
+  };
+
+  /* 
+  Drag and drop functions
+
+  */
+  const onDragEnd = (result: any) => {
+    const { destination, source, draggableId, type } = result;
+    console.log(result);
+
+    // check if the element is dropped outside the droppable area
+    if (!destination) {
+      return;
+    }
+
+    // check if the element is dropped in the same place
+    if (destination.droppableId === source.droppableId && destination.index === source.index) {
+      return;
+    }
+    //////////////////////////// CHAPTERS ////////////////////////////
+    if (type === "chapter") {
+      const newChapterOrder = Array.from(data.chapterOrder);
+      newChapterOrder.splice(source.index, 1);
+      newChapterOrder.splice(destination.index, 0, draggableId);
+
+      const newState = {
+        ...data,
+        chapterOrder: newChapterOrder,
+      };
+      console.log(newState);
+
+      setData(newState);
+      return;
+    }
+
+    //////////////////////// ELEMENTS IN SAME CHAPTERS ////////////////////////////
+    // check if the element is dropped in the same chapter
+    const start = data.chapters[source.droppableId];
+    const finish = data.chapters[destination.droppableId];
+
+    // check if the element is dropped in the same chapter
+    if (start === finish) {
+      // create new arrays for chapters and elements
+      const chapter = data.chapters[source.droppableId];
+      const newElementIds = Array.from(chapter.elementIds);
+
+      // remove the element from the old position
+      newElementIds.splice(source.index, 1);
+
+      // add the element to the new position
+      newElementIds.splice(destination.index, 0, draggableId);
+
+      const newChapter = {
+        ...chapter,
+        elementIds: newElementIds,
+      };
+
+      const newState = {
+        ...data,
+        chapters: {
+          ...data.chapters,
+          [newChapter.id]: newChapter,
+        },
+      };
+
+      setData(newState);
+      return;
+    }
+
+    //////////////////////// ELEMENTS IN DIFF CHAPTERS ////////////////////////////
+    // check if the element is dropped in a different chapter
+    if (start !== finish) {
+      // create new arrays for chapters and elements
+      const startChapterElementIds = Array.from(start.elementIds);
+
+      // remove the element from the old position
+      startChapterElementIds.splice(source.index, 1);
+      const newStart = {
+        ...start,
+        elementIds: startChapterElementIds,
+      };
+
+      // add the element to the new position within the chapter
+      const finishChapterElementIds = Array.from(finish.elementIds);
+      finishChapterElementIds.splice(destination.index, 0, draggableId);
+      const newFinish = {
+        ...finish,
+        elementIds: finishChapterElementIds,
+      };
+
+      const newState = {
+        ...data,
+        chapters: {
+          ...data.chapters,
+          [newStart.id]: newStart,
+          [newFinish.id]: newFinish,
+        },
+      };
+
+      setData(newState);
+      return;
+    }
+  };
+
+  return (
+    <Layout>
+      <Header></Header>
+      <Title>
+        Edit Course Chapters{" "}
+        <button
+          onClick={() => {
+            setNewChapterModal(true);
+          }}
+        >
+          +
+        </button>
+        <button
+          onClick={() => {
+            updateChapters();
+          }}
+        >
+          Save Chapters
+        </button>
+      </Title>
+      {newChapterModal && <NewChapterModal closeModal={closeNewChapterModal} submitChapter={submitChapter}></NewChapterModal>}
+      {newElementModal && (
+        <NewElementModal
+          closeModal={closeNewElementModal}
+          submitFileElement={submitFileElement}
+          submitElement={submitElement}
+          chapterId={newElementModalData}
+        ></NewElementModal>
+      )}
+
+      <br />
+      {winReady && (
+        <ChapterlistWrapper>
+          <DragDropContext onDragEnd={onDragEnd}>
+            <Droppable key="chapters" droppableId="chapters" type="chapter">
+              {(provided) => (
+                <>
+                  <div key={"chapters"} {...provided.droppableProps} ref={provided.innerRef}>
+                    {getChapters().map((info: any, index: any) => (
+                      <>
+                        <Chapter
+                          orgslug={orgslug}
+                          courseid={courseid}
+                          openNewElementModal={openNewElementModal}
+                          deleteChapter={deleteChapterUI}
+                          key={index}
+                          info={info}
+                          index={index}
+                        ></Chapter>
+                      </>
+                    ))}
+                    {provided.placeholder}
+                  </div>
+                </>
+              )}
+            </Droppable>
+          </DragDropContext>
+        </ChapterlistWrapper>
+      )}
+    </Layout>
+  );
+}
+
+const ChapterlistWrapper = styled.div`
+  display: flex;
+  padding-left: 30px;
+`;
+export default CourseEdit;

front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/edit/page.tsx

@@ -0,0 +1,57 @@
+"use client";
+import { default as React, useEffect, useRef } from "react";
+
+import Layout from "../../../../../../../../components/UI/Layout";
+import { Title } from "../../../../../../../../components/UI/Elements/Styles/Title";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/navigation";
+import { getElement } from "../../../../../../../../services/courses/elements";
+import AuthProvider from "../../../../../../../../components/Security/AuthProvider";
+import EditorWrapper from "../../../../../../../../components/Editor/EditorWrapper";
+import { getCourseMetadata } from "../../../../../../../../services/courses/courses";
+
+// Workaround (Next.js SSR doesn't support tip tap editor)
+const Editor: any = dynamic(() => import("../../../../../../../../components/Editor/EditorWrapper") as any, {
+  ssr: false,
+});
+
+function EditElement(params: any) {
+  const router = useRouter();
+  const elementid = params.params.elementid;
+  const courseid = params.params.courseid;
+  const [element, setElement] = React.useState<any>({});
+  const [courseInfo, setCourseInfo] = React.useState({}) as any;
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  async function fetchElementData() {
+    const element = await getElement("element_" + elementid);
+    setElement(element);
+  }
+
+  async function fetchCourseInfo() {
+    const course = await getCourseMetadata("course_" + courseid);
+    setCourseInfo(course);
+  }
+
+  async function fetchAllData() {
+    await fetchElementData();
+    await fetchCourseInfo();
+    setIsLoading(false);
+  }
+
+  React.useEffect(() => {
+    if (elementid && courseid) {
+      fetchAllData();
+    }
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementid, courseid ]);
+
+  return (
+    <AuthProvider>
+      {isLoading ? <div>Loading...</div> : <EditorWrapper course={courseInfo} element={element} content={element.content}></EditorWrapper>}
+    </AuthProvider>
+  );
+}
+
+export default EditElement;

front/app/_orgs/[orgslug]/course/[courseid]/element/[elementid]/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+import { useRouter } from "next/navigation";
+import React, { useMemo } from "react";
+import Layout from "../../../../../../../components/UI/Layout";
+import { getElement } from "../../../../../../../services/courses/elements";
+import { getBackendUrl } from "../../../../../../../services/config";
+import Canva from "../../../../../../../components/Canva/Canva";
+
+function ElementPage(params: any) {
+  const router = useRouter();
+  const elementid = params.params.elementid;
+  const [element, setElement] = React.useState<any>({});
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  async function fetchElementData() {
+    const element = await getElement("element_" + elementid);
+    setElement(element);
+    setIsLoading(false);
+  }
+
+  React.useEffect(() => {
+    if (elementid) {
+      fetchElementData();
+    }
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [elementid]);
+
+  return (
+    <Layout>
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <div>
+          <p>element</p>
+          <h1>{element.name} </h1>
+          <hr />
+
+          {element.type == "dynamic" && <Canva content= {element.content} element={element}/>}
+          {/* todo : use apis & streams instead of this */}
+          {element.type == "video" && (
+            <video controls src={`${getBackendUrl()}content/uploads/video/${element.content.video.element_id}/${element.content.video.filename}`}></video>
+          )}
+        </div>
+      )}
+    </Layout>
+  );
+}
+
+export default ElementPage;

front/app/_orgs/[orgslug]/course/[courseid]/page.tsx

@@ -0,0 +1,151 @@
+"use client";
+import { EyeOpenIcon, Pencil2Icon } from "@radix-ui/react-icons";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import React from "react";
+import styled from "styled-components";
+import Layout from "../../../../../components/UI/Layout";
+import { getAPIUrl, getBackendUrl } from "../../../../../services/config";
+import { getCourse, getCourseMetadata } from "../../../../../services/courses/courses";
+
+const CourseIdPage = (params : any) => {
+  const router = useRouter();
+  const courseid = params.params.courseid;
+  const orgslug = params.params.orgslug;
+
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [courseInfo, setCourseInfo] = React.useState({}) as any;
+
+  async function fetchCourseInfo() {
+    const course = await getCourseMetadata("course_" + courseid);
+
+    setCourseInfo(course);
+
+
+    setIsLoading(false);
+  }
+
+  React.useEffect(() => {
+    if (courseid && orgslug) {
+      fetchCourseInfo();
+    }
+    return () => {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [courseid && orgslug]);
+
+  return (
+    <Layout>
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <CoursePageLayout>
+          <br></br>
+          <p>Course</p>
+          <h1>
+            {courseInfo.course.name}{" "}
+            <Link
+              href={`/org/${orgslug}/course/${courseid}/edit`}
+              
+              rel="noopener noreferrer">
+
+              <Pencil2Icon />
+
+            </Link>{" "}
+          </h1>
+          <br />
+          <ChaptersWrapper>
+            {courseInfo.chapters.map((chapter: any) => {
+              return <>
+                {chapter.elements.map((element: any) => {
+                  return <>
+                    <Link href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}>
+
+                      <ChapterIndicator />
+
+                    </Link>{" "}
+                  </>;
+                })}
+                &nbsp;&nbsp;&nbsp;&nbsp;
+              </>;
+            })}
+          </ChaptersWrapper>
+
+          <CourseThumbnailWrapper>
+            <img src={`${getBackendUrl()}content/uploads/img/${courseInfo.course.thumbnail}`} alt="" />
+          </CourseThumbnailWrapper>
+
+          <h2>Description</h2>
+          <p>{courseInfo.course.description}</p>
+
+          <h2>What you will learn</h2>
+          <p>{courseInfo.course.learnings == ![] ? "no data" : courseInfo.course.learnings}</p>
+
+          <h2>Course Lessons</h2>
+
+          {courseInfo.chapters.map((chapter: any) => {
+            return <>
+              <h3>Chapter : {chapter.name}</h3>
+              {chapter.elements.map((element: any) => {
+                return <>
+                  <p>
+                    Element {element.name}
+                    <Link
+                      href={`/org/${orgslug}/course/${courseid}/element/${element.id.replace("element_", "")}`}
+                      
+                      rel="noopener noreferrer">
+
+                      <EyeOpenIcon />
+
+                    </Link>{" "}
+                  </p>
+                </>;
+              })}
+              &nbsp;&nbsp;&nbsp;&nbsp;
+            </>;
+          })}
+        </CoursePageLayout>
+      )}
+    </Layout>
+  );
+};
+
+const CourseThumbnailWrapper = styled.div`
+  display: flex;
+  img {
+    width: 794px;
+    height: 224.28px;
+    object-fit: cover;
+    object-position: top;
+
+    background: url(), #d9d9d9;
+    border: 1px solid rgba(255, 255, 255, 0.19);
+    box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42);
+    border-radius: 7px;
+  }
+`;
+const CoursePageLayout = styled.div`
+  margin-left: 40px;
+  margin-right: 40px;
+`;
+
+const ChaptersWrapper = styled.div`
+  display: flex;
+`;
+const ChapterIndicator = styled.div`
+  border-radius: 20px;
+  height: 5px;
+  background: #151515;
+  border-radius: 3px;
+  width: 40px;
+  background-color: black;
+  margin: 10px;
+  margin-left: 0px;
+  transition: all 0.2s ease;
+
+  &:hover {
+    width: 50px;
+    cursor: pointer;
+  }
+`;
+
+export default CourseIdPage;

front/app/_orgs/[orgslug]/courses/new/page.tsx

@@ -0,0 +1,71 @@
+import { useRouter } from "next/navigation";
+import React from "react";
+import { Header } from "../../../../../components/UI/Header";
+import Layout from "../../../../../components/UI/Layout";
+import { Title } from "../../../../../components/UI/Elements/Styles/Title";
+import { createNewCourse } from "../../../../../services/courses/courses";
+import { getOrganizationContextInfo } from "../../../../../services/orgs";
+
+const NewCoursePage = (params: any) => {
+  const router = useRouter();
+  const orgslug = params.params.orgslug;
+  const [name, setName] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [thumbnail, setThumbnail] = React.useState(null) as any;
+  const [orgId, setOrgId] = React.useState(null) as any;
+
+
+  const getOrgMetadata = async () => {
+    const org = await getOrganizationContextInfo(orgslug);
+    setOrgId(org.org_id);
+  }
+
+  const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+
+  const handleDescriptionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setDescription(event.target.value);
+  };
+
+  const handleThumbnailChange = (event: React.ChangeEvent<any>) => {
+    setThumbnail(event.target.files[0]);
+  };
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    let status = await createNewCourse(orgId, { name, description }, thumbnail);
+
+    // TODO : wow this is terrible - fix this
+    if (status.org_id == orgId) {
+      router.push(`/org/${orgslug}/courses`);
+    } else {
+      alert("Error creating course, please see console logs");
+      console.log(status);
+    }
+
+  };
+
+  React.useEffect(() => {
+    if (orgslug) {
+      getOrgMetadata();
+    }
+  }, [isLoading, orgslug]);
+
+
+  return (
+    <Layout title="New course">
+      <Header></Header>
+      <Title>New Course </Title>
+      <hr />
+      Name : <input onChange={handleNameChange} type="text" /> <br />
+      Description : <input onChange={handleDescriptionChange} type="text" /> <br />
+      Cover Photo : <input onChange={handleThumbnailChange} type="file" /> <br />
+      Learnings (empty for now) (separated by ; ) : <textarea id="story" name="story" rows={5} cols={33} /> <br />
+      <button onClick={handleSubmit}>Create</button>
+    </Layout>
+  );
+};
+
+export default NewCoursePage;

front/app/_orgs/[orgslug]/courses/page.tsx

@@ -0,0 +1,104 @@
+"use client"; 
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import React from "react";
+import styled from "styled-components";
+import { Header } from "../../../../components/UI/Header";
+import Layout from "../../../../components/UI/Layout";
+import { Title } from "../../../../components/UI/Elements/Styles/Title";
+import { getBackendUrl } from "../../../../services/config";
+import { deleteCourseFromBackend, getOrgCourses } from "../../../../services/courses/courses";
+import { getOrganizationContextInfo } from "../../../../services/orgs";
+
+const CoursesIndexPage = (params : any) => {
+  const router = useRouter();
+  const orgslug = params.params.orgslug;
+
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [orgInfo, setOrgInfo] = React.useState(null);
+  const [courses, setCourses] = React.useState([]);
+
+  async function fetchCourses() {
+    const org = await getOrganizationContextInfo(orgslug);
+    const response = await getOrgCourses(org.org_id);
+    setCourses(response);
+    setIsLoading(false);
+  }
+
+  async function deleteCourses(course_id: any) {
+    const response = await deleteCourseFromBackend(course_id);
+    const newCourses = courses.filter((course: any) => course.course_id !== course_id);
+    setCourses(newCourses);
+  }
+
+  // function to remove "course_" from the course_id
+  function removeCoursePrefix(course_id: string) {
+    return course_id.replace("course_", "");
+  }
+
+  React.useEffect(() => {
+    if (orgslug) {
+      fetchCourses();
+      if (courses.length > 0) {
+        setIsLoading(false);
+      }
+    }
+  }, [isLoading, orgslug]);
+
+  return (
+    <Layout title="Courses">
+      <Header></Header>
+      <Title>
+        {orgslug} Courses :{" "}
+        <Link href={"/courses/new"}>
+
+          <button>+</button>
+
+        </Link>{" "}
+      </Title>
+
+      <hr />
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <div>
+          {courses.map((course: any) => (
+            <div key={course.course_id}>
+              <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id)}>
+
+                <h2>{course.name}</h2>
+                <CourseWrapper>
+                  <img src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt="" />
+                </CourseWrapper>
+
+              </Link>
+              <button style={{ backgroundColor: "red", border: "none" }} onClick={() => deleteCourses(course.course_id)}>
+                Delete
+              </button>
+              <Link href={"/org/" + orgslug + "/course/" + removeCoursePrefix(course.course_id) + "/edit"}>
+
+                <button>Edit Chapters</button>
+
+              </Link>
+            </div>
+          ))}
+        </div>
+      )}
+    </Layout>
+  );
+};
+
+export default CoursesIndexPage;
+
+const CourseWrapper = styled.div`
+  display: flex;
+  img {
+    width: 269px;
+    height: 151px;
+
+    background: url(), #d9d9d9;
+    border: 1px solid rgba(255, 255, 255, 0.19);
+    box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42);
+    border-radius: 7px;
+  }
+`;

front/app/_orgs/[orgslug]/page.tsx

@@ -0,0 +1,26 @@
+"use client";
+import { useRouter, useSearchParams, useSelectedLayoutSegment } from "next/navigation";
+import Layout from "../../../components/UI/Layout";
+import { Title } from "../../../components/UI/Elements/Styles/Title";
+import { Header } from "../../../components/UI/Header";
+import Link from "next/link";
+import { usePathname } from 'next/navigation';
+
+const OrgHomePage = (params: any) => {
+  const orgslug = params.params.orgslug;
+  const pathname = usePathname();
+
+  return (
+    <div>
+      <Layout orgslug={orgslug} title={"Org " + orgslug}>
+        <Header></Header>
+        <Title>Welcome {orgslug} 👋🏻</Title>
+        <Link href={pathname + "/courses"}>
+          <button>See Courses </button>
+        </Link>
+      </Layout>
+    </div>
+  );
+};
+
+export default OrgHomePage;

front/app/head.tsx

@@ -0,0 +1,9 @@
+export default function Head() {
+  return (
+    <>
+      <title>LearnHouse</title>
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <link rel="icon" href="/favicon.ico" />
+    </>
+  )
+}

front/app/layout.tsx

@@ -0,0 +1,15 @@
+import '../styles/globals.css'
+import StyledComponentsRegistry from '../services/lib/styled-registry'
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html>
+      <head />
+      <body> <StyledComponentsRegistry>{children}</StyledComponentsRegistry></body>
+    </html>
+  )
+}

front/app/login/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+import { useRouter } from 'next/navigation';
+import React from "react";
+import { Header } from "../../components/UI/Header";
+import Layout from "../../components/UI/Layout";
+import { Title } from "../../components/UI/Elements/Styles/Title";
+import { loginAndGetToken } from "../../services/auth/auth";
+
+const Login = () => {
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const router = useRouter();
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    console.log({ email, password });
+    alert(JSON.stringify({ email, password }));
+    try {
+      loginAndGetToken(email, password);
+      router.push("/");
+    }
+    catch (e) {
+      console.log(e);
+    }
+  };
+
+  const handleEmailChange = (e: any) => {
+    setEmail(e.target.value);
+  };
+
+  const handlePasswordChange = (e: any) => {
+    setPassword(e.target.value);
+  };
+
+  return (
+    <div>
+      <Layout title="Login">
+      <Header></Header>
+        <Title>Login</Title>
+
+        <form>
+          <input onChange={handleEmailChange} type="text" placeholder="email" />
+          <input onChange={handlePasswordChange} type="password" placeholder="password" />
+          <button onClick={handleSubmit} type="submit">
+            Login
+          </button>
+        </form>
+      </Layout>
+    </div>
+  );
+};
+
+export default Login;

front/app/organizations/new.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import Layout from "../../components/UI/Layout";
+import { Title } from "../../components/UI/Elements/Styles/Title";
+import { createNewOrganization } from "../../services/orgs";
+
+const Organizations = () => {
+  const [name, setName] = React.useState("");
+  const [description, setDescription] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [slug, setSlug] = React.useState("");
+
+  const handleNameChange = (e: any) => {
+    setName(e.target.value);
+  };
+
+  const handleDescriptionChange = (e: any) => {
+    setDescription(e.target.value);
+  };
+
+  const handleEmailChange = (e: any) => {
+    setEmail(e.target.value);
+  };
+
+  const handleSlugChange = (e: any) => {
+    setSlug(e.target.value);
+  };
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    console.log({ name, description, email });
+    const status = await createNewOrganization({ name, description, email, slug });
+    alert(JSON.stringify(status));
+  };
+
+  return (
+    <Layout>
+      <Title>New Organization</Title>
+      Name: <input onChange={handleNameChange} type="text" />
+      <br />
+      Description: <input onChange={handleDescriptionChange} type="text" />
+      <br />
+      Slug: <input onChange={handleSlugChange} type="text" />
+      <br />
+      Email Address: <input onChange={handleEmailChange} type="text" />
+      <br />
+      <button onClick={handleSubmit}>Create</button>
+    </Layout>
+  );
+};
+
+export default Organizations;

front/app/organizations/page.tsx

@@ -0,0 +1,67 @@
+"use client"; //todo: use server components
+import Link from "next/link";
+import React from "react";
+import Layout from "../../components/UI/Layout";
+import { Title } from "../../components/UI/Elements/Styles/Title";
+import { deleteOrganizationFromBackend, getUserOrganizations } from "../../services/orgs";
+
+const Organizations = () => {
+  const [userOrganizations, setUserOrganizations] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  async function fetchUserOrganizations() {
+    const response = await getUserOrganizations();
+    setUserOrganizations(response);
+    console.log(response);
+    setIsLoading(false);
+  }
+
+  async function deleteOrganization(org_id:any)  {
+    const response = await deleteOrganizationFromBackend(org_id);
+    const newOrganizations = userOrganizations.filter((org:any) => org.org_id !== org_id);
+    setUserOrganizations(newOrganizations);
+  }
+
+
+  React.useEffect(() => {
+    setIsLoading(true);
+    fetchUserOrganizations();
+    setIsLoading(false);
+  }, []);
+
+
+  return (
+    <Layout>
+      <Title>
+        Your Organizations{" "}
+        <Link href={"/organizations/new"}>
+
+          <button>+</button>
+
+        </Link>
+      </Title>
+      <hr />
+      {isLoading ? (
+        <p>Loading...</p>
+      ) : (
+        <div>
+          {userOrganizations.map((org: any) => (
+            <div key={org.org_id}>
+              <Link href={`/org/${org.slug}`}>
+
+                <h3>{org.name}</h3>
+
+              </Link>
+              <button onClick={() => deleteOrganization(org.org_id)}>
+                Delete
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      
+    </Layout>
+  );
+};
+
+export default Organizations;

front/app/page.tsx

@@ -0,0 +1,92 @@
+"use client";
+import type { NextPage } from "next";
+import { motion } from "framer-motion";
+import styled from "styled-components";
+import learnhouseBigIcon from "public/learnhouse_bigicon.png";
+import Image from "next/legacy/image";
+import Link from "next/link";
+
+const Home: NextPage = () => {
+  return (
+    <HomePage>
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{
+          type: "spring",
+          stiffness: 260,
+          damping: 70,
+          delay: 0.2,
+        }}
+        exit={{ opacity: 1 }}
+      >
+        <Image alt="Learnhouse Icon" height={260} width={260} quality={100} src={learnhouseBigIcon}></Image>
+      </motion.div>
+      <br />
+      <br />
+      <br />
+      <br />
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{
+          type: "spring",
+          stiffness: 260,
+          damping: 70,
+          delay: 0.8,
+        }}
+        exit={{ opacity: 1 }}
+      >
+        <div>
+          <Link href={"/organizations"}>
+            <OrgsButton>See Organizations</OrgsButton>
+          </Link>
+          <br />
+          <br />
+          <Link href={"/login"}>
+            <OrgsButton>Login</OrgsButton>
+          </Link>
+        </div>
+      </motion.div>
+    </HomePage>
+  );
+};
+
+const OrgsButton = styled.button`
+  background: #151515;
+  border: 1px solid #e5e5e50a;
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding: 10px 20px;
+  color: white;
+  font-size: 16px;
+  line-height: 24px;
+  margin: 0 10px;
+  margin: auto;
+  cursor: pointer;
+  font-family: "DM Sans";
+  font-weight: 500;
+  border-radius: 12px;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  &:hover {
+    background: #191919;
+  }
+`;
+
+const HomePage = styled.div`
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(131.61deg, #202020 7.15%, #000000 90.96%);
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
+  min-height: 100vh;
+  text-align: center;
+  img {
+    width: 60px;
+  }
+`;
+
+export default Home;

front/app/signup/page.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Header } from "../../components/UI/Header";
+import Layout from "../../components/UI/Layout";
+import { Title } from "../../components/UI/Elements/Styles/Title";
+import { signup } from "../../services/auth/auth";
+
+const SignUp = () => {
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [username, setUsername] = React.useState("");
+
+  const handleSubmit = (e: any) => {
+    e.preventDefault();
+    console.log({ email, password, username });
+    alert(JSON.stringify({ email, password, username }));
+    signup({ email, password, username });
+  };
+
+  const handleEmailChange = (e: any) => {
+    setEmail(e.target.value);
+  };
+
+  const handlePasswordChange = (e: any) => {
+    setPassword(e.target.value);
+  };
+
+  const handleUsernameChange = (e: any) => {
+    setUsername(e.target.value);
+  };
+
+  return (
+    <div>
+      <Layout title="Sign up">
+      <Header></Header>
+        <Title>Sign up </Title>
+
+        <form>
+          <input onChange={handleUsernameChange} type="text" placeholder="username" />
+          <input onChange={handleEmailChange} type="text" placeholder="email" />
+          <input onChange={handlePasswordChange} type="password" placeholder="password" />
+          <button onClick={handleSubmit} type="submit">
+            Sign up
+          </button>
+        </form>
+      </Layout>
+    </div>
+  );
+};
+export default SignUp;