add server

README.md

@@ -1,15 +1,20 @@
-UI Design
+<h1 align="center">
+    NeoMovie
+</h1>
 
-🔵Home Page
+# Description
 
-![MovieAppImage](https://user-images.githubusercontent.com/66914300/149370624-ca1a7814-44be-4937-86d4-5a810d0f6f93.PNG)
+> Developping MyAllociné projet
 
-🔵Search Result with modal
+# Techonologies used
 
-![MovieAppImage2](https://user-images.githubusercontent.com/66914300/149370693-3adbc3e0-a108-46c9-a8dc-85660f04821f.PNG)
+![React](https://img.shields.io/badge/-ReactJs-61DAFB?logo=react&logoColor=white&style=for-the-badge)
+![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
 
-📌API_URL="https://api.themoviedb.org/3/movie/popular?api_key=55bb5aeea2538b26cf848582959d4fc8"
+![Node.js](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)
 
-📌API_IMG="https://image.tmdb.org/t/p/w500/"
+![MongoDB](https://img.shields.io/badge/MongoDB-4EA94B?style=for-the-badge&logo=mongodb&logoColor=white)
 
-📌API_SEARCH="https://api.themoviedb.org/3/search/movie?api_key=55bb5aeea2538b26cf848582959d4fc8&query"
+## Authors
+
+- [Wassini Bouzidi](https://github.com/wassb92) - wassini.bouzidi@epitech.eu

client/README.md

@@ -0,0 +1,15 @@
+UI Design
+
+🔵Home Page
+
+![MovieAppImage](https://user-images.githubusercontent.com/66914300/149370624-ca1a7814-44be-4937-86d4-5a810d0f6f93.PNG)
+
+🔵Search Result with modal
+
+![MovieAppImage2](https://user-images.githubusercontent.com/66914300/149370693-3adbc3e0-a108-46c9-a8dc-85660f04821f.PNG)
+
+📌API_URL="https://api.themoviedb.org/3/movie/popular?api_key=55bb5aeea2538b26cf848582959d4fc8"
+
+📌API_IMG="https://image.tmdb.org/t/p/w500/"
+
+📌API_SEARCH="https://api.themoviedb.org/3/search/movie?api_key=55bb5aeea2538b26cf848582959d4fc8&query"

client/src/App.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Routes, Route, Outlet } from "react-router-dom";
+
+/* components */
+import Header from "./components/Header";
+
+/* pages */
+import Home from "./pages/Home";
+import NotFound from "./pages/NotFound";
+/* private */
+import ProtectedRoutes from "./pages/private/ProtectedRoutes";
+import Popular from "./pages/private/Popular";
+
+const Layout = () => {
+  return (
+    <>
+      <Header />
+      <Outlet />
+    </>
+  );
+};
+
+const App = () => {
+  return (
+    <Routes>
+      <Route element={<ProtectedRoutes />}>
+        <Route
+          path="account/*"
+          element={
+            <Routes>
+              <Route element={<Layout />}>
+                <Route path="/profile" element={<div>Profile page</div>} />
+                <Route path="/movies" element={<Popular />} />
+              </Route>
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          }
+        />
+      </Route>
+      <Route path="/" element={<Home />} />
+      {/* <Route element={<Layout />}> */}
+      {/* <Route path="/login" element={<Login />} /> */}
+      {/* </Route> */}
+      <Route path="*" element={<NotFound />} />
+    </Routes>
+  );
+};
+
+export default App;

src/pages/Home.jsx → client/src/pages/Home.jsx

@@ -40,7 +40,7 @@ const Login = () => {
         config
       );
       localStorage.setItem("authToken", data.token);
-      navigate("/");
+      navigate("/hello");
     } catch (error) {
       setError(error?.response?.data?.error);
       setTimeout(() => {

client/src/pages/NotFound.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const NotFound = () => {
+  return (
+    <div className="flex items-center justify-center w-full h-screen bg-gradient-to-r from-main to-secondary">
+      <div className="px-10 py-6 bg-white rounded-md shadow-xl">
+        <div className="flex flex-col items-center">
+          <div className="font-bold text-main text-6xl">Erreur 404</div>
+          <br />
+          <div className="mb-2 text-2xl font-bold text-center text-gray-800 md:text-3xl">
+            Page introuvable
+          </div>
+          <div className="mb-8 text-center text-gray-500 md:text-lg">
+            La page que vous cherchez n'existe pas
+          </div>
+          <div className="my-6">
+            <Link
+              to="/"
+              className="mx-4 px-6 py-2 text-xl font-semibold text-white hover:bg-secondary bg-main rounded-xl"
+            >
+              Accueil
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;

src/pages/private/Details.jsx → client/src/pages/private/Details.jsx

@@ -32,7 +32,7 @@ const Details = ({
   const [video, setVideo] = useState();
 
   const fetchVideo = async () => {
-    const url = `${global.API_ENDPOINT}/movie/${id}/videos?api_key=${global.API_KEY}&include_video_language=fr`;
+    const url = `${global.TMDB_API}/movie/${id}/videos?api_key=${global.API_KEY}&include_video_language=fr`;
 
     try {
       const res = await axios.get(url);

src/pages/private/Popular.jsx → client/src/pages/private/Popular.jsx

@@ -3,7 +3,8 @@ import axios from "axios";
 import Details from "./Details";
 
 global.API_KEY = "55bb5aeea2538b26cf848582959d4fc8";
-global.API_ENDPOINT = "https://api.themoviedb.org/3";
+global.TMDB_API = "https://api.themoviedb.org/3";
+global.API_ENDPOINT = "http://localhost:8080";
 
 const SearchBar = ({ setMovies, fetchMovies }) => {
   const [query, setQuery] = useState("");
@@ -13,7 +14,7 @@ const SearchBar = ({ setMovies, fetchMovies }) => {
     if (instantQuery.length < 1) return fetchMovies();
 
     try {
-      const url = `${global.API_ENDPOINT}/search/movie?api_key=${global.API_KEY}&query=${instantQuery}&language=fr`;
+      const url = `${global.TMDB_API}/search/movie?api_key=${global.API_KEY}&query=${instantQuery}&language=fr`;
       const res = await axios.get(url);
       const data = await res.data;
 
@@ -58,7 +59,7 @@ const Popular = () => {
   const [movies, setMovies] = useState([]);
 
   const fetchMovies = async () => {
-    const url = `${global.API_ENDPOINT}/discover/movie?api_key=${global.API_KEY}&language=fr`;
+    const url = `${global.TMDB_API}/discover/movie?api_key=${global.API_KEY}&language=fr`;
 
     try {
       const res = await axios.get(url);

src/pages/private/ProtectedRoutes.jsx → client/src/pages/private/ProtectedRoutes.jsx

@@ -29,7 +29,7 @@ const useAuth = () => {
         loadingGetUser.current = false;
 
         const { data } = await axios.get(
-          `${global.API_ENDPOINT}/api/private/account`,
+          `${global.API}/api/private/account`,
           config
         );
         setUser(data.user);

tailwind.config.js → client/tailwind.config.js

@@ -8,7 +8,7 @@ module.exports = {
       },
       colors: {
         main: "#1F2937",
-        secondary: "#6366f1",
+        secondary: "#4B5563",
         soft: "#9333ea",
       },
     },

server/.env

@@ -0,0 +1,9 @@
+# Port using
+PORT=8080
+
+# MongoDB collection
+MONGO_URI=mongodb+srv://root:8m8V3FHEfQWZcsPc@episolidairecluster.lsel2.mongodb.net/MyAllocineDB?retryWrites=true&w=majority
+
+# JWT
+JWT_SECRET=071d67264ccc6d7b0332867ccbf71c0c385b4a47e3d282170403c9142796500eb1ab44
+JWT_EXPIRE=5m

server/.gitignore

@@ -0,0 +1,17 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+config.env
+testfile/
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

server/README.md

@@ -0,0 +1,45 @@
+# MyAllocine Projet
+
+## Installation
+
+From root server folder
+
+```bash
+npm install -f
+```
+
+## Lauching
+
+From root server folder
+
+```bash
+npm run start
+```
+
+> **_NOTE:_** .env file with secret variables is not shared, please use your own.
+
+## Documentation
+
+Generate API's documentation
+
+```bash
+npm run swagger-autogen
+```
+
+### Then go to http://localhost:8080/doc/
+
+## Testing
+
+Run automated tests
+
+```bash
+npm run tests
+```
+
+## Technologies
+
+- JavaScript
+- Node.js
+- Express
+- MongoDB
+- Swagger

server/app.js

@@ -0,0 +1,24 @@
+require("dotenv").config({ path: "./.env" });
+const express = require("express");
+const cors = require("cors");
+const errorHandler = require("./middleware/error");
+const connectDB = require("./config/db");
+const app = express();
+const swaggerUi = require("swagger-ui-express");
+const swaggerFile = require("./swagger/output.json");
+const bodyParser = require("body-parser");
+
+connectDB();
+app.use(cors({ origin: true }));
+app.use(express.json());
+app.use(express.urlencoded({ extended: true }));
+
+// login and register with JWT (no api)
+app.use("/api", require("./routes/auth"));
+app.use("/api", require("./routes/private"));
+
+app.use("/doc", swaggerUi.serve, swaggerUi.setup(swaggerFile));
+
+app.use(errorHandler);
+
+module.exports = app;

server/config/db.js

@@ -0,0 +1,20 @@
+const mongoose = require("mongoose");
+require("dotenv");
+
+const connectDB = async () => {
+  try {
+    if (!process.env.MONGO_URI) {
+      throw new Error("MONGO_URI must be set");
+    }
+    await mongoose.connect(process.env.MONGO_URI, {
+      useNewUrlParser: true,
+      useUnifiedTopology: true,
+    });
+    console.log("MongoDB connected");
+  } catch (err) {
+    console.error(err.message);
+    process.exit(84);
+  }
+};
+
+module.exports = connectDB;