This is the front-end repository for the CC Practicum Team 4 project.
Welcome to Adopt the Dream! This application allows users to browse and adopt adorable pets in need of loving homes. With a user-friendly interface and a range of features, our app aims to connect pet lovers with their perfect furry companions.
To run the Adopt the Dream App locally on your machine, follow these steps:
-
Clone the repository.
git clone https://github.com/Code-the-Dream-School/cc-practiccum-team-4-front
-
Install dependencies.
cd cc-practicum-team-4-front npm install -
Build and run the project.
npm start
-
Navigate to http://localhost:3000 in your web browser to access the Adopt the Dream App.
Make sure to set up the back-end server first by following the instructions in the back-end README. Also, ensure you have Node.js installed on your system.
- User Registration: Users can create an account by providing their basic information. Registration allows them to access additional features and personalize their experience.
- User Profile: Each user has a profile page where they can view and update their personal information, manage their favorite pets, and track the status of their adoption applications.
- Browse Pets: Users can explore a wide variety of pets available for adoption. Each pet listing includes details such as breed, age, gender, and a brief description.
- Favorites: Users can add pets to their favorites list for easy reference. They can view and manage their favorite pets from their profile.
-
Search: The search by name feature quickly retrieves relevant results from our extensive database of available pets.
-
Filters: In addition to the search function, the Adopt the Dream App offers various filters that users can apply to further refine their search results. These filters enable users to specify their preferences based on specific attributes such as: Breed: Users can select breed from a comprehensive list to narrow down the search results to pets of the chosen breed. Age Range: Users can filter pets based on their desired age range, such as puppies, young adults, or seniors. Gender: Users can choose to view pets of a specific gender, whether male, female, or both. Size: Users can filter pets based on their size, such as small, medium, or large breeds.
-
Adoption Process: Interested users can initiate the adoption process for a specific pet. This involves filling out an application form, which will be reviewed by pet shelter.
-
Application Form: We have provided an adoption application form for interested users. The form collects essential information about the user, their living situation, and their preferences for adopting a pet.
-
Adoption Confirmation: Once the adoption application is reviewed and approved, the user will receive a confirmation letter containing further instructions and details about the adoption process.
-
Donate: We have a dedicated donation page for users who wish to contribute to shelter. Users can choose to make a one-time donation at any time.
- About Us: Users can learn more about pet sheltor Adopt the Dream, their mission and their commitment to animal welfare on the About Us page. It provides insight into pet shelter work and achievements.
- Contact: If users have any questions, concerns, or feedback, they can reach out to pet sheltor Adopt the Dream through the contact page.
The Adopt the Dream App is built using the following technologies:
- React: A JavaScript library for building user interfaces.
- UI: CSS, React bootstrap and styled-components.
- Node.js: A runtime environment for executing JavaScript code on the server.
- MongoDB: A NoSQL database for storing pet and user information.
- Axios: A promise-based HTTP client for making API requests.
Thank you for choosing the Adopt the Dream App. We hope you find your perfect furry companion and make a positive impact on their lives!