annidrumm / influencer-finder

This is my final project for the neuefische Web Development Bootcamp. An app to browse through influencer profiles and find the one that will fit just right.

Influencer Finder

Final project for neuefische web development bootcamp

An App To Build Brand Awareness

The right influencers can help you spread awareness about your brands by helping you reach out to your target audience. Companies partner with influencers to let more people know about their products without promoting their brand directly.

Are you creating a campaign and need someone to promote it? Most preferably someone adored by millions, who nailed social media to perfection? With this app you can browse through thousands of influencers and find the one that will fit just right.

Final Design Created In Adobe XD

Demo

You can view the app here: Demo Version

Tech Stack

• React
• React Hooks
• React-Router
• Local Storage
• PropTypes
• Storybook
• Styled Components
• Cypress tests
• React Testing Library
• Git Workflow
• npm
• Vercel

Project setup

1. Clone this repository.

2. Install all npm dependencies

   npm install

3. To run the app in development mode npm start, then open http://localhost:3000 to view it in the browser

4. To run Storybook npm run storybook

5. To run unit and component tests npm test

6. To run Cypress tests npm run cypress and npm start

influencer-finder's Issues

InfluencerForm

Value statement - a requirement, not a solution

I am an influencer
I want to set up a profile
so that I can be found for collaborations

Description (Text, Scribble, Wireframe, Design)

Navigate to "Set up a profile" and fill out a form, then you will see your new profile.

Acceptance criteria

• URL will change to /create and /profile
• form has required fields, which have to be filled, before the form can be submitted
• by submit /create the form, the profile will be saved
• show abbreviate Number for followers like 12k or 3.5m on your profile

Tasks

• Create feature branch

• Create NavigationPage in storybook

• Create CreateProfile in storybook

• Create Profile

• Add components to app (feature implementation with state)

• Write tests

• Write cypress test

Size

medium

CategoryPage

Value statement - a requirement, not a solution

As a marketing manager
I want to find an influencer for a specific category
so that I can collaborate with a person who fits to the project/product

Description (Text, Scribble, Wireframe, Design)

A category page which directs you to a list of all influencer

Acceptance criteria

• Click on a category to show a list from all influencer profiles

• Click the go back button (<) to see the CategoryPage again

• URL will show in which category you are for example / or /InfluencerList

Tasks

• Create feature branch

• Create CategoryButton component in Storybook

• Write CategoryButton component tests

• Create CategoryPage component in Storybook

• Write CategoryPage component tests

• Add react-router

• Create Headline component in Storybook

• Write Headline component tests

• Add components to app (feature implementation with state)

• Add missing styles

Size

medium

Delete-Profile

Value statement - a requirement, not a solution

I am an influencer
I want to delete my profile
so that I can remove my data

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• Delete Button deletes profile

Tasks

• Create delete button in Profile component in Storybook

• Write delete function

• Write component tests

• Add components to app (feature implementation with state)

Size

small

InfluencerList

Value statement - a requirement, not a solution

As a marketing manager
I want to see influencer profiles
so that I can find the right collaboration partner

Description (Text, Scribble, Wireframe, Design)

A list of influencer profiles with important details

Acceptance criteria

• implement as shown in wireframe

Tasks

• Create feature branch

• Create InfluencerList component in Storybook

• Write InfluencerList component tests

• Add components to app (feature implementation with state)

• Add missing styles

Complexity

small

Profile-pictures

Value statement - a requirement, not a solution

I am a marketing manager
I want to find Influencer based on their pictures/content
so that I can see if the person will fit to our project/product

Description (Text, Scribble, Wireframe, Design)

This page will have a profile picture and a headline

Acceptance criteria

• Add profile pictures

Tasks

• Create feature branch

• Add image path

• Display image

• Add components to app (feature implementation with state)

• Add missing styles

Size

small

Filter more

Value statement - a requirement, not a solution

As a marketing manager
I want to find an influencer for a specific gender, location, follower amount
so that I can collaborate with a person for a specific budget

Description (Text, Scribble, Wireframe, Design)

Tasks

• Create feature branch

• Create menu

• Filter gender, location, follower amount

• Test menu, filter

• Add to router

• Add components to app (feature implementation with state)

Size

small

Save favourites

Value statement - a requirement, not a solution

As a marketing manager
I want to save my favourite profiles
so that I can easily make decisions which one will fit best for a collaboration

Description (Text, Scribble, Wireframe, Design)

Save your favourite influencer and find all favourites on one click.

Acceptance criteria

• Add or remove your favourites

• See all favourites on one click

• Change url to /favourites

Tasks

• Create feature branch

• Create FavouriteButton component

• Add FavouriteButton to storybook

• Test FavouriteButton

• Save locally, load and filter to /favourites

• Create Nav component

• Add Nav to storybook

• Test Nav component

• Add components to app (feature implementation with state)

• Update Test App

Size

medium

Contact

Value statement - a requirement, not a solution

As a marketing manager
I want to contact influencer
so that I can collaborate with them

Description (Text, Scribble, Wireframe, Design)

With the contact button you can send out an email

Acceptance criteria

• Contact button leads to mail

Tasks

• Create feature branch

• Create ContactButton component

• Add ContactButton to storybook

• Test ContactButton

• Add components to app (feature implementation with state)

Size

small

Filter-categories

Value statement - a requirement, not a solution

As a marketing manager
I want to find an influencer for a specific category
so that I can collaborate with a person who fits to the project/product

Description (Text, Scribble, Wireframe, Design)

The CategoryPage which directs you to a list of influencer for a specific category

Acceptance criteria

• URL will show in which category you are for example / or /food /fitness /beauty /fashion /interior /travel

Tasks

• Create feature branch

• Create pages – food /fitness /beauty /fashion /interior /travel

• Filter categories

• Test pages

• Add to router

• Add components to app (feature implementation with state)

Size

medium

Shrink images

Value statement - a requirement, not a solution

As a user
I want to see an app with pictures
which loads fast

Tasks

• Shrink images

Size

small

Styling

Value statement - a requirement, not a solution

As a user
I like to see pictures instead of text
so that I have an idea what this app is about and get inspired

Description (Text, Scribble, Wireframe, Design)

Slideshow of profiles on CategoryPage

Tasks

• Add picture slideshow to CategoryPage
• Update slideshow for media queries

Size

small

Style FavouritePage

Value statement - a requirement, not a solution

As user
I want to see a difference between "Browse" and "Favourite" page
so that I don´t get confused on what page I am

Acceptance criteria

• new style for FavouritePage

Tasks

• Create FavouritePage component in Storybook

• Write component tests

• Add components to app (feature implementation with state)

• Create Design elements in Storybook

Size

small

StartPage

Value statement - a requirement, not a solution

As a user
I want to see a start screen
so that I know what this app is about and how to use it

Description (Text, Scribble, Wireframe, Design)

A StartPage which shows information what to expect and a start button to the NavigationPage

Acceptance criteria

• Start button goes to NavigationPage
• URL will change from / to /navigate

Tasks

• Create StartPage component in Storybook

• Write StartPage component tests

• Write component tests

• Write cypress tests

• Add react-router

• Add components to app (feature implementation with state)

• Add missing styles

Size

small

Responsive

Value statement - a requirement, not a solution

As a user
I want to open the app on different devices
so that I can use it wherever I am

Description (Text, Scribble, Wireframe, Design)

Acceptance criteria

• center all content

Tasks

• Center Header
• Center Content
• Update tests

Size

small