Skip to content

(Important): Roadmap and Deployment

🗺️ Roadmap: Making This Thing Actually Work

So here is the deal - We did a bunch of stuff that seemed genius at the time but now feels like I handed you a Rubik's cube made of spaghetti. This roadmap should help you untangle it all while actually learning something useful.

Summary of All Proposed Changes

Component Current State Proposed Change Why/How Learning Resources
Deployment Manual, painful setup Add Dockploy to VPS See Deployment Section Dockploy Setup
Architecture Docker-compose chaos Monorepo with Bun/Node See Monorepo Section -
Database Complex Postgres joins Neo4j graph database See Postgres Problems -
State Management Zustand with poor selectors Optimized Zustand patterns See Frontend Section Why Zustand
Data Fetching Basic React Query Advanced React Query patterns See Backend Section Why TanStack Query
Routing Basic routing TanStack Router See Backend Section Why TanStack Router
State + Data Integration Separate patterns Query + Zustand together See Frontend Section Query + Zustand
Forms React Hook Form TanStack Form See Backend Section TanStack Form
Schema Validation Current Zod version Zod v4 + Zod Mini See Backend Section -
API Client File-based OpenAPI URL-based with HeyAPI See Backend Section HeyAPI Docs
React Patterns Basic compound components Advanced compound patterns See Frontend Section Compound Components

🚀 Deployment

I Am Here to Help

Since graduating, I have been working with various deployment services - serverless, VPS, managed databases, and much more. I am glad deployment is not that big of a hassle now, so I want to offer my help with this part.

Since all of this is supposed to be on the Drexel network with the VPS they provided, it might not be that intuitive to work with standard deployment workflows.

The Solution

I will suggest adding Dockploy to the VPS and hosting its UI to one of their domains.

Resource: Dockploy Setup Video

Understanding the Environment

Take time to understand the Drexel network constraints and deployment environment before diving in.

📦 Monorepo for Better Dev Experience

The Current Disaster

Converting the TypeScript to a monorepo should be your TOP PRIORITY. Until then, suffer through the docker-compose config.

Warning: The docker-compose situation right now might be the most painful experience ever. We had to deal with it, but I hope the next team has a better experience.

Why This Matters

  • Currently, I am not sure how many of you understand and have worked with Docker
  • It is painful even when you are very good with it
  • You deserve better than this chaos

The Plan

  1. Deploy development databases, Minio service, and Redis

    • Give everyone an account so everyone can have their own space to work in

  2. Runtime Migration

    • Currently backend is completely written in Deno
    • Moving to either Bun or Node is easy since not a lot of Deno-specific things have happened there
    • Once you move to either of them, it will be a breeze to set up a monorepo where everything just works

🐘 Postgres Problems (aka The Query Hell)

The Current Nightmare

It is painful right now. The level of joins and complexity is very high - we had no other way to decouple and represent the results nicely.

At its current state, you might have a tough time querying anything result-related.

The Solution: Go Graph

Move to a graph database - I suggest Neo4j because:

  • Easy to set up
  • Easy to interact with using their desktop app
  • You will have immensely better query latency
  • Better representation of results
  • Fewer lines of query needed
  • Bonus: It can visualize all your stuff (pretty graphs!)

What You Will Gain

  • Analyze relationships between matches easily
  • Has adapters for Python and JS (works on both backend and worker nodes)
  • Your sanity back

🎨 Frontend, Organization & Authentication

The Good News

These are not difficult things - you can easily get on top of it. I made sure to use simple React and Tanstack stuff.

The Learning Curve

Only tricky thing: React compound components heavily used in Chakra (which I adopted). But that is just some YouTube videos away:

State Management Improvements

I used Zustand stores under context - good design, but I was not aware of React selectors very well at the time.

Learning Resources:

Here is what you should modify:

  1. Move all methods into an actions object

  2. Optimize re-renders with proper selectors:

    // Good way - single value calls
const valueOne = useStoreUnderContext((selector) => selector.valueOne);
const valueTwo = useStoreUnderContext((selector) => selector.valueTwo);

// Bad way - triggers lots of re-renders
const {valueOne, valueTwo} = useStoreUnderContext((selector) => ({
  valueOne: selector.valueOne,
  valueTwo: selector.valueTwo
}));

🔌 Backend & React Query

The Crown Jewel

This was one of my best design decisions - incorporating Hono and its OpenAPI stuff makes it very easy to achieve type safety across the monorepo, plus gives you hooks for query and mutation.

Bonus: You get a Scalar UI visualizing all your APIs and specs!

Learning Resources

For React Query, who would be better than the guy who wrote it:

For router and query management:

Minor Tweak Needed

Remove the OpenAPI file dependency:

  • Remove the writing to file from backend
  • In frontend, add a Vite plugin for @heyapi
  • Set the client generation specs path to a URL instead
  • This will reduce problems in general

Client Generation Resources:

Form Management Upgrade

I suggest adopting TanStack Form and dropping React Hook Form (what a piece of garbage):

Schema Validation

Please move to Zod v4 and Zod Mini for frontend - it will be so much better for performance and bundle size.

🪣 S3 Adventures

What Is Coming

You will need to add a lot of S3-related stuff - authentication, etc.

Cool Feature Opportunity

Professor Artifact Sharing: Professors should be able to share their artifacts with other professors. You should be able to do this easily, but put time into designing the flow properly.

Backup System

You need to add an account that will:

  • Gzip and store Postgres (and potentially GraphDB) data every day for backup
  • Keep everything safe and sound

UI Features & Bun Integration

There are a lot of UI features to add for S3, but one thing that you can do (especially if you plan to migrate to Bun) is use Bun's S3 API instead of Minio.

Note: Bun's S3 API might be unstable, so test thoroughly!

Important Reading 📚

Please read the React Router documentation - it has a lot of important information that will save you time and headaches later.

There will come a time where you will need these specific guides, so bookmark them:

Final Thoughts

This is quite a massive project with a learning curve. Mastering these skills is quite a task but fruitful.

Using LLMs would be very tempting to generate all the code, but a word of caution - it is written in a certain way and would be very difficult to build a vibe coding setup optimized for this style.

Be prepared to redo the written stuff to match the organization or you will be leaving a mess for the upcoming team.

All the tools I mentioned have vibe rules: TanStack Router LLM Assistance

Enforce it.

I hope this project is fun and fulfilling.

Remember: Every terrible codebase is just a great codebase waiting to be refactored! 🚀

Shameless Self-Promotion

There is always something to learn from others - aka me!

I have a nice display of the current architecture of this project at satwik.dev/projects which clearly did not get me any interviews... welp.

I have built this other platform using similar technology and keep doing experimental stuff there. Most of the things I mentioned I have improved in this repo, so it is worth checking out: