Skip to content

Latest commit

 

History

History
370 lines (292 loc) · 6.97 KB

README.md

File metadata and controls

370 lines (292 loc) · 6.97 KB
Raw

Dating Platform Web App (v 1.0)

Author: Jiaao Yu, Li Liu
Sponsor/Instructor : Jose Alvarado

About this Project

This project involves the design and development of an application and website for use by Jose Alvarado. The application will be called ‘Milk Meets Tea’ and can serve as a one-stop platform for all of the user's dating-related services. Users can view profiles of vetted service providers and hire them. The platform will also provides a ‘Groups’ feature where users can chat with each other in private groups.

Flow Diagram

Features

  • Sign Up/ Login
  • Edit Profiles, uploads profile images, and add dating prompts
  • Display personal profile and photo galleries
  • Edit Profiles, uploads profile images, and add dating prompts
  • Reset password and email

    • How to use?

    Instructions

    1. Clone the repo
    2. Open terminal, cd into the repo of this project
    3. Cd server i. install all dependencies ii. run command " nodemon start"
    4. Cd client i. install all dependencies ii. run command "npm start"
    5. create tables on your local machine (pgAdmin) Don't forget to change db.js file, which contains database inforamtion
    
# Install dependencies
$ npm install

# Run the server
$ nodemon start

# Run the client
$ npm start

# Access:
http://localhost:3000

    Tools & Libraries

    Tools

    • Front End
      • React
      • JavaScript
      • BootStrap
      • React-images
    • Back End
      • Node.js(JavaScript)
      • Express
      • Postman
      • Nodemailer
    • Data Base
      • PostgreSQL
    • Test
      • Mocha
      • Chai
      • Chai-http

    Libraries

    • Cloudinary
    • CometChat

    Dependencies

    client side:

    

    

    
package
 version

    

    
@material-ui/core
 4.12.3

    


    
@material-ui/icons
 4.11.3

    

    
element-react
 1.4.34

    

    
element-theme-default
 1.4.13

    

    
materialize-css
 6.0.1

    

    
react
 17.0.2

    

    
react-bootstrap
 1.6.1

    

    
react-dom
 17.0.2

    

    
react-router-dom
 5.2.0

    

    
react-scripts
 4.0.3

    

    
react-select
 4.3.1

    

    
react-scripts
 4.0.3

    

    
react-tag-input
 6.7.3

    

    
react-toastify
 7.0.4

    

    
web-vitals
 1.1.2

    Server side:

    

    

    
package
 version

    

    
axios
 4.12.3

    

    
bcrypt
 5.0.1

    

    
cloudinary
 1.26.2

    

    
cors
 2.8.5

    

    
dotenv
 10.0.0

    

    
express
 4.17.1

    

    
jsonwebtoken
 8.5.1

    

    
pg
 8.6.0

    Test :

    

    

    
package
 version

    

    
mocha
 9.0.3

    

    
chai
 4.3.4

    

    

    
chai-http
 4.3.0

    Included files

    Source files

    There are several files include. There are:

    Server:
    middleware

    authorization.js

    JWT web token is used to identify authorized users. A jwt token contains a Header, a Payload, and a Signature. Viw more

    validInfo.js -check the inputs

    routes

    coach.js

    Handle request related to coaches. Including "become a coach", "edit coaches profiles", and "upload images".

    reset-password.js

    Handle request of resetting password.

    confrim-reset-password.js

    Handle request of resetting password.

    dashboard.js -get dashboard page.
    settings.js -get settings page.
    jwtAuth.js -handle request of register, login, edit profile, upload photos, add prompts, delete images, and review personal home pages.
    index.js

    Client:
    src/components All client-side components and .css files.

    index.js

    Database
    database.sql -sytanx to create the database

    Database

    We use pgAdmin to create our database and tables.

    This project uses 5 tables, the syntax to create the tables can be found in file 'database.sql'.

    Group Tables
    Users users
    user_images
    prompts
    Coaches coaches
    coach_images

    Tests

    1. We use Postman to test our API.

    Eaxmple:

    This is an exemple of getting data from our coaches table, when we go into the dashboard page, all coaches information will be listed.

    2. We use Mocha to do a simple REST test, all files can be found under the test folder.

    Wireframes

    This project follows the wiframe: See wirefames!

    Video Walkthrough

    Landing page

    Register

    Log Out

    Login, go to settings, edit account, see personal profile, photo gallery, delete images

    Edit User Profile

    Edit Coach Profile

    If you cannot see the aboving gifs, please see here.

    And here is the video walkthrough, click me.