The Grove of Gardens

• Maintained by: John Nguyen

• Used React.js to create all HTML elements (virtual DOM) to dynamically display data received from the PostgreSQL database via API server created using Node.js

• Used Express and Express session module to retrieve user's cart information

• Used Amazon Web Services EC2 for web, API server, and PostgreSQL database

Feature Overview

The client can send requests to the server, and in return can receive and display the data in HTML format to:

1. View all products for sale
2. View products for sale by category
3. Search products by name and description
4. View details and additional images of a product
5. Specify the quantity of a product to be added to the cart
6. Update the quantity of a product already in the cart
7. Remove a product from the cart
8. View the cart summary
9. Submit an order form to the server with client-side form validation
10. View the order confirmation

Mobile Responsive

• The app is mobile responsive and can be used on the following devices in Portrait and Landscape:
  • iPhone 6/7/8
  • iPhone 6/7/8 Plus
  • iPhone X
  • iPad
  • iPad Pro

Lessons Learned

1. Accessing the local storage using React.js functions and dynamically display data using React.js virtual DOM functions
2. Creating a basic yet responsive user interface using React.js and Bootstrap
3. Leveraging Object Oriented Programming to organize code into components
4. Creating an API server using Node.js to process requests from and send data to the client
5. Storing and handling session data using Express session
6. Experienced the full development process of deploying the web and API server into AWS EC2 and creating a PostgreSQL database

Live Site

• The live version can be viewed here.

Demos

• Desktop

• iPhone 6/7/8 - Portrait

• iPhone 6/7/8 - Landscape

• iPad - Portrait

• iPad - Landscape