generosity-market / generosity-market.github.io Goto Github PK

Use the Example sliders from the User Dashboard and Organization pages to create cause lists. We can have multiple sections some ideas on how to sort would be: Recently Added, Near Completion, By Organization (Slider of Organizations), By Type (Trips, Missions, Adoptions, etc…). On top we will use a Featured Cause section and make the image/tile much larger for visual parity. This can still be a slider with multiple causes but only to show one on the screen at a time.

This form has not been tested to work. Boilerplate is there though. How do we want to handle the verification of the persons non-profit? Currently there is code to handle on the front and the back end.

Let’s darken the background when active and make the background clickable to exit the form. Much like a modal. We also need to add address and name fields to this form

Set up all tokens and keys in a .env file. Add this to git ignore so it won’t be commited.

Let’s create a reusable tile and replace the ones in the organization, dashboard, and possibly the iconSelector components. Maybe call it something better than CauseTile?

Break up the Tile Section layout into smaller blocks. They should only show three rows of icons per block. From there we either make the Tile Section scrollable or as a slider.

Clear out the create-react-app boilerplate and add some more useful information. I recommend a to-do list that can be checked off when features are completed.

This might be a good starting point too: A template to make good README.md

Add propType checking to each component. Npm package already installed. Would probably be best to start in the components directory

Check this link for more info on how to implement:
https://www.npmjs.com/package/prop-types

Create the Image Uploader Component inside the CauseForm directory.

Research both of these technologies for photo uploads so we don’t have to store images in our database. We want to only store a string for the hosted url is possible.

Add options (props) to allow for multiple sizes of these Tiles so we don’t have to create another component for this. The larger size will be used at first as the Featured Causes on the Cause List Page.

On the checkout page we want the user to be able to click on a cart item and have it navigate to that cause page. Making it easier to navigate the site, as well as donate more to that cause.

Start adding the redux actions/reducers/store items to create a cart.

Boilerplate already there. Interferes with the bottom bar on the checkout page. This fix would have to coincide with the checkout page bottom bar fix.

Add an onClick to the tile component that fires an add to cart redux action.

Let’s create a reusable slider wrapper component with the correct css styles and just pass in the content needed for horizontal scrolling.

We need simple inputs in the CauseForm component that changes the roundImage state (Already set to true). This will give users and organizations the chance to pick between round and squircle profile images

The container in the checkout page should be fixed and have the content inside that container be scrollable. Do this instead of having the entire page scroll.

Create a component for Font Awesome icons. Allow it to be passed the correct className as props.

Move images to /public folder for easier access

Use the localStorage API to store the users cart info. This allows the info to persist in case of a refresh.

Start here:
https://www.robinwieruch.de/local-storage-react/

Data lives in /public folder. We need to add all of the necessary redux ( Actions, Reducer, Initial State ) as well as the fetch call in Services

Add this in the /public folder so we need to make a fetch call to access the data. Then use this data to create the Organization screen

You will need to perform a GET call to access the json data. This gives you reason to build out Redux actions and reducers, which will be needed eventually.

Compress project images for faster loading, especially for mobile.

Either set up approaches for error handling for each route, or set up an alert system for errors. We need a way of alerting the user when an action errors.

Look here to start:
https://medium.com/@leonardobrunolima/react-tips-error-handling-d6ca2171dd46

Add a Utility function that calculates the percent of the goal already raised. We can use this for the ProgressBar component as well as on the main CauseList component to sort causes that are closest to completion.

Take the Id of the cause from the response data, use that in a history.push() to navigate to that cause page.

Fix this

Once we have a desktop version - Check out the site on Edge and fix any layout issues

Use the npm package react-lazy-images to lazy load the images in scrollable sections

Boilerplate is in App.js, does not send a request to the api. Once that is done, let’s store the token, userId, email in cookies using the Cookies npm package.

Add the favicon and other info to manifest.json with relevant app information.

Start adding Stripe logic in the Checkout page. Use the front_end_POC as a loose guideline.

Add logic to share a cause to Social Media.
Places to start:
https://css-tricks.com/simple-social-sharing-links/

https://www.npmjs.com/package/react-share

When trying to send a transaction with a bunch of selected tiles, the request returns with “Error: Payload too large”. We could be sending too much data with each cart item. Let’s reduce to only the required data to make the transaction happen.

Start building out the Organization Component. Use a similar layout to the User Dashboard page.

Once we have a desktop version - Buttons for Firefox are taking up too much space

Add this to /public/api. The properties needed are, id, causeId, donor (thier name), comment, amount, donorImage.

Once cart implementation is complete we need to start building this page. Here we will start some Stripe API implementation

Width of the progress bar doesn’t show correctly, especially noticeable when progress is near completion

These buttons layouts are acting kinda funky. Tweak the css for these

Some old code from a previous attempt is still in the codebase. We want it removed if it is not necessary to the current approach.

Some mock data lives in the /public folder. We no longer need it as we will have a working API

new feature

• Create a reusable heading • Replace all of the H3 tags in the User Dashboard and Organizations screens • Add Headings to the main CauseList page above each slider section

On the cause list page, progress bar should show “Mission Accomplished” when all tiles are purchased. This behaves as expected on the single cause page. Check that page for insight.

Seperate the round image element (found inside of the Header component, and Donor Comments) into it’s own component since it is used in multiple locations within the app.

Come up with a more performant design. Too much data on this page, making it load too slow. One course of action could be having only one carousel on the page and using filters to fetch a new list based on the filter. Must fetch this with a sorting option in the get function.

Where to start:
(Filters)
https://www.behance.net/gallery/66345223/Evento-App-Design?trackingid=T32PLY3L&mv=email

Create the calculation to update the progress bar based on the fundraising amount remaining