Between September and December, I spent +200hrs building a web application in React and Django for my university’s capstone project, where students form a small group and work with a real client to solve a business problem.

Table of Contents

Introduction

This series of posts detail my first exploration into full-stack development with an actual client, and walks through both the technical and business aspects of taking a project from start to end.

This post provides a brief overview of the project and its goals. I will try to include as much context as possible but will need to hide some details.

We had approximately 10 weeks of programming and for all team members it was our first time diving into web development.

Pre-requisite Knowledge

You can treat this series as a fun read, and whilst I will cover some non-beginner programming concepts I will also provide code snippets so it is not all foreign.

For your own learning, I can only say that implementing a project and solving problems as you encounter them provided me the best education and more importantly the confidence to keep going when I got stuck.

Project Overview

To oversimplify the project, I will define the requirement as building a web application for students to take multiple-choice tests and review their results.

The interesting part about this project is that the client was also in this capstone program last year. As a result, we inherited the codebase written by students from the previous cohort.

The codebase was a standard Django application that used Jinja templating to render the web pages and was deployed on AWS Elastic Beanstalk with AWS RDS as the database.

Planning the work

After the kickoff meeting with the client, we decided to pivot the tech stack to use React for frontend and use MobX for state management. Because of this, we decided to adopt Django REST Framework (DRF) to build the APIs that the frontend will call.

Since we had 5 people in our team, we split our team members in 2 people working on frontend, 2 on backend and I would jump in-between both and help out with the deployment on AWS.

Architecture

To whet your appetite I have included a diagram of the high-level architecture.

The details of each component will be discussed in later blog posts.

We will have a post dedicated to deployment as its a big topic - even if modern cloud service providers make it much easier.

High Level Architecture

Sneak Peek

In the next instalment, we will talk about building the frontend using React.

The post will include:

  • Setting up react-router-dom to configure dynamic url paths.
  • Using axios to make API calls to the backend
  • Using .env for different environments
  • Using the React hooks useContext() and useEffect()
  • Storing user info in local storage
  • Using Promises.all() to wait for all async calls to finish before continuing.
  • Using MobX to manage state in a store and control the store with a presenter.

UPDATE: You can read part 2 here