Welcome to the Pinkaloo Stack Showdown code challenge. This project was bootstrapped with Create React App.
This project uses Redux (https://redux.js.org) to manage the application state. The applicable reducers, actions, and selectors can be found in src/modules/index.js
.
The file src/modules/mock_data.json
itself should not be modified. Consider this to be immutable data coming from an API.
- Run the app using
yarn start
- Replace placeholder values in
CampaignDetails
component- Display total dollar amount of contributions for the campaign
- Provide the campaign's goal progress to
ProgressBar
- Replace placeholder values in
CampaignContributions
component- Display the associated user avatar
- Display the associated user name. Show both
first_name
andlast_name
if available
- Sort campaign contributions by date. Newest contributions should display at the top
- Add the ability to contribute to the selected campaign using the
DonateForm
component- Create an addContribution function in
modules
that accepts acceptsamount
andcampaignId
as input parameters and returns a redux action - Handle the created redux action in the app reducer and generate a full contribution using the
amount
andcampaignId
.- Example Contribution (all attributes required):
{ "id": 49, "amount": 12.51, "campaignId": "elastic", "date": "2019-08-15T03:00:00.000Z", "userId": 17 }
id
should be auto-incremented using(contributions.length + 1)
,date
should be the current datetime JSON formatted,userId
should be derived fromsession.user.id
.- The newly generated contribution should be appended to
state.transactions
in the action reducer
- Example Contribution (all attributes required):
- Decrease the user's available balance after successfully contributing
- Show validation error in
DonateForm
component if user does not have the required funds to contribute
- Create an addContribution function in
- Prevent
ProgressBar
component from visually overflowing whenprogress > 1.0
- Sort campaigns in
CampaignNavigation
by goal progress (total contributions / goal) - Resolve any generated warnings from Webpack & React that are displayed in the browser console
- Optimize data lookup (e.g memoize selectors or restructure redux state)
- Add your own feature to Stack Showdown!
Via GitHub:
- Create a public repository, push your changes and email the link to
[email protected]
Via Email:
- Remove the
node_modules
directory and send a.zip
of the project directory to[email protected]
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.