Project

Attach a Receipt to an Expense

Enhance the GoGoBudget app by allowing users to attach an image (receipt) to an expense. This feature will involve file uploads, backend storage, and frontend integration, enabling users to keep a record of receipts for their transactions.

Fullstack
</>
Python
3-5 hours

Start Building

About This Project

Instructions

In this assignment, you will build an end-to-end feature for managing receipts - creating relationships between receipt objects and transactions, developing the API methods, handling file uploads and storage, and more.

The included GoGoBudget base application includes fullstack implementations of accounts, transactions, and categories. You assignment is to implement a full-stack feature that enables users to upload and attach images (receipts) to their expenses.

You will use Python with Django for the backend, and React for the Frontend, and build in alignment with GoGoBudget's established standards. TypeScript is optional.

The starter materials also include designs for the user interface. Try to match the provided designs as closely as possible.

Objectives

This project will test and refine your skills and proficiency with:

  • Handling file uploads in Django (Django REST Framework & storage solutions)
  • Integrating file uploads with React (handling previews & form submission)
  • Storing and retrieving images efficiently
  • Enhancing user experience with a modern UI

Skills Practiced

  • Full-Stack Development: Integrating Django REST Framework with React
  • File Upload Handling: Processing and storing images securely
  • API Design & Integration: Creating RESTful endpoints and consuming them in React
  • Form Handling in React: Uploading and previewing files before submission
  • Data Validation & Security: Restricting file types, sizes, and handling user permissions
  • User Experience Design: Providing smooth interactions for file uploads and previews

Let's Start Building!

This project and many others like it are available with a Curricular account. Get started today.

Sign Up

Already have an account? Sign In

Includes

  • Detailed User Stories
  • Figma Design File
  • Image files of the target layout
  • Starter Code and README file

FAQ

Why should I build this project instead of one from scratch?

In a professional context, you're rarely starting from scratch. Curricular Projects are designed to give you a constrained real world problem so you can focus on practicing the essential skills you'll use as a professional developer, and to surface specific areas to continue studying.

Can I get help if I'm stuck on a project?

Our projects are designed to be a real world assessment of your skills, like the take home assignment during a job interview. Getting yourself unstuck is part of the skills measured. As a result, we offer very little help and direction.

However, if you encounter issues with the setup, or if you find something isn't working right that should be working, you can contact us at support@curricular.dev and we'll help you out.

Do you provide official solutions to projects?

We do not provide official solutions to projects. There are many ways to solve each of our projects. Coding is a journey, so our goal isn't for you to get the "right answer." Instead, our projects are about you flexing your skills to arrive at a solution, practicing talking about your code, and giving you helpful feedback on ways to improve.

Can I get feedback on my work?

Yes! Subscribers to Curricular Pro get their project solutions graded, with personalized feedback.

Where can I ask a question that isn't answered here?

Email us at support@curricular.dev or chat with us.

Start practicing like a pro

Create a Curricular account and start leveling up in minutes.

Join for Free