mde · schadokar · Oct 4, 2020
diff --git a/examples/simple-ejs-app/README.md b/examples/simple-ejs-app/README.md
@@ -0,0 +1,33 @@
+# Simple EJS App
+
+This is a simple app which has home, login, profile and logout routes.
+
+![](app-screenshot.PNG)
+
+The backend is in nodejs and expressjs.
+
+The frontend is in ejs template engine.
+
+This project is scaffolding project which can be used as a template.
+
+> :warning: The Login details are not saving anywhere.
+
+# App setup
+
+- Install nodejs and npm in your machine if not installed.
+- Install dependencies `npm install`
+- Run the application `npm run start`
+
+Check the application at `localhost:3000` on browser.
+
+## About me
+
+I am Shubham Chadokar and you can check my work [@schadokar](https://schadokar.dev).
+
+[GitHub Readme](https://github.com/schadokar)
+
+---
+
+<span>Photo by <a href="https://unsplash.com/@babybluecat?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">J Lee</a> on <a href="https://unsplash.com/s/photos/simplicity?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
+
+---
diff --git a/examples/simple-ejs-app/app-screenshot.PNG b/examples/simple-ejs-app/app-screenshot.PNG
diff --git a/examples/simple-ejs-app/app.js b/examples/simple-ejs-app/app.js
@@ -0,0 +1,29 @@
+const express = require("express");
+const bodyParser = require("body-parser");
+const cors = require("cors");
+const appRoutes = require("./router/app-routes");
+// create an app instance
+const app = express();
+// Express body parser
+app.use(cors());
+app.use(bodyParser.json());
+app.use(
+  bodyParser.urlencoded({
+    limit: "50mb",
+    extended: false,
+    parameterLimit: 50000,
+  })
+);
+
+// set ejs as view-engine
+app.set("view engine", "ejs");
+
+// setup public folder
+app.use(express.static("./public"));
+
+// app routes
+app.use("/", appRoutes);
+
+app.listen(3000, () => {
+  console.log("app is listening to port 3000");
+});
diff --git a/examples/simple-ejs-app/package.json b/examples/simple-ejs-app/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "simple-ejs-app",
+  "version": "1.0.0",
+  "description": "",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node app.js"
+  },
+  "keywords": [],
+  "author": "Shubham Chadokar",
+  "license": "ISC",
+  "dependencies": {
+    "body-parser": "^1.19.0",
+    "cors": "^2.8.5",
+    "ejs": "^3.1.5",
+    "express": "^4.17.1"
+  }
+}
diff --git a/examples/simple-ejs-app/public/app.css b/examples/simple-ejs-app/public/app.css
@@ -0,0 +1,49 @@
+body {
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+
+form {
+  margin-left: 25%;
+}
+
+.ghost-input {
+  display: block;
+  font-weight: 300;
+  width: 50%;
+  font-size: 25px;
+  border: 0px;
+  outline: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #4b545f;
+  background: #fff;
+  font-family: Open Sans, Verdana;
+  padding: 15px 15px;
+  margin: 30px 0px;
+  -webkit-transition: all 0.1s ease-in-out;
+  -moz-transition: all 0.1s ease-in-out;
+  -ms-transition: all 0.1s ease-in-out;
+  -o-transition: all 0.1s ease-in-out;
+  transition: all 0.1s ease-in-out;
+}
+.ghost-input:focus {
+  border-bottom: 1px solid #ddd;
+}
+header {
+  text-align: center;
+}
+
+main {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.app-footer {
+  font-size: medium;
+  height: 50px;
+  bottom: 0;
+  text-align: center;
+  padding-top: 20px;
+}
diff --git a/examples/simple-ejs-app/public/twitter.svg b/examples/simple-ejs-app/public/twitter.svg
diff --git a/examples/simple-ejs-app/public/wallpaper.jpg b/examples/simple-ejs-app/public/wallpaper.jpg
diff --git a/examples/simple-ejs-app/router/app-routes.js b/examples/simple-ejs-app/router/app-routes.js
@@ -0,0 +1,23 @@
+const router = require("express").Router();
+
+router.get("/", (req, res) => {
+  res.render("home");
+});
+
+router.get("/login", (req, res) => {
+  res.render("login");
+});
+
+router.post("/profile", (req, res) => {
+  res.redirect(`/profile?username=${req.body.username}`);
+});
+
+router.get("/profile", (req, res) => {
+  res.render("profile", { username: req.query.username });
+});
+
+router.get("/logout", (req, res) => {
+  res.redirect("/");
+});
+
+module.exports = router;
diff --git a/examples/simple-ejs-app/views/home.ejs b/examples/simple-ejs-app/views/home.ejs
@@ -0,0 +1,28 @@
+<%- include('./partials/head')-%>
+
+<body class="container">
+  <%- include('./partials/header')-%>
+  <main>
+    <h3 class="display-4">नमस्ते (Namaste)</h3>
+  </main>
+
+  <div class="text-center">
+    <img
+      src="wallpaper.jpg"
+      width="300px"
+      height="100px"
+      class="img-fluid"
+      alt="simple image"
+    />
+    <blockquote class="blockquote text-center">
+      <p class="mb-0">Truth can only be found in one place: the code.</p>
+      <footer class="blockquote-footer">
+        Robert C. Martin,
+        <cite title="Source Title"
+          >Clean Code: A Handbook of Agile Software Craftsmanship</cite
+        >
+      </footer>
+    </blockquote>
+  </div>
+  <%- include('./partials/footer')-%>
+</body>
diff --git a/examples/simple-ejs-app/views/login.ejs b/examples/simple-ejs-app/views/login.ejs
@@ -0,0 +1,39 @@
+<%- include('./partials/head')-%>
+
+<body class="container">
+  <%- include('./partials/header')-%>
+
+  <form action="/profile" method="POST">
+    <div class="text-center">
+      <input
+        type="email"
+        class="ghost-input"
+        id="email"
+        name="email"
+        aria-describedby="emailHelp"
+        placeholder="Email Address"
+      />
+    </div>
+    <div class="text-center">
+      <input
+        type="text"
+        class="ghost-input"
+        id="username"
+        name="username"
+        placeholder="Username"
+      />
+    </div>
+    <div class="text-center">
+      <input
+        type="password"
+        class="ghost-input"
+        id="password"
+        name="password"
+        placeholder="Password"
+      />
+    </div>
+    <button type="submit" class="btn btn-primary">Login</button>
+  </form>
+
+  <%- include('./partials/footer')-%>
+</body>
diff --git a/examples/simple-ejs-app/views/partials/footer.ejs b/examples/simple-ejs-app/views/partials/footer.ejs
@@ -0,0 +1,10 @@
+<!-- Footer Partial Template -->
+
+<footer class="app-footer blockquote-footer">
+  Created By
+  <cite title="Source Title"
+    ><a href="https://schadokar.dev">Shubham Chadokar</a>
+    <a href="https://twitter.com/schadokar1"
+      ><img src="twitter.svg" alt="twitter" width="20px" height="20px" /></a
+  ></cite>
+</footer>
diff --git a/examples/simple-ejs-app/views/partials/head.ejs b/examples/simple-ejs-app/views/partials/head.ejs
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <title>Simple ejs app</title>
+    <!-- Bootstrap core CSS -->
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="app.css" />
+  </head>
+</html>
diff --git a/examples/simple-ejs-app/views/partials/header.ejs b/examples/simple-ejs-app/views/partials/header.ejs
@@ -0,0 +1,10 @@
+<!-- Header Partial Template -->
+<header>
+  <h1 class="display-2">Simple EJS App</h1>
+  <nav class="nav nav-masthead justify-content-center">
+    <a id="home" class="nav-link" href="/">Home</a>
+    <a id="login" class="nav-link" href="/login">Login</a>
+    <a id="logout" class="nav-link" href="/logout">Logout</a>
+    <a id="profile" class="nav-link" href="/profile">Profile</a>
+  </nav>
+</header>
diff --git a/examples/simple-ejs-app/views/profile.ejs b/examples/simple-ejs-app/views/profile.ejs
@@ -0,0 +1,28 @@
+<%- include('./partials/head')-%>
+
+<body class="container hero-image">
+  <%- include('./partials/header')-%>
+
+  <main>
+    <h3 class="display-4">नमस्ते (Namaste) <%= username %></h3>
+  </main>
+  <div class="text-center">
+    <img
+      src="wallpaper.jpg"
+      width="300px"
+      height="100px"
+      class="img-fluid"
+      alt="simple image"
+    />
+    <blockquote class="blockquote text-center">
+      <p class="mb-0">Truth can only be found in one place: the code.</p>
+      <footer class="blockquote-footer">
+        Robert C. Martin,
+        <cite title="Source Title"
+          >Clean Code: A Handbook of Agile Software Craftsmanship</cite
+        >
+      </footer>
+    </blockquote>
+  </div>
+  <%- include('./partials/footer')-%>
+</body>