Giter Club home page Giter Club logo

petsadoptify's Introduction

Pet Adoption Site

Overview

The Pet Adoption Site is a web application designed to help users find pets available for adoption. Users can browse a list of pets, filter the results by breed, age, and gender, and view detailed information about each pet. The site aims to facilitate the adoption process by providing all necessary information in one place.

Features

  • Pet Listings: Display a list of available pets with images and basic details.
  • Search and Filter: Search for pets based on breed, age, and gender.
  • Detailed View: Click on a pet to see detailed information including name, breed, gender, age, and additional info.
  • Adopt Me Button: Users can express interest in a pet by clicking the "Adopt Me" button, which stores pet details and redirects to an adoption form.

Technologies Used

  • Frontend: HTML, CSS, JavaScript
  • Backend: Node.js, Express
  • Database: MongoDB
  • JavaScript Libraries: Fetch API for data fetching

Installation

Prerequisites

  • Node.js and npm installed
  • MongoDB installed and running

Setup

  1. Clone the repository:

    https://github.com/beater35/petsadoptify.git
    cd project_root
  2. Install dependencies:

    npm install
  3. Configure environment variables: Create a .env file in the root directory and add your MongoDB URI and other necessary configurations:

    MONGODB_URI=your_mongodb_uri
    PORT=3000
    CLOUDINARY_CLOUD_NAME=your_cloud_name
    CLOUDINARY_API_KEY=your_api_key
    CLOUDINARY_API_SECRET=your_api_secret
    EMAIL_ADDRESS=[email protected]
    EMAIL_PASSWORD=your_app_password
  4. Start the server:

    npm start
  5. Open the application: Visit http://localhost:3000 in your browser.

Usage

  • Browse Pets: On the homepage, users can see a list of pets available for adoption.
  • Search and Filter: Use the dropdowns to select breed, age, and gender, then click "Search" to filter the results.
  • View Details: Click on any pet card to view more details about the pet.
  • Adopt Me: Click the "Adopt Me" button to store the pet's details and proceed to the adoption form.

Code Structure

  • Frontend: Located in the public folder.
    • home.html: Main HTML file.
    • home.css: Custom CSS styles.
    • Note: There are multiple HTML and CSS files for different pages and components.
  • Backend: Located in the project_root folder.
    • app.js: Main server file.
    • routes/pet.routes.js: API routes for fetching pet data.
    • models/pet.js: Mongoose model for the Pet schema.

Contributing

  1. Fork the repository.
  2. Create a new branch:
    git checkout -b feature/your-feature-name
  3. Make your changes and commit them:
    git commit -m "Add some feature"
  4. Push to the branch:
    git push origin feature/your-feature-name
  5. Create a pull request.

Contact

For any questions or suggestions, please contact [[email protected]].

petsadoptify's People

Contributors

saugat3 avatar beater35 avatar shristinaprajapati avatar

Stargazers

raghul avatar

Watchers

 avatar

petsadoptify's Issues

Confirmation Message

In the contact us, when the user sends a message, a dialogue should open stating message has been sent successfully.
image

Email validation

Email validation in the signup is not completed as error emails are also being registered in the database.
issue2

User Profile Button Absence During Pet Adoption Process

After navigating to the listing page and attempting to initiate the pet adoption process, we've identified an issue wherein the user profile button fails to display. Instead, users are presented with the 'login' and 'signup' options.
image

Register Issue

As a new user, when trying to register from a new email it says email is already in use.
image

Informative feedback.

If no result is found, the system should give informative feed back to the user. for example "User not found".
image

Profile Setting

after logging in when the user tries to go to his/her profile it shows John Doe who is not the user, it should show the actual user's name instead.
image

SignUp

The fonts are not looking good, fonts should be more visible/clear and bigger than this. And also fix the text highlighting.
ISSUE

Adopt me Redirection

After clicking on adopt me button it should redirect to the listing page, not to the homepage.
image

User profile in Admin dashboard

the admin should see valid e-mails, usernames, and passwords after a new user registers on the website a. Please fix this issue and also the UI.
image

Inquiry Submission.

Submission of an inquiry is working fine but the user should get an informative feedback after the form has been submitted successfully.
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.