sandboxnu / cooper

A tool for Northeastern students to both submit reviews of their co-ops and filter through reviews of co-ops left by other students.

Cooper

Cooper is a tool for Northeastern students to both submit reviews of their co-ops and filter through reviews of co-ops left by other students.

Features

• Next.js - Web development framework
• Tailwind CSS - CSS framework
• shadcn/ui - Pre-built components
• NextAuth.js - Authentication
• Prisma - ORM
• PostgreSQL - Relational database
• Docker - Containerization
• tRPC - End-to-end typesafe API
• Zod - Validation

This is a T3 Stack project bootstrapped with create-t3-app.

Running Locally For Development

Before you start you will need the following:

• Node.js
• Docker
• Recommended: pnpm

1. Clone the repo

git clone [email protected]:sandboxnu/cooper.git
cd cooper

2. Install the necessary dependencies. The postinstall script also runs prisma generate.

pnpm install

3. Configure the .env file by following the template in .env.example. See Setting up the environment.

4. Run the docker container

docker compose up -d

Note: The docker-compose.yml file sets the POSTGRES_USER as "admin", POSTGRES_PASSWORD as "admin", and POSTGRES_DB as "cooper" by default.

5. Sync the prisma schema with the database schema. Do not run this in a production environment.

pnpm prisma db push

6. Run the application

pnpm dev

Open http://localhost:3000 with your browser to see the results.

Setting up the environment

1. Create a new file called .env or copy the .env.example and rename it to .env.

cp .env.example .env

2. Complete the file to add your environment variables. These are the defaults for local development. Make sure that the docker container is running.

DATABASE_URL="postgresql://admin:admin@localhost:5432/cooper?schema=public"

NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

To generate GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET, see Setting up OAuth 2.0. To generate a new NEXTAUTH_SECRET, run the following command in your terminal and add it to the .env file.

openssl rand -base64 32

cooper's Issues

As a Cooper user, I want the review form to have an aesthetically pleasing design, so that it enhances user experience and encourages engagement.

Check out the hi-fi design on Figma and update the color theme and layout to match the design.

EPIC: Create a design system for Cooper!

EPIC: Create a database to store user and co-op review information

As a Northeastern student, I want to easily recognize the Cooper logo because it improves my perception of the platform

EPIC: #7

While we wait for feedback on the color scheme for Cooper, let's do something fun - work on a logo! I'm thinking along the lines of:

• A primary logo: Cooper with a tie + some sort of text of the "co-op evaluation resource" name
• A secondary logo: Cooper with a tie + some sort of text of the "co-op evaluation resource" name
• Submark: Solely visual logo
• Favicon: The little icon that goes on the tab
• Variations: The different jobs Cooper has

As a side note: maybe we can get merch with this stuff later 👀

Fix nested components in `review-form.tsx`

See the ProgressBar component defined within the ReviewForm. This can lead to unnecessary remounting since ProgressBar is a local function that is recreated on every render.

Define 3 options for color palette and typography

Epic: #7

I'd recommend by finishing a moodboard for what we want the overall look and feel of the project for be. This color palette / typography will not be final - once you have 3 suggestions on Sunday, we'll go over it as a team!

Add basic error handling to the `companyRouter`

When the user tries to access / update / delete a company that does not exist, a TRPC error is not produced (instead a Prisma error is). Essentially, before doing these operations, add a check to validate that the company is present in the database by using a findUnique. If not, throw a TRPCError. See other files in the router folder for reference.

Should be a very small ticket -- I somehow missed this during code review for the company router PR :P

As a Northeastern student, I want to see a landing page that explains what Cooper is when I visit the website so I trust the platform and understand what it does

EPIC: #8

Let's design a landing page that also has the log-in area. Take a look at other platforms (Glassdoor, Indeed, possibly Search / Graduate) look like when you visit them without being logged in.

Specifically, I think a successful page would have

• blurbs about what the platform is and the problem its solving
• a fun graphic (cooper at a computer?)
• a call to action - for us, it's logging in, this should be the main part that users are drawn to interact with

As a co-op reviewer, I want a simple flow of actions so I actually finish my review

EPIC: #8

While we wait for feedback on the review form, let's start thinking about the actual process people will take to get to the review form. A concern is that people who get confused or frustrated leaving a review will just drop it, so let's draw out the user flow for successfully leaving a review.

Some questions to consider:

• Where do people actually enter the review form (ex: a specific a company, from their user profile page, from the home screen when they open the platform)
• How do we divide up the form into different screens, if at all?

As a co-op reviewer, I want to navigate through my review with ease so I don't get confused and not review a co-op

EPIC: #3

See the Figma wireframe here: https://www.figma.com/file/YPT3Wi0EVi9rxYmObF6cC4/UI-Designs?type=design&node-id=1%3A5&mode=design&t=CFd3vSod9XDjEN94-1
(note that the fields are not finalized and there's no colors - the basic idea is here though. Use v4 dev ready at the bottom!)

We've broken our form into multiple parts to make it look simpler and easier to fill out for users. Now, we need a way for them to easily navigate the form - we don't want to make them click the "back" button or scroll up a bunch to move around.

The header should appear as a question block first, then become a header type thing as the user scrolls down.

EPIC: Develop a non-functional interface for users to look up co-op reviews

EPIC: Set up authorization for user accounts

Finish pulling together inspiration for what other review platforms look like

Epic: #7

Let's finish pulling this information together - mainly, we will be using this for future inspiration. I think we can get designing ASAP

Misc tickets for rishi lol

• vercel deployment
• github workflows (plz protect main)
• learn trpc
• plz help with my weird database issue if you have time lol (really not important)

Connect co-op review form to database

As the name suggests, let's start adding functionality to actually store submitted coops to our database.

EPIC: Develop a non-functional interface for users to submit co-op reviews

design tickets for serena and dewi lol

Dewi: Work on company page
Serena: Review search page, check out color schemes

Readjust coop submission page to multiple pages lol

lol im not even gonna put a description here...

Rishi & Cinye, work on the implementation, Michelle work on the design 🦖

Make ERD diagram for database

EPIC: #4

While the designers work on getting some front end designs to develop, let's figure out what our database needs to look like - feel free to use something like Lucid Charts to put this together.

As a co-op reviewer, I want to submit comments about my co-op because it allows me to give an in-depth review of my co-op

EPIC: #3

See the Figma file here: https://www.figma.com/file/YPT3Wi0EVi9rxYmObF6cC4/UI-Designs?type=design&node-id=1%3A5&mode=design&t=CFd3vSod9XDjEN94-1
(note that this is a wireframe so fields are not finalized, and there's no color. Be sure to use dev ready v4!)

Let's get started with the main text entry section in review. I wager first you'd have to create a React component for review sections, and then add in more components for the text entry fields.

Also, for now, let's not worry too much about getting it connected to the back end.

See backlog in Figma!

https://www.figma.com/file/hsKUeB4jSQmlOPnomIoCwH/Project-Planning?type=whiteboard&node-id=0-1&t=EMwENBJyyStgVjFR-0

Finish onboarding with T3 stack

EPIC: #3 and #4

Let's finish getting set up with our T3 stack so we can start developing :)

Set up backend APIs for database

Let's discuss further, but I think we need the following API methods:

• POST a review, company, role, and profile
• GET a review, company, role, and profile
• PUT a review, company, role, and profile
• DELETE a review, company, role, and profile

I'm thinking these are all for a single item - do we need an aggregate (example, get all reviews from a user)

EPIC: Design a log-in page, interface for searching / filtering for co-ops, and portal to submit reviews

Create the search and filtering pages (see description)

Linked to ticket #34

Take a peek-si-do at Dewi's lofi and start putting the pieces together to make that first page

Wireframe a screen for submitting co-op reviews

EPIC: #8

To give the devs an idea of what they're going to have to build, let's make a simple wireframe of the portal to submit co-op reviews. This will likely consist of:

• Dropdown of companies to select, or option to add new one
• Star rating
• Comments text area
• Salary info area
• Option to be anonymous vs show name?
• And other fields you feel would be relevant

Discuss co-op review form

EPIC: #3

Rishi and Michelle - let's take a look at the wireframe and the form together for submitting a review. We'll first give Rishi feedback on what to change according to Michelle's design, then give feedback to Michelle for what to add that Rishi will add later.

As a Cooper user, I want to view a skeleton of the role review cards while the data is being fetched so that the experience is seamless and uninterrupted.

As the number of roles in the database increases, the time taken to fetch all of the roles will also increase. This will affect the load time of /role. Therefore, it is necessary to utilize Loading UI and Streaming (loading.tsx) to render a skeleton while the data is being fetched.

As a Cooper user, I want to see information about my profile, so I can update my settings and see my past co-op reviews

EPIC: #8

Let's make a user profile page - Honestly, all that can come to mind is their name, their email address, and previous co-op reviews. Suggest some other things that are important!

As a co-op searcher (losers), I want to filter for and search for co-ops because it will let me find relevant information easier

EPIC: #8

Work together to make a hifi version of Dewi's searching and filtering page! Be sure to include the other designers feedback 👍

Learn CSS + Tailwind

Epic: #3

CSS you'll knock down easily - try this tutorial: https://easyhtmlcss.com/
I'm also learning Tailwind, and found this useful: https://www.codeinwp.com/blog/tailwind-css-tutorial/