Giter Club home page Giter Club logo

pawsome-connections's Introduction

Pawsome Connections

About

Welcome to 🐾Pawsome Connections, a web application created by a team of four passionate developers who share a love for animals. We developed this application in hopes to help older animals and animals who have been waiting to be adopted over 30 days get adopted.

With 🐾Pawsome Connections, users can browse a list of animals eagerly awaiting their perfect match. Seamlessly search for your ideal companion by animal type and location, tailoring your quest to find that special fur-ever friend. User's are also able to favorite their dream pets and view all their selected favorites on a seperate page, ensuring they're just a whisker away whenever they're ready to make their final choice. Does an adorable cat catch your eye? You can click on the card to view a more detailed view on information about their potential match and how they can take the next steps to adopt.

During this project, we challenged ourselves to self-teach and implement a new technology TypeScript for improved code organization and enhanced type safety. Our team utilized their newly acquired skills in TypeScript, React, and Router to create a seamless and capitivatin user experience to help solve a problem with dogs needing a home.


Set Up

Installing the files

  • Fork this repository to your GitHub account.
  • In your forked respository, click the code drop-down menu and copy the SSH key.
  • On your local machine, open the terminal and navigate to the location you'd like the repository directory cloned to.
  • Once you're there, run git clone [SSH Key] [pawsome-connections] via the command line.
  • Run npm install.

Opening the application

  • When you're ready to use the app, open the terminal and navigate to the pawesome-connections directory via the terminal.
  • In the terminal, use command+t to open a new terminal tab.
  • In the new terminal tab, run npm start.
  • Once WebPack has compiled the necessary resources, you will see a link within the text of your terminal. You can copy and paste that link into your browser to access a locally-hosted version of this application on your machine.

Preview

Screen Recording 2023-06-04 at 2 32 20 PM

Contributors


Context

This project was assigned in the third week of Module 3 at Turing School of Software and Design Front End Web Development program, a four- module, seven-month course focused on preparing students for a career as web developers working with Javascript, HTML, CSS, and the React framework. The application was built over the course of two weeks.


Technologies/ Metholodologies

  • TypeScript
  • React & React Router
  • End to end testing using Cypress
  • Fetch API
  • Git/GitHub/ GitHub project board
  • Javascript/ CSS/ HTML
  • Error handling for network and user errors
  • Utilizing Agile/ Scrum project management
  • Responsive design

Future Development Opportunities

  • User login feature, enabling saving favorites between visits.
  • Expand the search functionality to include a wider range of animal types and more specific location criteria.
  • Enhance the user experience by incorporating video previews and additional animal photos when clicking on the details page.
  • Add animal zodiac signs and incorporate a swiping feature for matching animal's to owners.
  • Build our own API using Express.js to have more control over the data and customize it to meet specific needs.
  • Improve overall styling

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.