Social media App

This project was a more complex full stack social media application, using the MERN stack along with several front-end and back-end technologies / methods

Installation

API (server folder)

cd api
npm install
npm start

Package.json

  "dependencies": {
    "bcrypt": "^5.1.1",
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "gridfs-stream": "^1.1.1",
    "helmet": "^7.0.0",
    "jsonwebtoken": "^9.0.1",
    "mongoose": "^7.4.5",
    "morgan": "^1.10.0",
    "multer": "^1.4.4",
    "multer-gridfs-storage": "^5.0.2"
  },
  "name": "server",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "devDependencies": {
    "nodemon": "^3.0.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon index.js"
  },

React UI (client folder)

cd client
npm install
npm start

Package.json

  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.6",
    "@mui/material": "^5.14.6",
    "@reduxjs/toolkit": "^1.9.5",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "dotenv": "^16.3.1",
    "formik": "^2.4.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-redux": "^8.1.2",
    "react-router-dom": "^6.15.0",
    "react-scripts": "5.0.1",
    "redux-persist": "^6.0.0",
    "web-vitals": "^2.1.4",
    "yup": "^1.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

API Routes:

Auth routes: http://localhost:3000/auth

POST: "/login"
POST: "/register"

Post routes: http://localhost:3001/posts/

GET: "/"
GET: "/:userId/posts" (returns posts filtered by user)
GET: "/search/:key" (returns posts based on a search parameter)
PATCH: "/:id/like" (adds / removes likes)
DELETE: "/delete/:id" (deletes the post)
POST: "/comments/:id" (adds a comment)
DELETE: "/comments/:id" (deletes a comment)

User routes: http://localhost:3001/users/

GET: "/:id" (returns specific user)
GET: "/:id/friends" (gets user friend list)
PATCH: "/:id/:friendId" (adds or removes friend from the friend list)

Features / pages

Register / log in pages

HomePage

ProfilePage

SearchPage

Personal Notes

This was a much more complex front-end than my previous projects, so for some of the feature I used some online tutorials to format the correct syntax

Project Goals

• To get more comfortable with react components and both front and back end authentication
• To introduce more features than my last project, making the website more interactive with multiple pages etc
• To create more API calls from the front-end (likes / comments / searches etc)

Successes

• The use of Redux store made the authentication process on the front end much more straight-forward and simple, and authentication took place both in the back and front end.

• The use of multiple reusable components / widgets made the multi-page structure much quicker and consistent.

• Other styling aspects (useTheme / light and dark modes / the user and post widgets with ternary statements based on mediaQueries) made the site much more visually appealing

Areas to work on for next time

• Some aspects of the site were hardcoded (e.g. the advert Widget / the search term to determine the SearchPage.) Instead of this, I could have anticipated this and built the site in a more condusive way to conduct searches.
• The comments delete button didn't filter for user, due to the initial Schema of the post.comments array. Next time I will take more time in thinking about the final functionality when designing the API to ensure tweaks like this do not re-occur.