app created using next, turborepo, typescript, mui and mongodb

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  // This tells ESLint to load the config from the package `eslint-config-custom`
+  extends: ["custom"],
+  settings: {
+    next: {
+      rootDir: ["apps/*/"],
+    },
+  },
+};

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+# vercel
+.vercel

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = true

README.md

@@ -1,26 +1,18 @@
-## Migrate the course selling app to next.js
+# EdKart Project
 
-Until now we've built a basic course selling application
- - It uses React for the frontend
- - It uses MongoDB as the database
- - It uses Node.js as the Backend server
- - It is written in JS
+Welcome to the EdKart project! This repository contains the code for the user frontend and admin frontend of EdKart.
 
-Link to it - https://github.com/100xDevs-hkirat/week-10
+## User Frontend
 
-The assignment of this week is to move the application over to NextJS
+Visit the User Frontend at: [edkart.vercel.app](https://edkart.vercel.app)
 
-You can bootstrap a nextjs application by calling -
-```
-npx create-next-app@latest
-```
+The User Frontend provides a user-friendly interface for browsing and shopping for educational materials.
 
-If you have followed the video from Week 10.2, please select these configs to use the Page router (vs the new NextJS 13 app router)
+## Admin Frontend
 
-![Image](https://github.com/100xDevs-hkirat/Week-10-Assignment/blob/master/photo.jpg?raw=true, "image")
+Access the Admin Frontend at: [edkart-admin.vercel.app](https://edkart-admin.vercel.app)
 
+The Admin Frontend is designed for administrators to manage and update the content.
+
+Feel free to explore both frontends and contribute to the project!
 
-The goal is to - 
- - Move the frontend over to NextJS
- - Move the backend over to NextJS API
- - Convert the complete project to Typescript (and not use JS)

apps/admin_frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

apps/admin_frontend/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/admin_frontend/README.md

@@ -0,0 +1,38 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## 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/deployment) for more details.

apps/admin_frontend/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ["ui"],
+};
+
+module.exports = nextConfig;

apps/admin_frontend/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "admin_frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.5",
+    "@types/node": "20.5.0",
+    "@types/react": "18.2.20",
+    "@types/react-dom": "18.2.7",
+    "bson-objectid": "^2.0.4",
+    "eslint": "8.47.0",
+    "eslint-config-next": "13.4.18",
+    "next": "13.4.18",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.45.4",
+    "typescript": "5.1.6"
+  }
+}

apps/admin_frontend/src/components/AppBarComponent.tsx

@@ -0,0 +1,87 @@
+import { LinearScale, TuneRounded } from "@mui/icons-material";
+import {
+  AppBar,
+  IconButton,
+  Menu,
+  MenuItem,
+  Toolbar,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import Cookies from "js-cookie";
+import { useRouter } from "next/navigation";
+import { useSetRecoilState } from "recoil";
+import { userState } from "@/store/atoms/user";
+
+export function AppBarComponent({
+  title,
+  open,
+  setOpen,
+}: {
+  title: string;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const setUserAtom = useSetRecoilState(userState);
+
+  const { push } = useRouter();
+
+  const openMenu = Boolean(anchorEl);
+
+  const handleLogout = () => {
+    //clear cookie
+    Cookies.remove("token", { path: "/" });
+
+    setUserAtom({ user: null, isLoading: false });
+
+    //close menu
+    handleClose();
+
+    //redirect to login page
+    push("/signIn");
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  return (
+    <AppBar
+      position="fixed"
+      sx={{ zIndex: (theme) => theme.zIndex.drawer + 1, top: 0 }}
+    >
+      <Toolbar
+        sx={{
+          display: "flex",
+          justifyContent: "space-between",
+        }}
+      >
+        <IconButton onClick={() => setOpen(!open)} color="inherit">
+          <LinearScale />
+        </IconButton>
+        <Typography variant="h6">{title}</Typography>
+        <IconButton onClick={handleClick} color="inherit">
+          <TuneRounded />
+        </IconButton>
+        <Menu
+          id="basic-menu"
+          anchorEl={anchorEl}
+          open={openMenu}
+          onClose={handleClose}
+          MenuListProps={{
+            "aria-labelledby": "basic-button",
+          }}
+        >
+          <MenuItem onClick={handleClose}>Profile</MenuItem>
+          <MenuItem onClick={handleClose}>My account</MenuItem>
+          <MenuItem onClick={handleLogout}>Logout</MenuItem>
+        </Menu>
+      </Toolbar>
+    </AppBar>
+  );
+}