With Impactree, you can easily discover charities doing amazing work and see the real-world impact of your giving at a glance at no cost.
Set giving goals based on your income, visualize your long-term impact, and watch your seeds of change grow. Impactree makes philanthropy approachable for anyone, with clarity, helping you see how even small donations can make a big difference over time.
- Gain experience with TypeScript and the Next.js environment
- Learn to build responsive and attractive UIs with Tailwind CSS & Flowbite
- Understand the basics of server-side rendering with Next.js
- Practice creating and consuming RESTful APIs with Django REST Framework running behind the scenes
- Implement user authentication and authorization
- Practice efficiency of code principles through reusable React components
- Implement a gamification system
- Implement basic admin functionality
- Gain experience in full-stack development
- Charity discovery and categorization
- Impact visualization
- Impact Tree growth gamification
- Next.js
- TypeScript
- Tailwind CSS
- NextUi
- Chart.js
- Node.js (v14 or later)
- npm (v6 or later)
-
Clone the repository
git clone https://github.com/your-username/impactree.git cd impactree/client -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open http://localhost:3000 in your browser to see the application.
Note: This setup assumes the backend API is running at http://localhost:8000. Make sure your backend server is running before interacting with the app.
Minimum Viable Product
As a new user, I should be able to create an account
- Given the user wants to access any part of the application other than the home page
- When the user fills out the registration form and submits it
- Then a new account is created and the user is logged in
As a registered user, I should be able to log in to the application
- Given the user wants to access any part of the application other than the home page
- When the user enters their credentials at the log-in view and clicks the submit button
- Then the user is authenticated and directed back to the home page
As a user, I should be able to view a list of charities
- Given the user wants to see options of organizations to donate to
- When the user navigates to the explore view in the navbar
- Then a list of charity cards are displayed with titles that link to further details
As a user, I should be able to see charity details
- Given the user wants to learn more about a charity
- When the user clicks on a charity card title from the explore page
- Then they are redirected to the corresponding charity's details page
As a user, I should be able to view a dashboard of my total impact
- Given the user wants to see the difference they're making
- When the user navigates to their impact dashboard
- Then a summary of their total impact across all chosen charities is displayed or placeholder views of where they would be if the user creates an impact plan
As a user, I should be able to create an impact plan
- Given the user wants to start tracking their charitable giving
- When the user navigates to impact settings in the impact plan view, and enters their annual income and desired philanthropy percentage
- Then a new impact plan is created and displayed, showing the total annual allocation
As a user, I should be able to view my current impact plan
- Given the user wants to understand their giving strategy & projected impact
- When the user navigates to their impact plan page
- Then the plan details are displayed, including selected charities and allocation amounts
As a user, I should be able to edit my impact plan
- Given the user wants to adjust their giving as circumstances change
- When the user modifies their income, philanthropy percentage, or charity allocations
- Then the impact plan is updated and the changes are reflected in the UI
As a user, I should be able to delete my impact plan
- Given the user no longer wishes to use the application
- When the user selects the option to delete their impact plan
- Then the plan is removed from the database and the user is redirected back to the dashboard showing their absence of active plan
As a user, I should be able to allocate my total annual charitable amount
- Given the user wants to segment their giving
- When the user selects charities and enters allocation amounts for each
- Then the allocations are saved and the remaining unallocated amount is updated
As a user, I should be able to see my current milestone
- Given the user wants to track their progress
- When the user views their impact dashboard
- Then their current milestone based on giving percentage is displayed
Stretch Goals
As a user, I should be able to view my total allocation amount in monthly & yearly amounts
- Given the admin user wants to visualize their impact potential by year and month
- When the user clicks on the "Monthly | Yearly" button on the impact-plan page
- Then the changes are reflected in the UI
As a user, I should be able filter charities in the explore page by cause
- Given the user wants to only find charities that fall within one category
- When the user selects from a dropdown menu of charity categories
- Then the charity cards will reflect the UI
As an admin user, I should be able to add a new charity
- Given the admin user wants to create a new charity that isn't present on the explore page
- When the admin user clicks on the "add a charity" button on the explore page and fill out the required form
- Then they are redirected to the newly created charity details page
As an admin user, I should be able to edit charity details
- Given the admin user wants to update the details of a charity organization
- When the admin user clicks on the edit button on the charity details page
- Then they are redirected to the update charity form page
As an admin user, I should be able to delete charity
- Given the admin user wants to remove a charity option
- When the user clicks on the delete button on the charity details page
- Then they are required to confirm the deletion, and redirected to the explore page
We welcome contributions to Impactree! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.