Michael's Instagram Challenge

.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es2021": true
+    },
+    "parserOptions": {
+        "ecmaVersion": "latest"
+    },
+    "rules": {
+    }
+}

.gitignore

@@ -0,0 +1,65 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# cypress.io
+cypress/screenshots
+cypress/videos

README.md

@@ -1,41 +1,68 @@
-Instagram Challenge
-===================
-
-## Instructions
-
-* Feel free to use Google, your notes, books, etc., but work on your own
-* If you refer to the solution of another coach or student, please put a link to that in your README
-* If you have a partial solution, **still check in a partial solution**
-* You must submit a pull request to this repo with your code by 9am Monday morning
+# Instagram Challenge
+```       
+      .-------------------.
+     /--"--.------.------/|
+     |Kodak|__Ll__| [==] ||
+     |     | .--. | """" ||
+     |     |( () )|      ||
+     |     | `--' |      |/
+     `-----'------'------'
+```
 
 ## Task
+I have been tasked to create a web app that will work similar to Instagram - users will be able to sign up and be able to post pictures which can be liked and commented on.
 
-Build Instagram: Simple huh!
-
-Your challenge is to build Instagram using Rails. You'll need **users** who can post **pictures**, write **comments** on pictures and **like** a picture. Style it like Instagram's website (or more awesome).
-
-Bonus if you can add filters!
+## Instructions
+Clone this repository to your desired location using `git clone https://github.com/mcsuGH/instagram-challenge.git`.\
+\
+Make sure you have the most recent update of Node and then you can run `npm install` whilst in the main directory in your terminal to install dependencies.\
+\
+You can run tests by using the command `npm run start:test` to load up the test server then using `npm test` to run the test files. Note that tests are dependent on being run like this - for example some integration tests use the fact that previous unit tests made posts in order for the integration tests to work, or that some integration tests depend on previous integration tests.\
+\
+You will need to have mongoDB to be able to run this web app in it's intended manner, you can run the commands `brew tap mongodb/brew` and then `brew install [email protected]` in order to install mongoDB.\
+\
+In order to access for the website to function, you will need to run the server on localhost by using `npm start` and then going on `localhost:2800` to access the website. From there, you will be able to make an account and those account details will then be stored on your local database.\
+\
+You will be able to post pictures so make sure to clear the database every so often so that it does not take up too much space - to do this, open `mongo` in the terminal, use the command `use instagram` (or `use instagram_test` if you wish to access the test database, although that gets cleared every time tests are ran) to access the instagram database, then you can use `db.users.drop()` and `db.posts.drop()` to clear the database. Note: currently storing images inside the database is not working (currently storing urls of images) but you can still clear the database if you wish.\
+\
+Here are some images to show what it looks like:
+![Screenshot](https://i.imgur.com/h9QYDfg.png)
+![Screenshot](https://i.imgur.com/8AsVFYR.png)
 
-## How to start
+## User Stories
+```
+As a User,
+So that nobody else can use my account,
+I would like to be able to log out
 
-1. Produce some stories, break them down into tasks, and estimate
-2. Fork this repo, clone, etc
-3. Initialize a new rails project
+As a User,
+So that I can share pictures to other people,
+I would like to be able to post pictures
 
-Remember to proceed in small steps! Getting confused? Make the steps even smaller.
+As a User,
+So that I can interact with people I like,
+I would like to be able to comment on pictures
 
-## Code Quality
+As a User,
+So that I can give other people my approval,
+I would like to be able to like their pictures
 
-For linting, you can use the `.rubocop.yml` in this repository (or your own!).
-You'll need these gems:
+Bonus:
+As a User,
+So that I can make my pictures look even better,
+I would like to be able to add filters to them
+```
 
-```ruby
-group :development, :test do
-  gem 'rubocop', '1.20', require: false
-  gem 'rubocop-rails'
-end
+## References
+```
+https://www.asciiart.eu/electronics/cameras
+https://geeksforgeeks.org/upload-and-retrieve-image-on-mongodb-using-mongoose/
 ```
+used the above for the ASCII art, made by Joan Starks\
+used the above to upload and retrieve images in mongoDB - abandoned for now, would make my req.body empty for some reason making my posts empty.
 
-You can also lint Javascript, CSS, and ERB — feel free to research this. These
-will help you to train yourself to produce cleaner code — and will often alert
-you to mistakes or mishaps!
+## Functionality yet to be added
+- add more CSS - currently only added a bar at the top and a background for the post images, displaying the images in rows of 3.
+- make it so each user can only like a post once (would just need to create a new collection for likes inside database with foreign keys for the post and the user who liked the post)
+- add filter function
+- add the ability to upload images onto the database rather than using a external image host

app.js

@@ -0,0 +1,98 @@
+var createError = require('http-errors');
+var express = require('express');
+var path = require('path');
+var cookieParser = require('cookie-parser');
+var logger = require('morgan');
+const session = require("express-session");
+const methodOverride = require("method-override");
+var hbs = require('hbs');
+const moment = require('moment');
+const multer=require('multer');
+var bodyParser = require('body-parser');
+
+const homeRouter = require("./routes/home");
+const postsRouter = require("./routes/posts");
+const sessionsRouter = require("./routes/sessions");
+const usersRouter = require("./routes/users");
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'hbs');
+
+app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+app.use(methodOverride("_method"));
+app.use(bodyParser.urlencoded({ extended: false }))
+app.use(bodyParser.json())
+
+app.use(
+  session({
+    key: "user_sid",
+    secret: "super_secret",
+    resave: false,
+    saveUninitialized: false,
+    cookie: {
+      expires: 600000,
+    },
+  })
+);
+
+// Helper functions
+hbs.registerHelper('formatDate', function(dateString) {
+  return new hbs.SafeString(
+      'at ' + moment(dateString).format("HH:mm") +' on ' + moment(dateString).format("MMM D") + ' ' + moment(dateString).format("YYYY")
+  );
+});
+
+hbs.registerHelper('ifEqual', function(userId, postId) {
+  if (userId === postId) {
+    return true
+  } 
+  return false
+})
+
+// clear the cookies after user logs out
+app.use((req, res, next) => {
+  if (req.cookies.user_sid && !req.session.user) {
+    res.clearCookie("user_sid");
+  }
+  next();
+});
+
+// middleware function to check for logged-in users
+const sessionChecker = (req, res, next) => {
+  if (!req.session.user && !req.cookies.user_sid) {
+    res.redirect("/sessions/new");
+  } else {
+    next();
+  }
+};
+
+// route setup
+app.use("/", homeRouter);
+app.use("/posts", sessionChecker, postsRouter);
+app.use("/sessions", sessionsRouter);
+app.use("/users", usersRouter);
+
+// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+  next(createError(404));
+});
+
+// error handler
+app.use(function(err, req, res, next) {
+  // set locals, only providing error in development
+  res.locals.message = err.message;
+  res.locals.error = req.app.get('env') === 'development' ? err : {};
+
+  // render the error page
+  res.status(err.status || 500);
+  res.render('error');
+});
+
+module.exports = app;