Giter VIP home page Giter VIP logo

final-project's Introduction

Screen Shot 2022-06-29 at 3 58 46 PM

About the project

This is a final project of Technigo's boot camp spring '22. We wanted to build a pet app to connect pet owner and pet sitters. The app was created by using React, Redux, Style Components for front-end and Node.js, MongoDb, Express.js for back-end.

Collaborators:

The project was made by Kristiina Kolu and Suki Nhung Phan.

View it live

https://sk-petapp.netlify.app

Please feel free to use our dummy account to log in and view the insight.

  • Username: testUser
  • Password: password

Features

  • User can sign up by filling in the ready form including profile type, username, password, email, image link, pet type, duration of pet sitting, start and end date, location and profile description
  • User can log in with their username and password, and the localstorage helps to save the logged-in, despite the page is refreshed
  • After logged in, user can see other users on the landing page (= dashboard); the app displays only pet owners to pet sitters and other way around). Every displayed user container is a link to the page showing details of each users User can add, edit and delete reviews to the others on the detail pages
  • User can edit profile information on the profile page
  • User can save their favourite items and view them in favourite page
  • User can search for the other users by using the search bar
  • User can filter their search with the filter menus
  • User can log out

Process

It tooks us 3 weeks to complete. Our proccess:

  1. Setting up the ideas on white board
  2. Building the prototype in Figma
  3. Bulding the back-end
  4. Developing the front-end
  5. Review and final touch

View our idea template

https://trusting-opera-034.notion.site/Final-Project-Pitch-Template-cb12ef83e6c34b34b42d1a25d5477f5d

View our Figma

https://www.figma.com/file/udN4vOr8waFfFW3sQvO2BX/Final-project-Suki-%2F-Kristiina?node-id=0%3A1

How to run it

  1. Clone the project to your local environment:

git clone https://github.com/kolkri/final-project.git

  1. Move to the frontend folder:

cd frontend

  1. Install all the dependencies:

npm install

  1. Run the project on your local server:

npm start

How will we improve if we could have more time

  • Our stretch goal was to build a chatbot to help the users communicate with each others. We have already set up the basic back-end. The idea is to use the PATCH method to update the text message and store them in an array. Later on, in front-end, we will filter the message by using userID and display them based on the time when the message is sent.

  • Putting more time to the responsive desing and the styling

  • Adding possibility to upload a profile picture (now we are just asking a link to the picture). We managed to convert the uploaded images to base64 format and display them on the logged in page. However, after delpoying the heroku link the app ran very slowly, we think that this was maybe because of the large size of images. After running out of time, we decided to stay just with the image link.

  • We could also combine and simplify our styled components, because we are using the same styling in several pages.

final-project's People

Contributors

sk-phan avatar kolkri avatar

Watchers

 avatar

Forkers

sk-phan

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.