Contrive Application

Description

Duration: 2 Week Sprint

Contrive is an event management software platform that connects Event Planners with their local Vendors. With enhanced search features, Planners can find the types of Vendors they most want to do business with and can easily connect with them utilizing the messaging feature.

To see the fully functional site, please visit: DEPLOYED VERSION OF APP

Screen Shots

Landing Page & The Network

Contrive features a unique login page for users to login to there accounts from. The Network is Contrive's search feature that gives the ability for users to search both by vendor type, special features vendors advertise, and name information.

Contrive's Messaging Feature

Contrive creates the ability for planners and vendors to communicate with each other and store those conversations in an easy to read space.

Prerequisites

Before you get started, make sure you have the following software installed on your computer:

• Express
• Node.js
• Postico
• PostrgeSQL

Application Database:

Create a new postgreSQL database named contrive_db and copy all text in the database.sql file saved in the root folder of this repository. Paste all the copied text as a SQL query (Postico was used for original database creation) and execute the queries sequentially (Note: DROP TABLE queries at the top of the document will not do anything on initial setup since there are no tables yet created, and these DROP TABLE queries should be used carefully, as they permanently delete tables and any stored data therein.) To load sample data, copy all text in the dummyData.sql file saved in the root folder and paste the copied text as a SQL query. Execute the queries sequentially to load the sample data.

Setting up AWS S3 Bucket

Refer to AWSSetUp documentation on how to get started with an AWS S3 Bucket.

Development Setup Instructions

1. Fork and Clone this repo and open it inside your code editor of choice.

2. Create a database named contrive_db (see Application Database).

3. The project is built on Postgres, so you will need to make sure to have that installed. We recommend using Postico to run the queries as that was used to create the queries.

   1. The queries in the database.sql file are set up to create all the necessary tables (see Application Database).

   2. The queries in the dummyData.sql file are set up to populate the needed data to allow the application to run correctly (see Application Database).

4. Create a .env file in the root directory and edit it as follows:

   1. Paste this line into the file:

   SERVER_SESSION_SECRET = superDuperSecret;

   While you're in your new .env file, take the time to replace superDuperSecret with some long random string like 25POUbVtx6RKVNWszd9ERB9Bb6 to keep your application secure. Here's a site that can help you: Secure Password Generator. If you don't do this step, create a secret with less than eight characters, or leave it as superDuperSecret, you will get a warning.

   2. Paste the following lines into the file for db setup and deployment options:

   PGDATABASE = contrive_db;
   PGPORT = 5432;

   3. Paste the following lines into the file for AWS setup:

   AWS_ACCESS_KEY_ID = xx;
   AWS_SECRET_ACCESS_KEY = xx;
   REACT_APP_S3_URL = xx;
   AWS_S3_BUCKET = xx;
   AWS_S3_REGION = xx;

   You will need to enter your own values for xx after the = sign for each key value pair. Refer to step 7 in AWSSetUp.

5. Start PostgreSQL if not already running by using the brew services start postgresql command in your terminal.

6. Open up your editor of choice and run an npm install.

7. Run npm run server in your terminal.

8. Run npm run client in your terminal.

9. The npm run client command will open up a new browser tab for you!

   1. If a new browser doesn't open, navigate to localhost:3000 in the browser.

Deploying to Heroku

The Contrive app has already been deployed to Heroku for you: https://contrive.herokuapp.com/. See HerokuDeplyment for full deployment instructions.

Lay of the Land

Directory Structure:

• src/ contains the React application
• public/ contains static assets for the client-side
• build/ contains the transpiled code from src/ and public/ that will be viewed on the production site (Heroku)
• server/ contains the Express App

This code is commented in each individual file with the aim to make it accessible.

Usage

1. New Users can REGISTER as either a Planner or a Vendor from the Welcome page.

   1. Planners have one registration page.

   2. Vendors have two registration pages.

2. Existing users can LOGIN with their credentials from the Welcome page.

3. Once logged in, the navigation bar along the bottom of the screen allows travel through the site.

   1. Discover (compass icon) takes the user to the Discover Contrive page where they can learn about current events and how to use the site. NOTE: currently a static page, waiting for future enhancements.

   2. Search (magnifying glass icon) takes the user to The Network page where they can search for vendors.

      1. All vendors on the app are listed when no search criteria is entered. By using the drop downs and search bar, the list of vendors can be refined and filtered.

      2. Profile information about a vendor can be found by clicking on their respective card in the search results. NOTE: This link is only available to Planners and Admin roles.

   3. Plan (plus icon) takes the user to the Create Event page where they can create a new event. NOTE: This link is only available to Planners and Admin roles.

   4. Messages (chat icon) takes the user to the Messages page where they can view a list of all their message threads

      1. Clicking on any thread will show the details of the thread and allow the new messages in the thread to be created.

   5. Menu (hamburger icon) opens the side navigation drawer. The user's name and profile picture will be displayed at the top of the drawer along with the following links:

      1. My Profile allows the users to view, and edit, their profile. NOTE: this link currently only shows for Vendors and needs to be implemented for all other user types.

      2. My Network allows the user to see all other users they have chosen to be apart of their network. NOTE: currently a placeholder for future features.

      3. My Events list view of all of the users' events. NOTE: currently a placeholder for future features.

      4. My Calendar calendar view of all of the users' events. NOTE: currently a placeholder for future features.

      5. Inspiration allows a Planner to get ideas for their event (think Pinterest) NOTE: currently a placeholder for future features.

      6. Admin Portal takes the Admin to the Admin Portal page where they can remove users from the system.

      7. LOG OUT logs the user out of the app and redirects them to the Welcome page.

4. Profile Page shows the information the user entered when registering for the app.

   1. An action bar is displayed that will link to email, messages (in app feature), phone, location, and website if the information was provided by the user during registration.

   2. Vendors can see their ratings score (future enhancement).

   3. If a user navigates to their own profile page, they will have the option to edit the page.

5. To become an admin (at current time), register as a Planner and manually change the type value from planner to admin in the "users" table in the db.

Authors

• Dusty Meyers
• Jason Lin
• John Shands
• McKynlee Westman
• William Krug

Built with:

• AWS
• CSS
• Express
• HTML
• JavaScript
• Material-UI
• Node.js
• Nodemon
• Passport
• Postico
• PostrgeSQL
• React
• Redux
• Redux-Sagas
• Socket.io
• SweetAlert2

A full list of dependencies can be found in the package.json file in the root directory.

Known Bugs:

• Vendor Registration, if their username is already taken, they are not routed back to the first registration page.
• Login, if user inputs wrong password, footer appears in the password field.
• Create Event, Date picker has a rendering bug. Label appears in the input field.
• My Events, events are not able to delete. No backend route setup.
• Edit Vendor, any logged in user can route to an Edit Vendor page if they know the url.
• All Messages, all messages ordered backwards by date. Preview message for each conversation is also the first message sent in the conversations.
• My Calendar & My Network, currently route to 404.

Acknowledgement

Thanks to Aretha McDonald and Alexandria Watkins for giving use the opportunity to develop this prototype for them. Thank you Prime Digital Academy who equipped us with the skills to make this application a reality. The Cullen cohort for always having our backs and helping us every step of the way and Team Contrive for building one killer app.