/Large

Medium clone where users can write articles, leave comments, and follow other users

Primary LanguageJavaScript

Large (A Clone of Medium)

Screen Shot 2022-04-16 at 10 18 03 PM

Large is a platform where users can share diverse thoughts, read and write stories of any topic, follow certain topics of interest, as well as follow other users. It is inspired by the the social publishing platform Medium.

| Live Site | MVP Feature List | Database Schema | Frontend Routes | API Documentation | User Stories |

Technologies Used

Large is built on Node JS, HTML, and CSS for its frontend, Express and Sequelize for its backend, and a PostgreSQL database.

Getting Started

  1. Clone this repository

  git clone git@github.com:ethanchen7/Large.git

  1. Install dependencies

  npm install

  1. Create a .env file in the root direction based on the .env.example given.

  2. Create a user in psql based on your .env DATABASE_URL app_name

  psql -c "CREATE USER <username> PASSWORD '<password>' CREATEDB"

  1. Create a database in psql based on your .env DATABASE_URL db_name.

  2. Start your shell and migrate and seed the database.

  npx dotenv sequelize db:migrate

  npx dotenv sequelize db:seed:all

Features Highlight

Dynamic Clap, Comment, and Edit Bio Rendering

 Users are able to clap and comment on a story without being redirected from the page. They are also able to edit their biography from their user profile page. This allows for a seamless reading and interactive experience.

User Following/Followers Feature

 Users are able to follow and unfollow other users. This involved associated User instances with other User instances in a self-joining association:

const columnMappingOne = {
      // User -> User, through Follow as follower
      through: "Follow",
      otherKey: "followingId",
      foreignKey: "followerId",
      as: "followings",
};
const columnMappingTwo = {
      // User -> User, through Follow as following
      through: "Follow",
      otherKey: "followerId",
      foreignKey: "followingId",
      as: "followers",
};
User.belongsToMany(models.User, columnMappingOne);
User.belongsToMany(models.User, columnMappingTwo);

Screen Shot 2022-04-17 at 11 08 07 AM

Publishing a Story

 Users are able to publish a story and tag with a topic of their choice. This feature deviates from a traditional form due to the modal pop up and publish buttons being outside of the form element.

Welcome (Splash Page for unauthenticated users)

Screen Shot 2022-04-16 at 10 29 50 PM Screen Shot 2022-04-16 at 10 30 12 PM

Story Feed

Screen Shot 2022-04-16 at 10 30 47 PM

Single Story Page

Screen Shot 2022-04-16 at 10 31 18 PM

Comment Modal

Screen Shot 2022-04-16 at 10 31 50 PM

Create a Story

Screen Shot 2022-04-17 at 11 38 13 AM

Screen Shot 2022-04-17 at 11 38 41 AM

Profile Page

Screen Shot 2022-04-17 at 11 32 00 AM

Screen Shot 2022-04-17 at 11 32 34 AM