/ReactAnimalShelter

React Front End w/ C# MySQL Backend

Primary LanguageC#MIT LicenseMIT

Shelter WOW!

A animal shelter frontend application built with React and Love.

By Dusty McCord, Steph Podolak, Patrick Kille, Geoff Goetz

Components Hierarchy

Diagram

User Stories

Component Story
Add Cat Users should be able to add and update a cat listing with name, age, breed, gender
List Cats Users should be able to list all cats in the shelter
Cat Details Users should be able to view a specific cat's details by clicking on a cat in the cat list
Adopt a Cat Users should be able to adopt a cat and that cat would be removed from the shelter list
Add Dog Users should be able to add and update a dog listing with name, age, breed, gender
List Dogs Users should be able to list all dogs in the shelter
Dog Details Users should be able to view a specific dog's details by clicking on a dog in the dog list
Adopt a Dog Users should be able to adopt a dog and that dog would be removed from the shelter list

Setup/Installation Requirements

Install .NET Core

on macOS:

  • Click here to download a .NET Core SDK from Microsoft Corp.
  • Open the file (this will launch an installer which will walk you through installation steps. Use the default settings the installer suggests.)

on Windows:

  • Click here to download the 64-bit .NET Core SDK from Microsoft Corp.
  • Open the .exe file and follow the steps provided by the installer for your OS.

Install dotnet script

Enter the command dotnet tool install -g dotnet-script in Terminal (macOS) or PowerShell (Windows).

Install MySQL and MySQL Workbench

on macOS:

Download the MySQL Community Server DMG File here. Follow along with the installer until you reach the configuration page. Once you've reached Configuration, set the following options (or user default if not specified):

  • use legacy password encryption
  • set password (and change the password field in appsettings.json file of this repository to match your password)
  • click finish
  • open Terminal and enter the command echo 'export PATH="/usr/local/mysql/bin:$PATH"' >> ~/.bash_profile if using Git Bash.
  • Verify MySQL installation by opening Terminal and entering the command mysql -uroot -p{your password here, omitted brackets}. If you gain access to the MySQL command line, installation is complete. An error (e.g., -bash: mysql: command not found) indicates something went wrong.

Download MySQL Workbench DMG file here. Install MySQL Workbench to Applications folder. Open MySQL Workbench and select Local instance 3306 server, then enter the password you set. If it connects, you're all set.

on Windows:

Download the MySQL Web Installer here and follow along with the installer. Click "Yes" if prompted to update, and accept license terms.

  • Choose Custom setup type
  • When prompted to Select Products and Features, choose the following: MySQL Server (Will be under MySQL Servers) and MySQL Workbench (Will be under Applications)
  • Select Next, then Execute. Wait for download and installation (can take a few minutes)
  • Advance through Configuration as follows:
    • High Availability set to Standalone.
    • Defaults are OK under Type and Networking.
    • Authentication Method set to Use Legacy Authentication Method.
    • Set password to epicodus. You can use your own if you want but epicodus will be assumed in the lessons.
    • Unselect Configure MySQL Server as a Windows Service.
  • Complete installation process

Add the MySQL environment variable to the System PATH. Instructions for Windows 10:

  • Open the Control Panel and visit System > Advanced System Settings > Environment Variables...
  • Select PATH..., click Edit..., then Add.
  • Add the exact location of your MySQL installation and click OK. (This location is likely C:\Program Files\MySQL\MySQL Server 8.0\bin, but may differ depending on your specific installation.)
  • Verify installation by opening Windows PowerShell and entering the command mysql -uroot -p{your password here, omitted brackets}. It's working correctly if you gain access to the MySQL command line. Exit MySQL by entering the command exit.
  • Open MySQL Workbench and select Local instance 3306 server (may be named differently). Enter the password you set, and if it connects, you're all set.

To Clone and Run this project:

Clone the project by typing this command into your terminal.

git clone https://github.com/PRKille/ReactAnimalShelter.git

Navigate to the new project folder by typing:

cd ReactAnimalShelter

To Start the database server: Navigate to the database folder with:

cd AnimalShelter.Solution
cd AnimalShelter

Install all required packages and start the server by inputting:

dotnet restore
dotnet build
dotnet ef database update
dotnet run

Move to the project directory with:

cd ..
cd ..
cd ReactAnimalShelter

Install all required packages with this command:

npm install

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

 npm build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

 npm eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Support and Contact Details

Have a bug or an issue with this application? Open a new issue here on GitHub.

Technologies Used

License

MIT

Copyright (c) 2020 Dusty McCord, Steph Podolak, Geoff Goetz, Patrick Kille