Readme.md

Table of Contents

• About the Project
• Project Preview
• Getting Started
  • Prerequisites
  • Instructions
• Author

About the Project

Vinterest is basically a pinterest inspired clone which mainly built with

• vue.js
• vuetify
• mongodb
• mongodb atlas
• mongoose
• graphql
• vue-apollo
• json-web-token
• firebase storage

And using the following package for further modification

• uuid
• bcrypt
• dayjs
• vue-social-sharing
• vue-dropzone

Basic Functionaities

As a vititor you can

• sign in as a registered user
• sign up as a new user
• browse all posts on the platform
• check out specific post detail
• search for specific post(works for tag, title and description and user comments)
• download post image
• share this post through social media(Line, Twitter, Facebook & Email)

As a signin user you can

• logout
• like post
• leave comments on certain post
• view your own profile, which includes the posts you liked
• add new post

Project Preview(Desktop)

Main page

Main page resizing(recalculate waterwall cols when resizing)

Single Post

Download and share

Login/Sign Up Modal

Add Post Modal

Profile Page

Getting Started

If you wanna try out the application , you can either visit the site using this account

username: DannyWang
password: 12345678

or use the following instructions to run on your local machine.

Prerequisites

• Node.js
• nodemon

Instructions

input the following command on your terminal

git clone https://github.com/windate3411/pinterest-clone-with-vue-grqphQL.git

enter the project folder

cd pinterest-clone-with-vue-grqphQL

create variables.env file which contains the following info under project root

// variables.env
MONGO_URI=XXXXXXXXXXXXXXXXX
SECRET=XXXXXXXXXX

install packages

npm install or npm i

finally enter the following command and visit your localhost on port 8080!

npm run dev

Author

Danny Wang