Final Project

For CSE170/COGS120 Interaction Design for Winter 2020 COGS120/CSE170 Interaction Design

Tech Stack:

Front-end: HTML5/CSS3/JS(ES6), Jquery, Bootstrap 4, AJAX, socket.io

Back-end: Mongoose(Mongodb), mlab, Heroku, Restful API, Node.js, express,ejs

Other tools: Git/Github, Figma

Group members:

Shuchang Liu

Sabha Mobini Fahalari

Ivan Luu

Target Users:

Drivers and people who interested in driving, car racing, etc.

Functions:

An online platform for users to share experience, ask questions and provide help.

Project Pages:

This project has 3 pages:
Home, Q&A and Profile.
Our app's features:

1. User login (username & password)
   
2. User Sign-up with profile pictures
   
3. Homepage: Categories for common car problems, which may include common questions and answers. The search box may, but only with exact matches, inaccurate matches are not currently supported.
   
4. Q&A: If users cannot find an answer under the categories located in 'Home', then they can use our Q&A section to chat with an expert. Users are allowed to type in their question and select an expert from online users provided in the dropdown menu. A question will cost 1 coin, but users get 1 free coin to ask a question. Users will be able to get coins by answering questions in the near future.
   
5. User profile: Users can always check their profile by clicking the button at the bottom.
   

Project Details and Snapshots:

Login Page:

Home section:

Plan A:

Plan B:

Q&A:

(1) User 'admin' ask User 'sahba' a question,

(2) User 'sahba' received a notice,

(3) User 'sahba' saw a brief of the question.

(4) User 'sahba' clicked the notice and see more about this question(the question may be too long).

(5) Two users discussing about the problem.

Profile:

Menu:

Help:

Contact Info: