This is the technical screening is part of Everfund's interview process for full-stack engineers. Please familiarise yourself with the contents of this README, as specific feature requirements are discussed in this document.
Everfund is the dev-first donation platform for modern nonprofits. Use a composable SDK to take control of all the components needed for modern donations, without building from scratch. Save time and integrate the best donation experiences faster to help nonprofits focus more on their causes.
This technical test requires you to assemble a dashboard view for a mock payments system. For some tasks, you will need to complete GraphQL resolvers in a way you see fit, so as to present real, accurate values to the front-end components. Additionally, you may wish to exhibit your CSS flair by improving visual aspects of the dashboard. Please see the full lists of primary and extension tasks below.
This project consists of a basic Redwood application, written in TypeScript with strict mode enabled. The application is split into web and api directories.
We expect completion of the following primary tasks:
- Implement the requisite queries to populate the values for the following stats cards:
- Total number of donations
- Total amount donated (£ GBP)
- Donations with Gift Aid (%)
- Implement a table showing the newest 20 donations for the selected non-profit. You can improve the look-and-feel of the table as you see fit. We provide a Table component, viewable in Storybook.
If you have time remaining, it would be good to see you tackle the following extension tasks:
- Replace table columns with iconography (This can be done with heroicons as it's already installed) or other styling to best display the data stored in those columns.
- Add additional stats cards to the dashboard, choosing other stats that you feel may be useful to a non-profit worker.
- Design and implement an additional component of your choosing, which you feel will be useful to a non-profit worker. This is your opportunity to demonstrate creative and technical flair!
We understand and appreciate that there are many different approaches to these problems, and opportunities to showcase individuality. Please feel free to lean on NPM libaries to help complete the objectives. Specifically, you need to be able to explain your approach, including architectual decisions and use of any libraries. Show us what you can do!
- The terms donation and payment are used interchangably throughout this document and codebase. Typically, a donation is a payment with additional metadata.
- Amounts are stored in the database in pennies, but should be displayed as £xx.xx.
- Resolvers should only return records or data pertinent to the selected non-profit. Revealing information about other non-profits is bad!
- Gift Aid is applied at the standard UK rate (25% of the donated amount).
- Stats cards should only be concerned with donations in the succeeded state.
- The donations table should not be concerned with the status of a donation.
- The non-profit that is selected can be accessed through the React context that is found at MainLayout.context.tsx.
- Look out for TODO comments; they may help to guide your approach, although it is also valid to disregard their advice.
Prerequisites
- Redwood requires Node.js (>=18.x) and Yarn (>=1.15)
- Are you on Windows? For best results, follow Redwood's Windows development setup.
Start by installing dependencies:
cd technical-interview
yarn install
Then change into that directory and start the development server:
yarn rw prisma migrate reset
yarn redwood dev
To start storybook to see the components:
yarn rw storybook
The quickest way to submit your work is by forking this repository, then sending us a link.
Alternatively, you can copy this repository to your personal space, and send us a link to your branch (if you make your repo private, you'll need to invite us as collaborators).
If this is an unsolicited application, you can contact us with the link to your fork and your CV to email.