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
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 creates the ability for planners and vendors to communicate with each other and store those conversations in an easy to read space.
Before you get started, make sure you have the following software installed on your computer:
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.
Refer to AWSSetUp documentation on how to get started with an AWS S3 Bucket.
-
Fork and Clone this repo and open it inside your code editor of choice.
-
Create a database named
contrive_db
(see Application Database). -
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.
-
The queries in the
database.sql
file are set up to create all the necessary tables (see Application Database). -
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).
-
-
Create a
.env
file in the root directory and edit it as follows:- Paste this line into the file:
SERVER_SESSION_SECRET = superDuperSecret;
While you're in your new
.env
file, take the time to replacesuperDuperSecret
with some long random string like25POUbVtx6RKVNWszd9ERB9Bb6
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 assuperDuperSecret
, you will get a warning.- Paste the following lines into the file for db setup and deployment options:
PGDATABASE = contrive_db; PGPORT = 5432;
- 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. -
Start PostgreSQL if not already running by using the
brew services start postgresql
command in your terminal. -
Open up your editor of choice and run an
npm install
. -
Run
npm run server
in your terminal. -
Run
npm run client
in your terminal. -
The
npm run client
command will open up a new browser tab for you!- If a new browser doesn't open, navigate to
localhost:3000
in the browser.
- If a new browser doesn't open, navigate to
The Contrive app has already been deployed to Heroku for you: https://contrive.herokuapp.com/. See HerokuDeplyment for full deployment instructions.
Directory Structure:
src/
contains the React applicationpublic/
contains static assets for the client-sidebuild/
contains the transpiled code fromsrc/
andpublic/
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.
-
New Users can REGISTER as either a Planner or a Vendor from the Welcome page.
-
Planners have one registration page.
-
Vendors have two registration pages.
-
-
Existing users can LOGIN with their credentials from the Welcome page.
-
Once logged in, the navigation bar along the bottom of the screen allows travel through the site.
-
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.
-
Search (magnifying glass icon) takes the user to The Network page where they can search for vendors.
-
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.
-
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.
-
-
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.
-
Messages (chat icon) takes the user to the Messages page where they can view a list of all their message threads
- Clicking on any thread will show the details of the thread and allow the new messages in the thread to be created.
-
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:
-
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.
-
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.
-
My Events list view of all of the users' events. NOTE: currently a placeholder for future features.
-
My Calendar calendar view of all of the users' events. NOTE: currently a placeholder for future features.
-
Inspiration allows a Planner to get ideas for their event (think Pinterest) NOTE: currently a placeholder for future features.
-
Admin Portal takes the Admin to the Admin Portal page where they can remove users from the system.
-
LOG OUT logs the user out of the app and redirects them to the Welcome page.
-
-
-
Profile Page shows the information the user entered when registering for the app.
-
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.
-
Vendors can see their ratings score (future enhancement).
-
If a user navigates to their own profile page, they will have the option to edit the page.
-
-
To become an admin (at current time), register as a Planner and manually change the
type
value fromplanner
toadmin
in the "users" table in the db.
- 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.
- 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.
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.