Petly Frontend

Welcome to Petly, a web application dedicated to pets, providing a platform for pet owners to connect, sell, and find pets in good hands.

About the Project

Petly is a full-stack web application built with React on the frontend and Node.js/Express on the backend. The project is built using React and communicates with the Petly backend through RESTful API calls. The page is designed with a responsive layout, making it accessible to users on various devices such as desktops, laptops, tablets, and smartphones.

Overall, the Petly Frontend project is a comprehensive platform for pet owners to connect, sell, and find pets in good hands, as well as access news and information about pet car. Users can browse through listings of pets available for adoption, as well as create their own listings to sell or give away pets. Additionally, users can add their own pets to their profiles, complete with information about their pet's breed, age, and other relevant details.

Feature

1. User Authentication: The project allows users to create an account, log in, and log out. User authentication is handled via JSON Web Tokens (JWT), which are generated by the backend API and stored in the browser's local storage.

2. Notices: The project includes a feature that allows users to post notices about sell, lost/found and 'in good hands' pets. This feature is intended to help reunite lost pets with their owners as quickly as possible. Users can create a new notice, including a photo of the pet, a description, and contact information, and browse existing notices to see if any match their missing pet. Also users can list their pets for sale or adoption, providing information about the pet's breed, age, gender, size, color, and photos. They can also set a price for the pet and specify whether they prefer in-person or remote transactions.

3. Favorite Pets: Users can mark their favorite pets to easily access them later.

4. Search and Filtering: The web application allows users to search and filter pets based on various criteria, such as breed, age, gender, size, color, location, and status (e.g., for sale, in good hands, or lost). This makes it easier for users to find the pet they are looking for.

5. Responsive Design: The project is designed to be responsive, meaning that it adapts to different screen sizes and devices. This allows users to access the project from desktops, laptops, tablets, and smartphones.

6. Error Handling and Validation: The web application includes error handling and validation to ensure that users provide correct input and that the web application does not crash or display unexpected behavior.

Technologies Used

• React
• Redux
• Axios
• MUI

Getting Started

To get started with the project, first clone this repository to your local machine:

  git clone https://github.com/medvol/project-petly-frontend.git

Next, navigate to the project directory and install the necessary dependencies using npm:

 cd project-petly-frontend
 npm install

Create a .env file in the project directory and set the following environment variables:

 REACT_APP_API_URL=<url_of_petly_backend>

Replace <url_of_petly_backend> with the URL of your locally running Petly Backend instance (e.g., http://localhost:8000).

Finally, start the development server:

 npm start

You should now be able to access the Petly application at http://localhost:3000/.