Skip to content

MiguelLamas/final-project-front-end-care-full-app

 
 

Repository files navigation

DEMO LINK




List of Contents

  1. Introduction
  2. Demo
  3. Features
  4. Getting Started
  5. Tech Stack
  6. Color Reference
  7. Running Tests
  8. The Team
  9. Appendix



Care-Full App 🏥🐈🐶🐇

Welcome to Care-Full!

This app was created as part of the School of Code bootcamp, a team of 6 animal lovers came together and began brainstorming what real world problem we wanted to solve. Soon we realised a common issue experienced amongst pet owners - remembering when specific symptoms began and tracking how many times a symptom has been experienced. This then led us onto talking about the difficulty of remembering when you need to administer medication and attend appointments. After lots of ideation and grand ideas, we pulled ourselves back to reality and came up with a viable product that we could plan and produce in only 4 weeks, this is the result.

Problem statement: Having a sick pet is a stressful situation, on top of our already busy lives, this additional stress can make it difficult to remember the specific details of your pet's illness and their needs.

Solution: This app aims to alleviate some of the stress that comes with having a sick pet by providing the user with an easy way to track symptoms and medications and facilitate better and more accurate in person communication when visiting the vets.

This README is for the front-end of the Care-Full app. If you would like to explore the back-end of the app please go to the backend repository




App-Demo



Features 📱

  • Secure login and authorisation provided by Auth0
  • Add multiple pets
  • Update pet information
  • Symptom tracker:
    • Add different symptoms
    • Automatically stores instances of the same symptoms in one convenient location
    • Keep track of the time and date that symptoms occured
  • Schedule Tracker & reminder system:
    • Keep track of medications/appointments for your pet
    • Schedule recurring reminders
    • Mark reminders as done - automatically moved into your history page, should you need to check dates
    • Delete reminders that you no longer want/need
  • Useful links page directs you to cat/dog friendly resources depending on your pet species
  • Toggle for colourblind users
  • Modals on every page to provide instructions for the user every step of the way


Getting Started

Backend

The backend is deployed on Heroku however if you would like to run locally you will need to follow the steps below.

  1. Git clone the backend repository by pasting the following into your terminal:
  git clone https://github.com/SchoolOfCode/final-project_back-end-team-con-cat-enate-room-7
  1. Install all required dependencies by running:
  npm i
  1. Copy your database (e.g. Heroku) URL into the .env file, following the format:
 DATABASE_URL = <Database URL goes here>
  1. Create all tables in your database by running the following scripts in the terminal:
npm run createSymptomsTable
npm run createRemindersTable
npm run createPetsTable
  1. To populate the tables you can achieve this by interacting with the front-end, you can either run this locally or host on a hosting platform - we recommend Netlify but you are free to choose your own. For assistance deploying on Netlify please click here.

  2. Finally, to run the server locally use the following script within your terminal:

  npm run dev

Front-end

To run the front-end locally follow the steps below:

  1. Git clone the front-end repository by pasting the following into your terminal:
  git clone https://github.com/SchoolOfCode/final-project_front-end-team-con-cat-enate-room-7
  1. Remember to navigate to the correct folder: final-project_front-end-team-con-cat-enate-room-7

  2. Install all necessary dependencies by running the following command in the terminal:

  npm i
  1. Start the app using:
  npm run dev



Tech Stack⚙️

Client: Next.js, CSS, Chakra Component Library, Auth0
Server: Node.js, Express, PostgreSQL, Nanoid
Client-side Testing: React Testing Library, Cypress, Jest
Server-side Testing: Supertest, Jest




Colour Reference 🖌️

Colour Hex
Main #448FFF #448FFF
secondary #B2D1FF#B2D1FF
Background #fff #fff



Running Tests

To run unit tests, run the following command

  npm run test



The Team

We are Con-Cat-enate!




Appendix📝


About

Final Project - Front End - Care-full App

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 83.7%
  • CSS 16.3%