Project 4

Overview

This is your capstone project and as such is left the most open to you to decide which technologies are most suitable.

Make sure you review your project proposal with your instructors so you can make sure it's something you can accomplish in the limited time we have, and make sure it's something that'll showcase your skills both visually and functionally. Sometimes people do judge a book by its cover – or an app by its design.

You are allowed to form teams but do note that the scope of your project is expected to be larger (i.e. more (complex) features, cleaner, more efficient code.)

Learn Something New

This is your chance to go wild and try new things! You are encouraged to try something we haven't covered in class whether it's something small like a library or API or something bigger and more ambitious like making a real-time app.

Recommendations

Small(er) Things

• Use Tanstack Query for your data fetching needs.

• Use Jotai to manage your app's state.

• Use Immer to simplify your state updates.

• Integrate with the Spotify API.

• Do something location-based and integrate with OpenStreetMap using Leaflet or React Leaflet; or Google Maps using @react-google-maps/api or @ubilabs/google-maps-react-hooks

Bigger, More Ambitious Things

• Use Supabase or Firebase as your backend.

• Make a real-time app! Use websockets to allow real-time interactions between users in different browsers. Use Supabase/Firebase or Socket.IO if you're writing your own backend.

• MongoDB (go self-hosted or use Atlas) - Try using a No-SQL storage service instead of Postgres.

• React Native (Use Expo to get up and running quicker) - build a mobile app using React and JavaScript!

• Build your own game (with or without React)! Check out Phaser.

Technical Requirements

Your app must:

• Be a complete product, which means that it is usable from head-to-tail, in the environment it is meant for.

• Persist data in some way, whether with Postgres or something we haven't covered in class and one you want to learn.

• Implement partial to full CRUD the app has to allow users to add, share, modify or organise some kind of data for some useful purpose.

• Have an interactive front-end written in React (with React Router if URLs make sense for your app).

• Have passing tests for some core logic and/or components.

• Not be your personal portfolio website.

Necessary Deliverables

• A git repository on Github with frequent commits dating back to the very beginning of the project.

• A README.md file with:

  • An embedded screenshot of the app

  • Explanations of the technologies used

  • A couple paragraphs about the general approach you took

  • Complete installation and set up instructions for running your app locally

  • Link to your user stories – who are your users, what do they want, and why?

  • Link to or embed your wireframes – sketches of major views / interfaces in your application

  • Descriptions of any unsolved problems or major hurdles you had to overcome

• A short (10min) presentation/demo and Q&A

Resources

• How to Write a Good README

• User Stories

• HackDesign (beginner's reference for thinking like a designer)