Assignment 9: Django REST API and React Native Client

due by 9:00 p.m. EDT on Friday 4/3/2026

Preliminaries

In your work on this assignment, make sure to abide by the collaboration policies of the course.

If you have questions while working on this assignment, please post them on Piazza! This is the best way to get a quick response from your classmates and the course staff.

Learning Objectives

After completing this assignment, students will be able to:

• Implement a REST API for a Django application.

• Use basic RN components including View, Text, Image, StyleSheet, and ScrollView to create a (read-only) user interface.

• Use the Tabs template as a starting point for a project, and use tab navigation between Screens.

• Connect a React Native application to a REST API to GET data for display.

• Develop a RN interface to create data, ans POST to a REST API.

• Test your RN application on the iPhone or Android simulator for testing.

Pre-requisites: Expo and React Installation

Before you can build your first React Native application, you will need to follow the instructions on Blackboard about installing the Expo Framework.

You should also go through the first batch of React Native tutorial videos (on Blackboard) and follow along with the examples.

Task 1: Django Application and REST API

intro

1. Create a Django App called dadjokes. This app will have 2 data models:

   • Joke, which will store the text of a joke, the name of the contributor, and the timestamp of when it was created.

   • Picture, which will store the image_url of a silly image or GIF, the name of the contributor, and the timestamp of when it was created. Note: the Picture is independent of the Joke, i.e., no foreign-key relationship.

   Add at least 5 Jokes (must be G-rated; sexist or racist jokes are not funny, will not be tolerated, and will result in a grade of 0 on this assignment and an audience with the CAS Dean of Students).

   Add at least 5 Pictures (must be G-rated).

   Define views and templates (simple is ok) to support the following URLs:

   • '' - show one Joke and one Picture selected at random
   • 'random' - show one Joke and one Picture selected at random
   • 'jokes' - show a page with all Jokes (no images)
   • 'joke/<int:pk>' - show one Joke by its primary key
   • 'pictures' - show a page with all Pictures (no jokes)
   • 'picture/<int:pk>' - show one Picture by its primary key

   Test your application thoroughly from a web browser client.

2. Implement a REST API for your web application.

   An example will be show in class on Tuesday 11/11/25.

   The REST API will enable HTTP GET for the following APIT endpoints (URLs):

   • 'api/' - returns a Json representation of one Joke selected at random
   • 'api/random' - returns a Json representation of one Joke selected at random
   • 'api/jokes' - returns a Json representation of all Jokes
   • 'api/joke/<int:pk>' - returns a Json representation of one Joke by its primary key
   • 'api/pictures' - returns a Json representation of all Pictures
   • 'api/picture/<int:pk>' - returns a Json representation of one Picture by its primary key
   • 'api/random_picture' - returns a Json representation of one Picture selected at random

   The API endpoint 'api/jokes' should also accept an HTTP POST to create a new Joke.

   You will need to create a Serializer class for each of your models, as well as specific REST API views to support each URL. You can follow the example and adapt it to your needs.

   Test your API from a web browser client.

Task 2: React Native Client

In this task, you will create a mobile client application which connects to your REST API to GET/POST data, and displays it in the mobile app.

1. Getting Started

   Create a new working directory, parallel to your django directory, called react. At the Terminal, change into your react directory. Begin a new React Native application using the tabs template, using this command:

   npx create-expo-app@latest --template tabs DadJokes
   

   In VS Code, add your react directory to your workspace for easy access to the files.

   Before you begin writing any code, verify that you can run your app in the simulator. Change into the DadJokes directory, and run the simulator with this command (on Mac):

   npm run ios
   

   For windows: use the command:

   npm run
   

   and then use the android or web-based simulator, or scan the QR code to open the Expo App on your mobile device.

2. Modify the starter code to create 3 screens.

   The starter code contains a DadJokes/app/(tabs) directory which defines the layout of the application as well as two screens. Modify this code (and rename the files appropriately) to create 3 screens: index, jokes_list, and add_joke.

   Verify that you can run the app and navigate to each screen before proceeding. The most common error is a naming error (i.e., file name does not match the name you are using in the _layout.tsx which defines the several tabs and screens navigation).

3. In the index.tsx file, modify the code to export a default function IndexScreen.

   This screen show a single Joke, along with a Picture, both of which will be retrieved from the Django web application via the REST APIs:

   • Use a GET request to the URL 'api/random' to retrieve one Joke (i.e., it’s text and contributor)

   • Use a GET request to the URL 'api/random_picture' to retrieve one Picture (i.e., it’s image_url)

   The details about how to present the joke, including sizing, styling, etc., is entirely up to your discretion.

4. Define the style information for your app.

   Create the file DadJokes/assets/my_styles.ts. In this file, define and export a StyleSheet called styles in which you will define styling information for each of the screens.

   In each of the other files that defines a screen (e.g., index.tsx), add the following import statement at the top, to gain access to your style information:

   import { styles } from '../../assets/my_styles';
   

   Now you can reference specific styles defined in my_styles.tsx to set the style property of each component, e.g.:

   <Text style={styles.titleText} ... >
   

5. In the jokes_list.tsx file, modify the code to export default function JokeListScreen.

   This screen show a listing of Jokes which will be retrieved from the Django web application via the REST API.

   • Use a GET request to the URL 'api/jokes' to retrieve a list of Jokes.

   The details about how to present the joke list, including sizing, styling, etc., is entirely up to your discretion.

6. In the add_joke.tsx file, modify the code to export a default function AddJokeScreen.

   This screen display text inputs to collect a new joke as well as the name of the contributor, and a submit button.

   The app will then POST this data to the Django web application via the REST API.

   • Use a POST request to the URL 'api/jokes' to POST a single Joke.

   Test the submission of this data. Add debugging statements in your code to to verify that you are actually sending the POST to the Django application (e.g., Console.log('...') within your app). You can also watch the Django web application’s console to see which URL is called, and what the HTTP response code is (e.g., 200 is “OK”“, 201 is “Created”).

Sample Implementation

Here are some sample screens for reference only. Do not try to reproduce these.

Submitting Your Work

1. Create a text file within your main django directory called api_url.txt, containing the URL to your API, and nothing else.

   For example: https://cs-webapps.bu.edu/azs/cs412/dadjokes/api.

   This file will be used by the autograder to locate your web page, so you must get the URL exactly correct, and you must not include any other text or code in the file.

2. Add the teaching staff as collaborators to your GitHub repository with bu-cs412. Read-only access is fine.

   Create a text file called github_url.txt in the root of your project (e.g., django directory). Paste your GitHub URL in the file.

   Add these files to your git repository using

   `git add -A`.
   

   Commit this to your git repository, using

   `git commit -m "Added Assignment 10 REST API."`
   

   Push it to GitHub, using

   `git push origin main`
   

3. Run your app in the simulator, and take screen shots of each screen using COMMAND-S (Mac) or CONTROL-S (Windows).

   Save these screen shots using the file names: index.png, joke_list.png, and add_joke.png.

4. Log in to GradeScope to submit your work.

   Be sure to name your files correctly!

   In the Gradescope upload page, upload these files:

   • github_url.txt

   • api_url.txt

   • DadJokes/(tabs)/_layout.tsx

   • DadJokes/(tabs)/index.tsx

   • DadJokes/(tabs)/joke_list.tsx

   • DadJokes/(tabs)/add_joke.tsx

   • DadJokes/assets/styles/my_styles.ts

   • These 3 screenshots of your app: index.png, joke_list.png, and add_joke.png.

   Do not upload any of the other files/directories (e.g., node_modules) as these are large and we will not need to look at them.*

This assignment will be graded manually, i.e., no autograder.

Notes:

• Upload these files to Gradescope before the deadline.

• You may resubmit as many times as you like before the deadline, and only the grade from the last submission will be counted.