- Project Concept
- Reference Links
- User Story
- Application MVP
- Design
- Technologies Used for Development
- Installation and Testing Instructions
- Team Members
The 2020 holiday season is quickly approaching! This Secret Santa App will help you orchestrate the holiday fan-favorite game, Secret Santa! With this app, the user will be able to do the following:
- Schedule a date for the secret santa gift exchange event
- Invite family and friends to join in on the holiday fun via email invite
- Keep track of who accepted the secret santa invite
- Discretely assign a single participant to each individual registered for the event
- Allow participants to create a list of gift ideas they would like to recieve
Return to Table of Contents
Link to Secret Santa Application deployed on Heroku - Secret Santa Application Live Link
Link to GitHub Repo used for application development- https://github.com/Holiday-Secret-Santa/Secret-Santa-App
Link to Project Board used for application development - https://github.com/Holiday-Secret-Santa/Secret-Santa-App/projects/1
Return to Table of Contents
AS a user who needs to organize a secret santa gift exchange
I WANT to be able to use an online application
SO THAT I can prepare an awesome holiday event for friends and family
Return to Table of Contents
Here is a list of the MVP requirements for this app. Please note that these are the same core functionality items listed in the project description section.
- The User can register, login and logout.
- The User can schedule a date for the secret santa gift exchange event.
- The User can invite family and friends to join in on the holiday fun via email invite.
- The User can keep track of who accepted the secret santa invite.
- The User can discretely assign a single participant to each individual registered for the event with built in random assignment feature.
- The Participants can manually create a wish list of gift ideas they would like to recieve.
- When creating a wish list item, the participant will be able to add an item name and URL link for potential online purchase.
Return to Table of Contents
The flow chart below outlines the basic functionality of the secret santa app.
📓 Click to expand the functionality flow chart.
The diagrams listed below outline the sequence of events required for the all key MVP features. These diagrams help visualize the interaction between the different components of the application.
Flow to Create Secret Santa Gift Exchange Event
Flow to Invite Guest to Exchange Event
Flow to Track Invitations
Flow to Manually Assign Gift Exchange Guests
Flow to use System to Auto Assign Gift Exchange Guests
Flow for Guests to Add Gift Ideas
The entity relationship (ER) diagram below provides a visual representation of how the data is saved inside the application's back-end database. This diagram also demonstrates the relationship between each database table.
The ER Diagram is based on the relations between the tables using SQL Self JOIN
📈 Click to expand the ERM diagram.
The wireframes below are applicable for all users. In theory, any user should be able to access the homepage, login page, view all their events, and create an event. However, the event details wireframe will be different depending on whether the user is the event organizer or invited guest (aka participant). The wireframes for event details specific to that role are provided below in separate sections.
🎨 Click to expand the homepage wireframe.
🎨 Click to expand the login wireframe (Auth0-generated).
🎨 Click to expand the event dashboard wireframe.
🎨 Click to expand the create a new event wireframe.
The wireframe below is for the event organizer role. The event organizer should be able to see all the event details, the number of attendees invited, RSVP status, and the secret santa assignment for each invited guest participating in the secret santa.
🎨 Click to expand the event details wireframe.
This wireframe was designed for the main MVP functionality that will allow the user to make secret santa assignments.
🎨 Click to expand the secret santa assignment wireframe.
The wireframe below is for the invited guest role. The invited guest should only be able to see the event details, whether they have been assigned a secret santa (but not the secret santa's name).
If user accepts the invite, then the accept button should take them to the login page so they can see the event in their person event's dashboard.
If the user declines the invite, then the user will be redirected to the homepage of the app.
🎨 Click to expand the accept invite wireframe.
🎨 Click to expand the event details wireframe.
Please note that the when the user clicks the Add Item Button on the event details page, they will be redirected to the wireframe below.
🎨 Click to expand the wireframe for adding a wish list item.
Return to Table of Contents
Here is a list of core technologies that were used to develop this web application.
| Technologies | Description |
|---|---|
| HTML | Used to design the basic website structure |
| JavaScript | Used to add functionality to the application |
| CSS | Used to add custom styling to the application |
| Ant Design | React UI component library used to design this React-based application |
| React.js | Javascript library used to design the front-end of this application |
| Node.js | Used to establish the back-end server environment for this application (also utilized many NPM packages) |
| SQL | Application database is designed and quered using SQL and Sequelize |
| Nodemailer | Package used to enable auto sending of emails to added participants |
| GraphQL | Used this query language for API interaction |
| CircleCI | Used to monitor embedded unit tests |
| Code Climate | Used to monitor and test code quality (i.e. consistent coding best practices) |
While developing this application, the team integrated CircleCI into this repository to automatically monitor the build status of added unit test included throughout the application. Please visit the CircleCi documentation for additional instruction on how to integrate the CircleCI tool.
In addition to CircleCi, the team also incorporated Code Climate monitoring services into this repository to ensure overall code quality best practices were incorporated throughout the development of this application. Please visit the Code Climate for additional instruction on how to integrate the Code Climate tool.
This project contains two package.json files - one at the root directory and another in the client folder.
In order to resolve coverage issues / limitations associated with Code Climate running coverage reports for this full-stack application, the team had to intentionally include front-end dev dependencies in the root package.json file to ensure all frontend and backend tests ran from the single root package.json file.
I am including this update to make it clear that we are aware react-related dependencies are typically only needed in the frontend portion and an application; however, the approach we used in this repository was used to work around Code Climate limitations.
Instead of using a traditional promise-based HTTP client to pull data from the backend database used to store the application's data, the team used the GraphQL API client to make API calls to our SQL-based backend database. When using GraphQL, we had the ability to specify identify the data items needed within a single call without using multiple, lengthy endpoints and axios calls.
In addition, GraphQL does not require the use of PostMan to test database calls, and instead uses it own sandbox environment by simply adding /graphql to the end of the port address being used to locally launch the application. For example, instead of using http://localhost:3001/, you would use http://localhost:3001/grqphql to interact with the graphql sandbox environment. The image below shows the graphql sandbox environment and include a sample GraphQL query that the team used to query wish list items added by participants.
Return to Table of Contents
In order to success launch this web application, you will need to have the following installed in your local working environment:
- Node.js - Make sure Node.js is installed in your machine. If Node.js is not installed on your machine, click here to download the application.
All NPM packages needed for this application are already listed as dependencies in the package.json file. If running this web application in your local environment, please make sure to run the npm install command in your terminal for both the root directory and client folder in order to access all required package.
When checking to see if all applicable unit tests pass for this application, make sure to run the npm run test command in your terminal each time you would like to test status for all unit tests included in this application. The team used the Jest Testing Framework to build all unit test for this application.
There are a total of 64 passing unit test incorporated for this application, which results in 87 percent test coverage for the entire application.
Return to Table of Contents
Return to Table of Contents