The DevFund project is a proof-of-concept for a site that helps fund learning resources for new developers looking to break into the industry. It's an easy way for new devs to request the resources they need to learn to code, and for folks looking to give back to help fund them. DevFund was built to help grow the developer community and make giving back to it a little easier.
This project was built between 2/25/2019 and 2/28/2019. Any subsequent updates are reflected in the commit history.
- React
- SASS
- Superagent
- react-router-dom
- Netlify
public/_redirects
sets up site to handle different routes on the SPAindex.html
contains React boilerplatesrc/index.js
renders the main appassets/
folder contains the images used on the websitecomponents/auth/auth.js
handles auth, verifying token to provide permissions to the usercomponents/auth/context.js
sets the login context so the user can access specific pages of the websitecomponents/modules/modal.js
contains the modal scaffolding and some rendering functionalitycomponents/about.js
contains the about page, including mission statement and team bioscomponents/accepted.js
sets the accepted page that the user is directed to after submitting a request. It also provides routing to the browse pagecomponents/app.js
sets the main routing and rendering functionality for the sitecomponents/browse.js
brings in all pitches from the database and renders them to the page. Users may then select a pitch from the page and view its detailscomponents/conditionals.js
sets conditional logic used on other pages. Contains conditional for If/Then/Else, When, and Unless.components/detail.js
renders a specific pitch from the database in a modal. If a user would like to fund that pitch, they may then hit the fund button to begin the payment process for the itemcomponents/editprofile.js
provides functionality for the user to update their account details via a formfooter.js
contains the footer styling and functionalitycomponents.js
contains the header functionality and styling, including conditional rendering that changes based on the user's login statecomponents/homepage.js
renders the homepage contentcomponents/login.js
sets a login modal where the user can either log in with an existing account, or be directed to the sign up page to create onecomponents/pitch.js
allows the user to submit a pitch if they are logged in and can open the login modal on button click if not. The pitch is then added to the database and the user is redirected to a success page while the browse page updatescomponents/profile.js
pulls the user record from the database and shows the user's existing account informationcomponents/signup.js
allows the user to create an account. Upon account creation, the user is added to the database and redirected to the account page, which pulls the newly created record to render the information they enteredcomponent/success.js
confirms success of a payment after the user is re-routed to paybal and successfully completes a transactionstyles/
folder contains SASS files that style each component of the site
- to run locally, fork and clone the repo, run
npm i
, and then runnpm start
- Otherwise, visit the DevFund site to use the app
Special thanks to verticalgrain for their gist on React Router V4 Redirect after form submission. It was a great help with our redirects!
Image credits:
- background images sourced from Pexels
- social icons sourced from ionic icons on iconfinder
- helping hand icon sourced from Zlatko Najdenovski on iconfinder
- gifs from giphy.com
- placeholder images sourced from PlaceIMG