New York City Council Full Stack Coding Challenge
You will have 1 full week to complete this challenge starting when you received the challenge from our office. You can submit your challenge using our Google Form.
The Task
NYC’s 51 Council Members want a dashboard application that shows the complaints being made in their respective district. The backend will be a Django RESTful API and a React frontend that makes API calls to the backend endpoints.
What we’re providing
We’ve set up some starter code for you to use. For this challenge you will be working with React as your frontend and Django as your backend API. Here’s what we’ve done to get you set up:
- The default React files generated by the
npx create-react-app
command. - Django files generated by the
django-admin startproject
command. - A SQLite3 database that’s already seeded with User data, UserProfile data, and Complaint data.
- Each login follows this format:
- Username: {first_name_initial}{last_name}
- Password: {last_name}-{district_number}
- (NOTE: Single digit district numbers do not have zero-padding)
- Each login follows this format:
- Empty methods/views for the endpoints that you will use on the React side.
Important things to know about the data
- The fields
account
andcouncil_dist
both refer to a council district. However,account
refers to the district in which the complaint is being made, andcouncil_dist
refers to the district in which the person who is making the complaint lives. (i.e., John Doe is the Council Member for District 1, if a noise complaint labelsaccount
asNYCC01
andcouncil_dist
asNYCC34
, that means the complaint is being made in his district 1, by a person who lives in district 34). - All of the data are string data types except for the open and close dates. In addition, the data is NOT entirely clean; some fields will be empty strings or NULL.
- Single digit districts numbers are padded by a zero in the Complaint table, BUT single digit district numbers in the UserProfile table are NOT padded by a zero. You will need to take this into consideration when writing your code.
How to Start
- Start by cloning this Github repository to download the starter code.
- Make sure your repository is public so the team can access and review the code.
- Make sure you have python (version 3.6 or greater) and node installed.
- Inside the main directory (
fullstack-coding-challenge/testApp
), run the following commands to install your dependencies and set up your database:pip install -r requirements.txt
(you can do this in a virtual environment like venv or anaconda if you’d like)python manage.py migrate
python manage.py populate_db
python manage.py createsuperuser
(If you want to access the django admin portal to view the data)
- Inside of the React app (
fullstack-coding-challenge/testApp/frontend
), runnpm install
to get all of your frontend dependencies. - From there you should be able to start your frontend and backend using
npm start
andpython manage.py runserver
, respectively.
The API endpoints
localhost:8000
Route | Method | Description |
---|---|---|
/admin/ |
GET | Log in for superusers into the Django admin portal |
/login/ |
POST | Accepts username and password and returns a token. Use this token to authorize use of other endpoints. View the documentation |
/api/complaints/ |
GET | Returns all complaints |
/api/complaints/openCases/ |
GET | Returns all open complaints |
/api/complaints/closedCases/ |
GET | Returns all closed complaints |
/api/complaints/topComplaints/ |
GET | Returns top 3 complaint types |
NOTE: All complain endpoints should return complaints that occur in the user's district. View the "Important things to know about the data" section for more clarification.
MVP
The Django Side (Django Documentation)
- Fill in the empty viewsets with database queries that the frontend is requesting (see React MVP #2) (
fullstack-coding-challenge/testApp/complaint_app/views.py
) (Django REST framework viewset documentation)
The React Side (React Documentation)
- Create a simple login page for Council members to input their credentials (see above in the ‘What we’re providing’ section for the format)
- Create simple dashboard page that displays the following information:
- The number of open cases in their district (has an open date, but no closing date)
- The number of closed cases in their district
- The top type of complaint being made in their district
- Tabular data of all complaints made in their district
BONUS POINTS
The Django Side
- Create new endpoint and viewset that should return all complaints that were made by constituents that live in the logged in council member’s district. (i.e., John Doe is the Council Member for District 1, and he clicks on the new button. His dashboard table now only shows complaints where
conucil_dist
isNYCC01
). - Update the UserProfile serializer to flatten the User object to reduce calls to the database.
The React Side
Create a button labelled “Complaints by My Constituents”. This button will trigger a GET request to a different endpoint than what you’ve been using for the MVP. The data return from this endpoint should replace the data in the table.