yujiaaoyu / DatingPlatform

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.