The fan-forge-frontend from comic-con-museum

P2: About page

This page should have the information from the mockup about page, as well as:

Description/summary of the purpose for the ideas of exhibits / why this is important
Description of how to use the site
Context of the site
FAQ (fun / humorous)

Make about prettier

Add a shadow and border around the image
Move the text in (padding/margin), a bit more than the image

Submit page

-create component similar view as single view
-allow user to edit title, tags, description
-page 4 of design pdf doc

P1: API Integration

Integrate with all your pages... obvious but something that needs to be done.

P1: Filters on the feed page are non-existant

Change gradient on the profile page to be less of a change

P3: Feed page update

The image at the top, set the height / max-width css to make the picture

P2: Profile page updates

Looks a bit clunky compared to the rest of the pages

Landing - P4: The text on the home page is hard to read

Slightly fade the image in the carousel to make the text more readable.

Create Text Component for Internationalization

REQUIREMENTS

DATA

locale: used to look up in the strings hashmap -- this comes from the redux store
stringId: used to look up the string based on the locale -- this comes as a prop

FEATURES

Given a stringId and a locale, look up in the strings.js file the correct output and return the text inside a This way we can let the parent of this component say in what element should the text leave (h1/p/span/etc). -- Return value is open for discussion

ACCEPTANCE CRITERIA
Component needs to have propTypes and defaultProps
All the requirements are addressed

P3: Naming Consistency

Landing page uses the term support. Details page uses like on the call to action button.

P2: Detail page updates

Only one of the detail / inspiration pages should be out at once, there's way to much text on the screen at a time
- better organization of the content would really help this
make the content when minimized have the grey color, blue when the content is expanded out
Maybe make the 2nd column for submitted artifacts w/ description & inspiration on the left side
Put a model dialog for viewing the artifacts, showing all the details for the specific artifact

P1: Create Exhibit call to action missing

The side of the screen does not have a call to action to create their own idea.

P4: The home page text should have links

Consider validating license usage

https://eladnava.com/check-your-dependencies-license-requirements-with-tldrlegal/
https://www.npmjs.com/package/license-checker

Consider using a library such as the ones listed above to validate the licenses being used.

Integrate with social media platforms

Ex: Share on Facebook, ....

P2: Update Submit Page to Match Updates to design

Update Submit Page to Match Updates to design. This includes tag handling and adding group members.

Concurrent modification while viewing feed

Due to the way that the exhibits are paginated, it is possible that:

You load the first 6 exhibits
Other user makes a new one
You scroll down, next 6 are loaded, first one is the same as the last one of the last batch

Way to fix:

remember the keys of the exhibits
when a duplicate one would be added, you skip it
since you can detect a new one being added, could even potentially load the first page again, and shift the elements down one

REQUIREMENTS

Add loaders for jsx, scss, assets, svgs, html, fonts and any other file types you might find necessary.
Create a development command which supports hot module replacement.
Create a build command which minifies the assets.

Global search bar

This way, you can look for a specific titled thing, someone's profile by their name, ...

P4: Bug when switching off details page

There are artifacts that happen when switching off the details page to another

P4: Submit your artifact button

"Submit your artifact" button should go to a "+" at the end of the artifact carousel.

Landing - P2: Make the scrolling text be links

Make the scrolling text on landing page be links to the appropriate page.

Implement login functionality (no auth for MVP)

-login popup when login button is clicked (popup filter)
-username/password input
-changes homepage to logged in view

P4: Discussion comments / updates view

If there are none, make a thing that says, "There are currently no comments"
This way you can see it

P4: Submit page update

Make the back and next buttons horizontally centered
Put the link in the feed

Implement animation

-when clicking on an exhibit in feed, will expand exhibit to width of the screen
-exhibit "hides"
-other exhibits in feed move down
-single exhibit component pops up

P4: Navigation Slide is Inconsistant

The slide between screens largely slides to the right except one time where it slides to the left. It doesn't make sense.

Fix Home Screen to fit to just the page

We want the image on the front page to not force the page to scroll.

@cristidrg Can you please look at this, should be a quick css change

Reduxify Comments

REQUIREMENTS

DATA

PROPS

show: show/hides the comment box. Feel free to rename this, it should come from the parent rather than the redux store
id: used for making the post request
comments: used to display the comments
apiStatus: {status, messageId};
-> Status is one of loading, error, success
-> MessageId is the string id used to look up the message in the strings file

FEATURES

When submitting a comment you are notified about the status of the api call. You can see a loading spinner and you then see a message if the comment was posted or if there was an error
If api call was successful the comments are updated so you can see your comment. You can submit another comment now.
There needs to be some sort of form validation. Communicate with back end to figure out what's the plan.

ACCESIBILITY

The input form needs to be accessible: https://www.w3.org/WAI/tutorials/forms/
The user needs to be notified of the status of the api call. After pressing submit consider focusing the loading spinner. If post is successful then focus the success message, if post is not successful focus the error message. Might want to look into what the w3 suggestions are for this

ACCEPTANCE CRITERIA

All static text needs to be added in the strings.js file and are making use of the Text component
Component needs to have propTypes and defaultProps
All the requirements are addressed

P2: Missing Live Preview in submit

A live preview is when the text / image is getting changed / added, the change should be immediately reflected in the UI.

The Basics page should provide a live preview of the Feed Card.
The Advanced page should provide a preview to the Main Details Page.

For MVP, we can live with just showing Details Page.

P2: Responsive web design

Images on the page are too wide, don't just demo the center of the images

Proper dist/ build from webpack

Need to have a working build so we can deploy

P3: Make a simple Login Page

With just a username field and that is it.

Save the username into the redux store so that we can pull it throughout the rest of the session.

Make our files be able to bundle and use a different start script

The way we are serving our app is not good, we need to fix that :)

Nav: Add Language Support

Add a language switch control to the navigation bar. In the future, this would most likely be a profile page preference. But we want to make it bold for the demo that we support it.