Thank you for your interest in Bits of Good! This assessment is designed to showcase your practical skills as a developer. The tasks included reflect the skills most often used by developers at BoG. This README has a lot of information so make sure you read it fully. While doing the assessment, if you have questions or find any part unclear, please file a GitHub issue and add @uma-anandas an assignee.
The assessment has front-end and back-end portions, which can be completed independently or together if you are a full-stack developer. You are not expected to complete everything. Focus on code quality over quantity to demonstrate how you write and organize code.
The project includes a pre-defined file structure and sample code to guide you. Feel free to modify anything as needed.
Files and folders with a mock designation are for the mock-backend used in the front-end portion. If you are working on the back-end, you can skip these files but review them for context on the code structure.
Before submission, run eslint using npm run lint and ensure there are no warnings or errors. If for any reason you have to disable a rule in a file, leave a comment in the file explaining why.
Make sure to complete the checklist in notes.md. Additionally, this is a place to leave any notes/comments [eg. feedback about the assessment, if you didn't have enough time due to personal reasons etc.].
To submit, share the link to your repository in your application. If you have used any env variables, make sure you copy and paste your .env file into the application! We will want to test submissions locally and it is better not to publicly commit env variables.
Crisis Corner is a non-profit that handles requests for items in areas that are affected by natural disasters. Their current Admin Portal currently only has a form where admins manually type in items to approve them. You are part of a team working with them to build a better Admin Portal where they can manage received item requests in a more nuanced fashion.
The project uses the Next.js App Router with a src folder. Please make sure to follow the app router layout- most Google results refer to the page router. This project has been bootstrapped using Next.js, React, and Tailwind. The programming language used is TypeScript. We expect developers to use the same technologies. However, thre is no limit on libraries- feel free to import any helpful libraries. For backend developers, while implementing the database, we expect you to use MongoDB. These requirements are there to mimic the stack most often used by Bits of Good. [We also recommend you use a code formatter like Prettier, but it is not a mandatory requirement for this take-home.]
To get started, fork this repository on GitHub. Then clone onto your local machine. Read this if you are unfamiliar with doing that.
We recommend you have a Node.js version > 18.0.
First, install all the dependencies for this project by running npm install from the root of this project.
The run the development server using npm run dev.
If you are using yarn or another package manager, run the equivalent commands.
Open http://localhost:3000 with your browser to see the already implemented landing page.
You can start editing the code now!
Now that you have the repository and the application set up locally, you are ready for the first task! This is for everyone regardless of whether you are a front-end/back-end/full-stack developer. We want to get to know you better!
Go to http://localhost:3000/cool or press the "Something cool!" button in the homepage. This is a space for you to put something unique or interesting about you- it can be anything - don't sweat it! Just edit the src/app/cool/page.tsx file.
All your remaining tasks are based on whether you are a front-end/back-end developer. Navigate yourself to either FRONTEND.md or BACKEND.md for instructions. If you are a full-stack developer, we recommend you do the back-end portion first.
There are a number of tasks in each- please remember you do not have to do everything and you are not penalized for it. The tasks are broadly classified into the following categories:
- Minimum Requirements: This is a mandatory section as it is the bare minimum you need to do for us to be able to assess your ability. If you are a full-stack developer, it is only compulsory for you to do the minimum requirements in either front-end or back-end (pick the one you feel more comfortable with)- but we recommend you do the minimum in both.
- Main Requirements: These are tasks we expect more than 50% of developers doing this take-home assessment to end up doing.
- Above and Beyond: These are tasks we do not expect most developers doing this assessment to undertake.
Another reminder that you do not have to do more than the minimum requirements. While doing more reflects positively, not doing more will not prevent you from moving further in the recruiting process if the code quality is good.
Good luck and have fun! 🎉