Bestie is an animal rescue site inspired by SecondHand Hounds and the Animal Humane Society. It was made for people who are interested in adopting, fostering, or sponsoring a pet. It is a fullstack React App made with a Redux state manager and a backend using Python, Flask, SQL-Alchemy, PostgresSQL, and AWS S3 and other technologies.


Table of Contents
1. Features
2. Installation
3. Technical Implementation Details
4. Technologies
5. Wiki Documentation
6. Future Features
7. Special Thanks
8. Conclusion
8. Contact

Features

Splash Page

Splash

Sign Up & Login

Sign Up Login

Feed Page

Bestie's feed displays all available bestie pets. Discover and search for new besties here! Feed Page Feed Page Feed Page Feed Page

Profile

Demo Profile

A regular user's profile show all the applications they've submitted. Demo Profile Demo Apps Demo View

Foster Profile

A foster user's profile will display all the applications they've submitted as well as all the listings they've created alng with the applications that have been submitted for that particular listing, if any. Foster Profile Foster Apps Foster View

Adoption Form

Add a new adoption form to the database Add {resource-1} Edit your adoption form Edit Form Delete your adoption form Delete Adopt

Bestie Listing Form

Add a new besting listing to the database Add Bestie Edit and Delete bestie listing in the database Edit bestie


Installation

To build/run project locally, please follow these steps:

  1. Clone this repository
git clone https://github.com/makon57/bestie-l5-op.git
  1. Install Pipfile dependencies and create the virtual environment
pipenv install
  1. Install npm dependencies for the /react-app
cd react-app
npm install
  1. In the / root directory, create a .env based on the .env.example with proper settings

  2. Setup your PostgreSQL user, password and database and ensure it matches your .env file

  3. Before running any flask commands, confirm you are in the pipenv virtual env. If not, run the command:

pipenv shell
  1. In the root folder, create the database by running in the terminal:
flask db init
  1. In the root folder, migrate tables to the database by running in the terminal:
flask db migrate
  1. In the root folder, seed the database by running in the terminal:
flask seed all
  1. Start the flask backend in the / root directory
flask run
  1. Start the frontend in the /react-app directory
npm start

Technical Implementation Details

Using Python function to seed into the database

I had over fifty listings that need to be seeded into the database and this function helped me do just that.

Part of code is shown below:

Python Seed

Using React.Fragments

I was struggling with the requirement of a unique key in a map because it would distort the CSS on my profile component and a span tag wouldn't work, but I was able to do some research and found that React.Fragment worked great and also allowed me to pass a key to it which saved the day.

React


Technologies


Wiki Documentation


Future Features

  • Search Bar
  • Direct Messages
  • Articles Feed

Special Thanks

I couldn't have done it without these fellow peers who've given me support and community. Thank you guys are amazing!

Andrew, Henry, Pierre, Lema, Meagan, Simon, Michelle, Nico, John, Manna, Monte, Justice.

To the mentors who have given me their time and effort, thank you. I appreciate everything you've done.

Zach, Olivia, Ed, Javier, Peter.


Conclusion

This has been one of the most challenging projects but also one of the most rewarding projects I've done. This project really pushed my limits and made me break in all sorts of aways. It has been a rollcoaster from brainstorming to devleopment and finally to production. I've learned so much more about React, Python, SQLAlchemy, AWS S3, and CSS. I'll continue to edit and fix this web application and make sure to implement the future features to further polish and provide the best user experience. Thank you for your time and shoot me a message on any of the linked contact below if you'd like to talk more code.


Contact

Manna Kong