annadragan / capstone-project

"No one knows what he can do till he tries"

Hey, I'm Anna! 😎

👋 🌱 On the path to becoming a Full Stack Developer, I've been learning programming for nearly two years. I'm enthusiastic about constantly learning new things – whether it's in human or technical languages. My goal: Creating outstanding user experiences and consistently growing in the world of code! 💻 🚀 🙃

Feel free to contact me on:

LinkedIn 👋

Languages & Tools

capstone-project's Issues

bookmark a card

Value Proposition

As a user
I need to bookmark cards with words I already remember
so I have a quick overview about my study progress and can separate them from words I still have to practice

Step 5:

Description:

Acceptance Criteria

• Every vocabulary card has a bookmark button (with an icon) in upper right corner
• When the icon is clicked the bookmark is toggled
• When the card is bookmarked it will be moved to another page
• There is a navigation between vocabulary cards page and bookmarked/archive page
• Navigate happened by clicking on the icon in navigation
• One icon leads to vocabulary cards page
• One icon leads to bookmarked cards/archive page
• Depending on the page the user is on that page gets disabled in the menu

Tasks

• Create branch bookmark
• Create a button to toggle
• Build navigation bar with two icons
• Create navigation/routing to the bookmarked/ archive page (React Router)
• Build navigation logic between pages
• Update App storybook and test
• Test on mobile device / different browser (Chrom, Safari, Firefox)

search-bar

Value of Proposition

As a user
I need to have a search bar on the Archive Page
to be able to find words I want to repeat more faster

Description

Acceptance Criteria

• I can successfully search for words I want to repeat

Tasks

• add a search bar and search logic to the Archive Page
• Check accessibility
• Test on mobile portrait/landscape screen

homepage

Value Proposition

As a User
I need to have a home page
to see what this App is about

Description:

Acceptance Criteria

• there is a home page with a logo

Tasks

• expand the navigation
• create a logo
• add an animation
• test on different devices/browsers

edit card

Value Proposition

As a user
I want to be able to change/edit the content of my cards (or eliminate mistakes from there)
in order to keep my vocabulary cards up to date

Description:

Acceptance Criteria

• A button to edit a card is shown on every single card
• Button has the functionality to edit a card
• The user can change all information on the card
• By clicking the save button the user gets back to the vocabulary cards page

Tasks

• Add an edit button with icon to cards
• Add an functionality to edit the card
• Testing

card-list with mock data

Value Proposition

As a user
I need to have cards with new words
to be able to see them and work with them later

Step 1:

Description:

Acceptance Criteria

• A user have a list of example cards with words and explanations to it
• The list is scrollable

Tasks

• Create branch cards
• Prepare some example mock data (array) for card list
• Map over this array
• Component w/ storybook and test
• Test on mobile device / different browser

Code refactoring

Value Proposition

As a Developer
I need an App with clean code
to be able to maintain the app more easily

Description:

Code refactoring

Acceptance Criteria

• The length of the code is reduced and the code is more efficient

Tasks

• look for unnecessary code
• update tests and stories
• improve accessibility if needed
• refactor components if needed
• check that code is semantically correct
• test on different browsers

confirm-delete

Value Proposition

As a user
I need to get a confirm message on clicking delete button
to be able to doublecheck my choice.

Description:

Acceptance Criteria

• confirm the delete choice in a pop-up window after clicking delete button

Tasks

• create branch "confirm-delete"
• implement confirm-delete functionality
• Add/update storybook and tests
• check in other browser

photo upload

As a user
I need to have form to add an image and a description
to be able to visually support my cultural experience and learnings

Description

Acceptance Criteria

• A form with the photo upload and one input field for the description
• Uploading a picture should be possible
• Photos are formatted to a specific size
• The user see a progress bar when uploading a photo
• The image is optional
• The form doesn't submit without input
• Form has a submit button
• Disable submit if input is empty
• Whitespaces in the input are trimmed on submit
• Text in the input has a max length of 300 characters
• After completing the form and submit the user should be redirected to list of tradition-cards and see the new card with image and description on the card list

Tasks

• create 'photo-upload' branch
• add one input field for description, a space with icon for photo upload and a save button
• install cloudinary, axios
• implement photo upload functionality
• update with storybook and specs
• test on different devices/browsers

enter your word and explanation

Value Proposition

As a user
I need to enter new words and to write down texts (explanations) or example sentences
to be able to memorise this words and to have explanations of them (and/or examples of usage)

Step 2:

Description:

Acceptance Criteria

• App has three input fields
• App has a add button
• Empty input or only whitespace does not submit
• Disable submit if input is empty
• Whitespaces in the input are trimmed on submit
• Text in the first input has a max length of 20 characters
• Text in the second input has a max length of 80 characters
• Text in the third input has a max length of 200 characters
• After completing the form and submit the user should be redirected to list of cards and see the new card on the card list
• By clicking on the create button every input field should reset
• A user have a button with plus icon on the vocabulary cards page
• By clicking the button with plus icon the create form page should open
• Every input field has a character counter

Tasks

• Create branch create-form
• Create three input fields
• Implement a character counter
• Create a button to add
• Create a path to new page where cards are saved (implement react router and button functionality)
• Implement plus-icon-button function to navigate to create form page
• Component w/ storybook and test
• Create function to save form-inputs
• Check accessibility
• Test on mobile device / different browser

arrow-button

Value of Proposition

As a user
I need to have an arrow button
to be able to navigate to the top of my page

Description

Acceptance Criteria

• by clicking on the arrow button on the bottom of vocabulary page it navigates to the top

Tasks

• create 'to the top' button and logic
• implement at vocabulary page and archive page
• update with storybook and specs
• test on different devices/browsers

delete card

Value Proposition

As a user
I want to be able to delete unnecessary cards
in order to clean up my vocabulary book

Step 4:

Description:

Acceptance criteria

• Delete button deletes card on click

Tasks

• Create branch delete-card
• Implement delete function with delete icon
• Testing

tradition-page

Value of Proposition

As a user
**I need to ** display my traditions-cards
to be able to lern about german traditions

Description

Acceptance Criteria

• There is a page inclusive for traditions
• The image should be displayed together with the description on the same card
• A user have a button with plus icon on the tradition page
• By clicking the button with plus icon the form to create a new tradition with image should open
• A user have a arrow icon button on the left
• By clicking on the arrow button on the bottom of tradition page it navigates to the top

Tasks

• create 'tradition' branch
• create a page traditions and expand the navigation
• add a plus button with functionality to navigate to the create form page and an arrow button for scroll to top
• update with storybook and specs
• test on different devices/browsers

idiomatic expressions

Value Proposition

As a user
I want to be able to see a idiomatic expression
in order to boost my conversational language skills and to communicate better

Description:

Acceptance criteria

• phrase changes when the button 'next' clicked
• there is a new page in the navigation for idiomatic expressions
• wenn clicking the button new one phrase appears
• one phrase appears also after the page reload

Tasks

• create feature branch idiomatic-expressions
• prepare data.js with idiomatic expressions (phrase + meaning)
• implement data.js

delete tradition with confirmation

As a user
I need to delete my notes about german traditions
in order to to keep my tradition story page up to date

Description

Acceptance Criteria

• Each card should have an delete button with icon
• after clicking the delete button a delete confirmation request will appear
• confirm the delete choice in a pop-up window after clicking delete button

Tasks

• Create branch delete
• Create a delete button
• implement confirm-delete functionality and delete confirm request
• Add/update storybook and tests
• check in other browser

toggle-traditions

As a user
I want to show/hide the description and name of the tradition
in order to see more/less details about the tradition when I want it

Description

Acceptance Criteria

• the description of the tradition toggles when button is clicked
• a card expand and shrink alternately on a click

Tasks

• create branch toggle
• create button "show/ hide explanation"
• update App with component and logic
• test on different devices/browsers

extra-input

Value Proposition

As a User
I need to have one more input field
to be able to to give the tradition a title

Description:

Acceptance Criteria

• the ImageForm hat extra space for the title of the tradition

Tasks

• create one more input field
• update the order of all ImageForm inputs
• update with storybook and specs
• test on different devices/browsers

local storage

Value Proposition

As a user
I need to save my words and explanations
so I can still see and use them after closing and reopening the app

Step 3:

Description:

Add local storage to save the cards information when the app is reloaded or reopened after closing. The data will be stored in the local storage.

Acceptance criteria

• Cards persist when the app is reopened
• After reloading the app, the new word /explanation should still be displayed in the list of cards

Tasks

• Create branch local-storage
• Implement local storage function