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 |
Bestie's feed displays all available bestie pets.
Discover and search for new besties here!
A regular user's profile show all the applications they've submitted.
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.
Add a new adoption form to the database
Add a new besting listing to the database
To build/run project locally, please follow these steps:
- Clone this repository
git clone https://github.com/makon57/bestie.git- Install Pipfile dependencies and create the virtual environment
pipenv install- Install npm dependencies for the
/react-app
cd react-app
npm install-
In the
/root directory, create a.envbased on the.env.examplewith proper settings -
Setup your PostgreSQL user, password and database and ensure it matches your
.envfile -
Before running any flask commands, confirm you are in the pipenv virtual env. If not, run the command:
pipenv shell- In the root folder, create the database by running in the terminal:
flask db init- In the root folder, migrate tables to the database by running in the terminal:
flask db migrate- In the root folder, seed the database by running in the terminal:
flask seed all- Start the flask backend in the
/root directory
flask run- Start the frontend in the
/react-appdirectory
npm startI 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:
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.
- Search Bar
- Direct Messages
- Articles Feed
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.
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.
