blaker814/front-end-capstone

Celebration Station - Front End Capstone

Celebration Station is an app to keep track of celebratory events while providing a way to organize gift ideas and budgets correlating to those events.

Project Goals

• Gain freelance work experience by working with a “client”
• Increase proficiency debugging in React
• Increase comfort level with implementing React libraries

Getting Started

Dependencies

• JSON Server
• React

Instructions

1. Clone this repo
2. Run npm install in the root directory of the project
3. Open a new tab in the terminal and run json-server -p 8088 -w database.json
4. In the original tab, run npm start
5. Use [email protected] to view dummy data or create a new account

Planning Materials

ERD: https://dbdiagram.io/d/5f87561f3a78976d7b77abf3

Wireframe: https://miro.com/app/board/o9J_ki8Gtlw=/

front-end-capstone's Issues

User can store gift idea lists

The user should be able to create a list of gift ideas for an individual

Given the user wants to create a gift idea list for someone

• When the user clicks the add gift list affordance
• Then the user should be presented a modal
• And the user should be asked who the list is for
• When the user confirms
• Then the user should be directed to the GiftTable component

Given the user has a gift idea

• When the user clicks the add idea affordance
• Then the user should be presented a form to enter the following:

1. Name of gift
2. Price of gift
3. Links to gift
4. Radio buttons asking if gift has been purchased already
5. If so, for what celebration

• When the user clicks the save gift affordance
• Then the gift idea should be stored in the database
• And the user should be brought to the GiftTable component
• And the user should see the new idea

User can edit gifts

Given the user wants to edit a gift

• When the user clicks on the edit affordance for a gift
• Then the user should be presented a gift form
• And the form should be filled out with the current information
• When the user clicks the save gift affordance
• Then the gift is updated in the database
• And the gift is rendered to the CelebrationList component

Given the user wants to return to the previous page without saving

• When the user clicks on cancel affordance
• Then the user is brought back to the GiftTable component
• And the gift remains unedited

Nav bar

The user should be able to move freely and easily around the site using a nav bar

Given the user is logged in

• Then a nav bar should render at the top of the page including links to the following:

1. Home
2. Celebrations
3. Gifts
4. Budgets
5. Messages
6. Friends
7. Logout

Given the user wants to navigate to a different part of the site

• When the user clicks one of the links
• If the user clicks on a link besides logout
• Then the user should be directed to the base branch of that component
• If the user clicks on the logout
• Then the user should be removed from local storage
• And the user should be directed to the login page

User can store celebratory events to attend

Story

• As a user, I should be able to enter in a celebration that will happen at a future dat

Acceptance Criteria

Given a user wants to keep track of a future celebration

• When the user clicks an affordance to enter a new celebration in the application
• Then a form should be presented to the user in which the following properties of the celebration can be provided

1. Name of celebration
2. Date of celebration
3. Date to start reminders
4. About the celebration
5. An image to upload

Given a user has entered in all details of an celebration

• When the user performs a gesture to save the celebration
• Then the celebration should be rendered in the application in the CelebrationList component
• And it should show the celebration name
• And it should show the celebration date
• And it should show the celebration reminder start date
• And it should show an about section
• And it should show an appealing image

Given a user has entered in a celebration
When the CelebrationCalendar component is rendered
And the celebration is happening this month

• Then the date of the celebration should be highlighted in the calendar

Given a user wants to remove an celebration

• When the user performs a gesture to delete the celebration
• Then the celebration should be removed from the database
• And the user should be redirected to the list of celebrations

User can import/export gift lists

User can send gift lists to friends

User can edit budget total

User's home page

The user should have a place to land after logging in with celebration remiders and a personal gift list

Given the user successfully logs in

• Then the user should see a reminder list
• And the user should see a my gift list

Given the user has set a day to start reminders for a celebration

• When that day comes, that celebration renders in the reminder list
• And continues to appear until the celebration has past

Given the user has an idea for a gift for themselves

• When the user clicks the add idea affordance
• Then the user should be presented a form to fill out the following fields

1. Name of gift
2. Price of gift
3. Links to gift
4. Radio buttons to choose if you have received gift
5. Celebration received dropdown, if received

Given user selected no for gift received

• Then celebration received dropdown should be disabled

Given user has filled out all fields

• And user clicks the save gift affordance
• Then user should be taken to homepage
• And the gift should be added to the my gift list

Celebration Station JSON setup

You will be using json-server to have a local API that will store the data for Celebration Station. When you access http://localhost:8088, these are the resources that should be available.

/users
/celebrations
/gifts
/giftLists
/budgets
/friends
/messages
/images
/links
/listTables

This file will not be pushed to Github.

Allow user to modify existing celebration

Given the user wants to edit a celebration

• When the user clicks on the edit affordance for a celebration
• Then the user should be presented a celebration form
• And the form should be filled out with the current information
• When the user clicks the save celebration affordance
• Then the celebration is updated in the database
• And the celebration is rendered to the CelebrationList component

Given the user wants to return to the previous page without saving

• When the user clicks on cancel affordance
• Then the user is brought back to the CelebrationList component
• And the celebration remains unedited

User can send a message to a friend

User can store budget lists

The user should be able to assign a budget to a celebration to keep track of how much they've spent for the celebration, and how much they've spent on individuals for that celebration

Given the user wants to create a budget

• When the user

User can edit messages they send

Friends List

Story

As a user, I should be able to add other users as friends so they can view my information

As a user, I should be able to remove someone from my friends list

Acceptance Criteria

Given an active user wants to add another user to their friends list

• When the active user performs a gesture on the Add a friend affordance
• Then the active user will be presented with an input field in which the other user's name can be entered

Given an active user has entered in another user's name in order to add that user to their friend list

• When the active user performs a gesture on the Save affordance
• And the input user is not already friends with the active user
• And the input user is not the active user
• Then the active user's friends list should be updated with the added user

Given an active wants to remove another user from their friends list

• When the active performs a gesture on a delete affordance in the friends list
• Then the the other user should be removed from their friends list

User can live chat

User can register account

Story

As a user, I should be able to fill out a form with my desired username, my email address, and my birthday to register myself in the application.

Acceptance Criteria

Given a user wants to use Celebration Station
When the user first accesses the application

• Then the user should see a login form
• And the user should see a registration form

Given a user wants to use Celebration Station

• When the user has previously authenticated (i.e. a activeUser token exists in local storage)
• Then the user should see the Celebration Station UI components

Given the user fills out the registration form

• When the user clicks the Register button
• And the username and email are unique
• Then the login and register form should disappear and the main Celebration Station components should be rendered

Given the user fills out the login form

• When the user clicks the Login button
• And the email exists
• Then the login and register form should disappear and the main Celebration Station components should be rendered