yixiangxie-neu / logmypet

LogMyPet

First iteration

80% Milestone

60% Milestone

This is the repo of LogMyPet.

Author: Yixiang Xie & Ting Tang

Class Link: link

Project Objective: For project 3, we are required to create a full stack application with Node + Express + Mongo as the backend and React with hooks as the frontend. We decided to build a platform that allows the users to create profiles for their pets and to log several behaviors for their pets, such as drinking water, eating food or defecating. For the final project, we are required to iterate over project 3 incorporating concepts of design, accessibility and usability. Updates and changes are documented in Usability test report.

Screenshot:

Instructions to build/run:

1. Before running the project locally, you should have MongoDB installed and running on you device. For how to install and run MongoDB on you device, check this link.
2. Git clone this project to your local (run git clone [email protected]:YixiangXie-NEU/LogMyPet.git in your terminal)
3. Navigate to the root directory (run cd LogMyPet in your terminal)
4. Init the database with our data (run yarn init:db in your terminal)
5. Install all the required dependencies (run yarn install:all in your terminal)
6. Create a .env file and configure proper session secrete (refer to .env_example)
7. Build and run the project locally (run yarn start in your terminal)
8. Access the page in http://localhost:3000

Typography: We use Poppins from Google Fonts as our font through out the whole application. Different weights are used to satisfy our needs.

Color palette:

Demo: To view the deployed demo website, go to https://log-my-pet.herokuapp.com and login with admin123 and 1234567.

First iteration design document: link

Final design document: link

Usability test report: link

Design mockup: link

First iteration introduction slides: link

Final introduction slides: link

First iteration demo video: link

Final demo video: link

Technical requirements: React with hooks, Bootstrap, Node, Express, Mongo

Favicon source: favicon.io

Font source: Google Fonts

Icon source: IconScout