Memento Box

Description

Duration: 3.5 Week Sprint, working part time

Memento Box is a collaboration platform for groups to put together digital “boxes” around celebrations for loved ones. Collect videos, photos, voice memos and more to package into a digital box and send to someone. Memento is there for any occasion you want to celebrate - birthdays, anniversaries, weddings, retirements, you name it! What’s inside Memento box? That’s up to you!!

Users can:

Create an account
Design a box by choosing box color and from a number of ribbon colors and styles
Solicit collaboration on a box by inviting their friends or act as a collaborator by contributing to an existing box
Review box contents and schedule the box to be sent to its recipient
Recipients receive an email and click the box to open the site, where they can then view its contents by clicking through the box
Recipients can send thank you notes to some or all senders and collaborators

The app stores all users, content, and recipient information on a database until they are deleted. Documentation provides sample content for the database in addition to the queries needed to properly structure the database.

This app was built as a collaborative capstone project for a full-stack software engineering program at Prime Digital Academy. Here are the assignment instructions.

Memento Box will be deployed using Heroku in the near future.

Development team

This was a collaborative project. Our development team was:

Mohamed Ali
Matt Gilbertson
Ken Grina
Sean Harrison
Michael Kenyon
Zoe Lindman
Sarah McCartney
Lons Nadziejka Waller
Erik Silcox
David Smith

Screen shots

Home page:

Box build forms:

Recipient email:

Recipient view of box:

Contents popup:

Thank you page:

Prerequisites

Setup instructions

The application has been tested and run on a local machine using the browser. It may be deployed in the future but currently is only available locally.

Clone down a version of this repository
Create a database named prime-app
Create and populate the tables needed for the database
- This project is built on Postgres, which you will need to install to use the app
- The database.sql file contained in this repository provides all of the necessary queries for creating the table needed to run the app
- The queries will also populate some tables with necessary information to enable styling and occasion selections in the application
Create a .env file at the root of the project. Generate and add a SERVER_SESSION_SECRET. For example:

SERVER_SESSION_SECRET=X5hooooSAMPLEAPIKEYoooodN6v

If you add a .env file and secret or create a secret with less than eight characters, you will get a warning when you try to use the application.
Open in your editor of choice and run an npm install
Run npm run server in your terminal
Run npm run client in your terminal
Navigate to the localhost port provided by your terminal when you initiate your client. The default port when running Vite, for example, is http://localhost:5173/

Note: You will need to set up MailChimp to use this application. Instructions for working with MailChimp and the Memento Box application can be found at the end of this document.

Usage

Technologies

hamburger-react
Material UI
Moment
Multer
Slick Carousel
React
Redux
Sagas
HTML
CSS
JavaScript
Node.js
Express
MailChimp
Cloudinary
Passport
PostgreSQL

Tools

DB Designer
Figma
GitHub
Google Workspace
Slack
Zoom

Documentation

This project included scope documentation.

This documentation was built following a provided template. It has been edited for style, consistency, and to provide all relevant details.

Future development

The following features are planned for development:

Security: the application needs to apply unique keys to boxes in order to be secure for users and recipients
Pricing tiers: box build out will be priced according to the number of collaborators
Photo scanning feature: users will be able to use their phones to take pictures of documents and upload them as scanned documents
Data collection and flow: for full functionality, data flow through the app will need to be standardized
Newsletter: visitors to the site will be able to provide their email address in a field in the footer and will be registered to receive the Memento Box Newsletter

Production Build

Before pushing to Heroku, run npm run build in terminal. This will create a build folder that contains the code Heroku will be pointed at. You can test this build by typing npm start. Keep in mind that npm start will let you preview the production build but will not auto update.

Start postgres if not running already by using opening up the Postgres.app, or if using Homebrew you can use the command brew services start postgresql.
Run npm start.
Navigate to localhost:5173.

Directory Structure:

src/ contains the React application.
public/ contains static assets for the client-side.
build/ after you build the project, contains the transpiled code from src/ and public/ that will be viewed on the production site.
server/ contains the Express App.

Deployment

Create a new Heroku project.
Link the Heroku project to the project GitHub Repo.
Create an Heroku Postgres database.
Connect to the Heroku Postgres database from Postico.
Create the necessary tables.
Add an environment variable for SERVER_SESSION_SECRET with a nice random string for security.
In the deploy section, select manual deploy.

Update Documentation

Customize this ReadMe and the code comments in this project to read less like a starter repo and more like a project. Here is an example: https://gist.github.com/PurpleBooth/109311bb0361f32d87a2.

MailChimp email

MailChimp has a breakdown of when you should use which of their APIs.

The following is a step-by-step guide for how MailChimp is or will be integrated with this application and how you can implement it in your own instance.

Marketing email (newsletter) setup using MailChimp

If you have not already created a .env file at the root of the project, create one.
Create a MailChimp account. You should be able to use a free account for the basic functionality of this application.
Create an API key in your account.
Insert your API key into your .env file with the name MARKETING_KEY. For example:

MARKETING_KEY=FooVX5hooooSAMPLEAPIKEYooood4mXV7RUt2N6v

Find your MailChimp data center. It's at the start of the URL you visit when you're on your dashboard. Here's more information.
Insert your data center into your .env file with the name MARKETING_DC. For example:

MARKETING_DC=us12

Find your MailChimp Audience ID by following the following path or using their help center instructions:
- "Audience" > "Audience dashboard" > "Manage Audience" > "Settings"
Insert your data center into your .env file with the name MARKETING_AUD_ID. For example:

MARKETING_AUD_ID=304g5398t4

Transactional email (gift emails, etc.) setup using MailChimp

If you have not already created a .env file at the root of the project, create one.
Create a MailChimp account. You should be able to use a free account for the basic functionality of this application.
NOTE: The free version of MailChimp Transactional/Mandrill will ONLY send to email addresses at the domain that you have registered. This means you cannot effectively use the free version for more than testing/demos.
Navigate to Transactional email from the dashboard sidebar: "Automations" > "Transactional email"
Select "Try for free" if you are using a free account.
Select "Launch App" to sign into Mandrill using MailChimp.
Set up your sending domain
Authenticate your sending domain
Navigate to Settings from the Mandrill dashboard sidebar
Create a new API key by selecting "+ New API Key"
Insert your API key into your .env file with the name TRANSACTIONAL_KEY. For example:

TRANSACTIONAL_KEY=X5hooooSAMPLEAPIKEYoooodN6v

Using the email template:

Create template for email in MailChimp account using template provided in this folder
1. Log into Mandrill using MailChimp account information (can access Mandrill from the MailChimp dashboard by navigating to "Automations" > "Transactional email" in the sidebar)
2. Navigate to email templates from the dashboard: "Outbound" > "Templates" > "+ Create a Template"
3. Name the template "Memento Box Gift Notif"
  1. You can use another name, but you will then need to take note of the provided "Template Slug" and insert it into the API call, where it is referred to as the "template_name"
4. Select "Start Coding"
5. Copy/paste the provided emailTemplate.html into the HTML field.
6. Set template defaults as preferred. Some suggestions:
  1. From Address: your business email, possibly a designated account for administrative emails. This email must use the same domain as the domain you have registered with MailChimp/Mandrill for your transactional emails.
  2. From Name: "Memento Box"
  3. Subject: "You've received a Memento Box!"
7. You can preview the content by selecting "Preview and Test". Testing will allow you to input your email address and you will receive a test version of your email to your inbox, assuming that you have authenticated your domain properly. You can also either save the template as a draft ("Save Draft"), in which case the API call will not work, or publish it ("Publish") when it's final.
Once your email is saved as a template, the API should correctly prompt the template to send with the appropriate dynamic content pulled from the application database and plugged in.
1. NOTE: Emails MUST come from the same domain that's associated with the account/API key. The API request requires a from email. Because the project does not currently have a domain, this parameter is specified as "from_email": `${process.env.FROM_EMAIL}` in order that the tester can use their own domain. To use your domain, insert the from email in your .env file as [email protected] and use the current setup. Alternately, you can replace ${process.env.FROM_EMAIL} with "[email protected]" within the API request.

erik651 / memento-box Goto Github PK

memento-box's Introduction