add README.md and about page

md1285 · Mar 1, 2019 · b0b629a · b0b629a
1 parent 6c4ab6f
commit b0b629a
Show file tree

Hide file tree

Showing 11 changed files with 164 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -0,0 +1,61 @@
+
+## Tag
+
+### Overview
+
+Welcome to Tag, a version control application for creative collaboration!
+
+<img src="./imgs/login_screenshot.png">
+
+With tag, you can collaborate on articles, scripts, stories and more with as many collaborators as you like.
+
+To start, simply log in with Google.
+
+<img src="./imgs/projects_page.png">
+
+
+From here, you can view any projects you may already have, including projects collaborators may have added you on. You can also create a new project.
+
+<img src="./imgs/new_project.png">
+
+You can view your project by clicking the link on your Projects page. From here, you can add content to your project, submit edits, view previous versions, and add collaborators to your project.
+
+<img src="./imgs/edit_page.png">
+
+When working on a project with collaborators, each edit must be reviewed by all collaborators for approval. You can tell when a project has pending approvals by the yellow warning icon next to the project’s name, and by the fact that a project with pending approvals cannot be edited.
+
+<img src="./imgs/locked_page.png">
+
+If all collaborators on a project approve an edit, that edit becomes the project’s master version, and the project can once again accept edits.
+
+If any collaborator on a project rejects an edit, the document reverts to the previous version.
+
+Enjoy!
+
+---
+### Technologies Used
+
+Tag is a full-stack application built with MongoDB, Express, and Node.js, with Embedded JavaScript files and Materialize to build the views.
+
+Node modules include Mongoose for object modeling, and Oauth and Passport for authentication.
+
+The app's data is hosted on MongoDB Atlas, and the app is deployed on Heroku.
+
+Full Technology List:
+<br>
+HTML | CSS | JavaScript | Node.js | jQuery | MongoDB | Mongoose | Express.js | EJS | Materialize | Oauth2 | Passport.js | MongoDB Atlas | Heroku
+
+---
+### Getting Started
+<a href="https://tag-app-md.herokuapp.com/"> Check out the deployed app on Heroku.</a>
+
+<a href="https://trello.com/b/7n53hBSR/tag">And take a look at the Trello board I used to develop it. </a>
+
+---
+### Next Steps
+
+I would like to implement the following next steps:
+
+1. Allow users to see who submitted an edit.
+2. Allow users to accept or reject a project invitation.
+3. Display pending edits in a different color.
diff --git a/controllers/index.js b/controllers/index.js
@@ -2,7 +2,14 @@ const User = require('../models/user');
 
 module.exports = {
     index,
-
+    about
+}
+
+function about(req, res){
+    res.render('about', {
+        title: 'About',
+        user: req.user
+    })
 }
 
 function index(req, res, next) {

diff --git a/imgs/edit_page.png b/imgs/edit_page.png
diff --git a/imgs/locked_page.png b/imgs/locked_page.png
diff --git a/imgs/login_screenshot.png b/imgs/login_screenshot.png
diff --git a/imgs/new_project.png b/imgs/new_project.png
diff --git a/imgs/projects_page.png b/imgs/projects_page.png
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -184,3 +184,11 @@ button {
   justify-content: flex-end;
   align-items: center;
 }
+
+.about {
+  margin: 5px;
+}
+
+.about-container {
+  width: 60%;
+}
diff --git a/routes/index.js b/routes/index.js
@@ -6,6 +6,7 @@ const indexCtrl = require('../controllers/index');
 
 /* GET home page. */
 router.get('/', indexCtrl.index);
+router.get('/about', indexCtrl.about);
 
 //authentication routes
 router.get('/auth/google', passport.authenticate(

diff --git a/views/about.ejs b/views/about.ejs
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Tag</title>
+    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link type="text/css" rel="stylesheet" href="/stylesheets/materialize.min.css" media="screen,projection" />
+    <link rel='stylesheet' href='/stylesheets/style.css' />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script defer type="text/javascript" src="/javascripts/materialize.min.js"></script>
+    <script defer type="text/javascript" src="/javascripts/main.js"></script>
+</head>
+
+<body class="black white-text">
+    <nav class="black center-align">
+        <% if (user) { %>
+        <a href="/logout" class="btn">Log Out</a>
+        <% if (title !== 'All Projects Page') { %>
+        <a href="/projects" class="btn">Projects</a>
+        <% } %>
+        <% } else { %>
+        <a href="/auth/google" class="btn">Login with Google</a>
+        <% } %>
+        <a href="/about" class="btn">About</a>
+    </nav>
+    <h1>Tag</h1>
+    <% if (user) { %>
+    <p class="welcome">Hello, <%= user.name.match(/[^\s]+/) %></p>
+    <% }   %>
+    <br>
+
+    <div class="about-container">
+        <p class="about">
+            Welcome to Tag, a version control application for creative collaboration!
+        </p>
+        <br>
+
+        <p class="about">
+            With tag, you can collaborate on articles, scripts, stories and more with as many collaborators as you like.
+        </p>
+        <br>
+
+        <p class="about">
+            To start, simply log in with Google.
+        </p>
+        <br>
+
+        <p class="about">
+            From here, you can view any projects you may already have, including projects collaborators may have added
+            you on. You can also create a new project.
+        </p>
+        <br>
+
+        <p class="about">
+            You can view your project by clicking the link on your Projects page. From here, you can add content to your
+            project, submit edits, view previous versions, and add collaborators to your project.
+        </p>
+        <br>
+
+        <p class="about">
+            When working on a project with collaborators, each edit must be reviewed by all collaborators for approval.
+            You can tell when a project has pending approvals by the yellow warning icon next to the project’s name, and
+            by the fact that a project with pending approvals cannot be edited.
+        </p>
+        <br>
+
+        <p class="about">
+            If all collaborators on a project approve an edit, that edit becomes the project’s master version, and the
+            project can once again accept edits.
+        </p>
+        <br>
+
+        <p class="about">
+            If any collaborator on a project rejects an edit, the document reverts to the previous version.
+        </p>
+        <br>
+
+        <p class="about">
+            Enjoy!
+        </p>
+    </div>
+
+    <%- include ./partials/footer.ejs %>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
@@ -23,6 +23,7 @@
     <% } else { %>
     <a href="/auth/google" class="btn">Login with Google</a>
     <% } %>
+    <a href="/about" class="btn">About</a>
   </nav>
   <h1>Tag</h1>
   <% if (user) { %>