Check out the live app here.
For design documentation, see wiki here.
Dina-Dopt is a MERN stack web application that allows users to adopt and review prehistoric pets. It is created for educational purposes only. Please do not enter any sensitive data while exploring Dina-Dopt.
More information for each feature can be found below.
Users are able to register for an account, login, and logout as needed on the website. The user authentication on the backend uses Express with BCrypt to secure password information. When the user goes to the root directory of the web application, there will be an option to log in along with a demo user log in option.
Users may also click on "Signup" to register a new account.
Both login and signup forms will report any errors if the form does not receive the correct information.
- Frontend:
React and Redux
react-redux
redux-thunk
react hooks
- Backend:
Express
bcryptjs
- user authenticationpassportjs
jsonwebtoken
- Database:
MongoDB
- Languages
Javascript
HTML and CSS
- Hosting: Heroku
The following are completed features for Dina-Dopt:
User
authenticaionPet
listing and detailsReview
creation and listingCart
CRUD
Key features for the completed project, including 1 full CRUD
cycle:
- Users:
- User authentication - register, signin, logout
- Ability to:
View
pets and pet detailsCreate
,Read
,Update
andDestroy
cart itemsCreate
andRead
reviews
- Pets:
Searchable
by pet name and typeShow
pet details- Basic information: name, type, description
- Media: Pet images, hosted on AWS S3
- Reviews:
- Reviews for a pet are shown on the pet's details page, from all users
- Reviews for a pet can be written on the pet's details page
- To create a review, a user must be logged in
Users are able to search pets by their names or pet types in the index page and see pet details on the pet details page. The pet details page will show the pet's name, type, description, price and any reviews from all users.
The pet index page is shown below. The frontend retrieves all pets from MongoDB.
Below is an example of the pet show page.
Pets can be added to the cart on both the pets index page and pet details page by clicking the Add to Cart
button. You can add more quantity to a pet and
remove a pet from the cart.
Below is a code snippet of our route when we click the 'Add to Cart' button. We are passing in a petId as data and checking to see if that petId is in the cart already. If it is not in the cart, we will simply add it to cart with a quantity of one. If it is in the cart, we will increase the quantity of that pet by one.