/personal-experience-editor

Primary LanguageVue

logo

Years of Experience?

Click here to the demo site

Table of Contents

About this project

Users can do the following actions.

  1. Basic Functions
  • View all public users' work experiences
  • Create, Edit, Delete their own work experiences and profile if they logged in
  • Offline Mode
  1. Advanced Functions
  • Register
  • Log-in

How to use

Website

Users can browse public personal work experience by default.

If they logged in, they could create, edit and delete their own personal profile and work experiences.

Source Kits used in this project

Front End

  • vue - The Progressive JavaScript Framework.
  • Bootstrap Vue - With BootstrapVue you can build responsive, mobile-first, and ARIA accessible projects on the web using Vue.js and the world's most popular front-end CSS library — Bootstrap v4.
  • axios - Promise based HTTP client for the browser and node.js
  • sweetalert2 - A beautiful, responsive, customizable popup boxes

Back End

  • cors - To activate Cross-Origin Resource Sharing
  • faker - To generate the seed data for testing
  • imgur-node-api - Imgur anonymous upload in nodejs using the imgur api.
  • jsonwebtoken - An implementation of JSON Web Tokens.
  • sequelize - Sequelize is a promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server.

Run the local server

Prerequisites

Clone

Clone this repository to your local machine

$ git clone https://github.com/andy922200/personal-experience-editor.git

Setup Database

Create database via MySQL Workbench Panel

> Run the following code
drop database if personal_experience_editor;
create database personal_experience_editor;

Setup the Project on your device

1. Enter the project folder

$ cd PersonalExperienceEditor

2. Install packages via npm

$ npm install

3. Edit password in config.json file

> /server/config/config.json
"development": {
  "username": "root",
  "password": "<YOUR_WORKBENCH_PASSWORD>",
  "database": "personal_experience_editor",
  "host": "127.0.0.1",
  "dialect": "mysql",
  "operatorsAliases": "Sequelize.Op"
}

4. Run migration

> run the following code in the console  @ "/server"
$ cd /server
$ npx sequelize db:migrate

5. Add Seeder

> run the following code in the console  @ "/server"
$ npx sequelize db:seed:all

6. Activate the server

$ npm run dev

7. Find the message on your console

If you see the following message, the backend server is running.
> App is listening on port 3000!

Run the frontend server

1. Enter the project folder

> Open a new terminal window and enter the client folder
$ cd PersonalExperienceEditor/client

2. Install packages via npm

$ npm install

3. Compiles the webpack for development

$ npm run serve

4. Format the coding style( If necessary )

$ npm run lint

Author