Inroduction

An Open Source alternative of Bizotic -- a web app to manage all workflows of our college's department. This is a self learning project to hone my software development skills.

Walkthrough

View the entire walkthrough both as a admin and student page wise by opening the toggle button.

As an Admin

Dashboard

View Placement results of students branche wise.

Students

List of all students

Student Offers

List of all student offers

Validate Students

List of students requested for validation.

Without validation, a student cannot apply to any events.

clicking on the respective user USN will navigate to the student page, where the admin can view full profile and choose to accept or reject the validation.

Events

List of all Events

Create New Event

Event

Toggle event state, If it is closed, no student can apply to it.

Delete the particular event.

Companies

List of all the companies

Download in Excel format

Create New Company

Create a new company

One company can have N number of events

As a student

Onboarding

Dashboard

• View all your details(perosnal, records, documents)
• Request for validation if is not validated

Edit Profile

Update Primary Details

Update Secondary Details

Update documents

Update Documents Dialog

Events

/events

List of all events

/events/applied

List of all Events the particular student has applied to.

/events/offers

List of all Events the particular student has received offer.

Event

Profile not validated

Student eligible

Student applied

Built with

• Next.js
• TypeScript
• tRPC
• React Query
• Tailwind
• Storybook
• Prisma
• MySQL
• Cloudinary
• Nodemailer
• visx

Why I built the project this way

This sections describes some key aspects on technical details, why I choose certain approach and the challenges faced.

• The entire app is client side rendered. Server-side rendering is useless as there are no public pages.(login required).
• Using Components libraries like matarial UI, Chakra UI would had saved a lot of time and effort than to create my own components. As I was already using Tailwind, I was reluctant to add a component library on top of that. I ended up building up own component, documenting them using storybook. I used Headless UI and Radix UI for accessibility.
• I did not use any state management library, state management for data that comes from a server was done using react-query. For everything else react hooks were enough for me.
• Code-Splitting to reduce bundle size. sample code
• I was initially using Next.js API Routes, after realizing that I duplicating the same logic in every route, I switched to next-connect where I could add middlewares to do the repetitive work. sample code. I later switched to trpc for typesafe APIs.
• I used Prisma as ORM, the thing didn't like about Prisma is that it doesn't let you to return data in the format you would want. For queries with nested relations, It returns an nested Object, but that might not be how I wanted to consume it in the frontend. For example, consider a Table component that expects data to be an array of Objects where I would have to write logic on the client side to do the transformation that I expect to be done by the server itself. To overcome this issue I have performed SQL raw queries on some parts of the application such as the dashboard where the data format expected by the visualisation libraries is carried out on the server itself.. sample code, see: "branch.offers"

Running Locally

Prerequisites

• Node.js
• MySQL
• Yarn (recommended)

Developement

Clone the repo

git clone https://github.com/hussamkhatib/Job-Fynd.git

Go to the project directory

cd Job-Fynd

Install packages with yarn

yarn

Create a .env file:

cp .env.example .env

Then, update the DATABASE_URL property with the following format.

mysql://<USERNAME>:<PLAIN_TEXT_PASSWORD>@<ACCESS_HOST_URL>/<DATABASE_NAME>?sslaccept=strict

Setup initial data

populating your database with some data.

npx prisma db seed

open Prisma Studio to look at the populated data

npx prisma studio

Run frontend

yarn dev

Run Storybook

yarn storybook

Working with PlanetScale

• install PlanetScale CLI
• Sign up and create a database from PlanetScale Dashboard.
• modify your DATABASE_URL in your .env to 'mysql://[email protected]:3309/<DATABASE_NAME>'
• login

pscale auth login

• create a branch

pscale branch create <database_name> <branch_name>

• connect to PlanetScale

pscale connect <database_name> <branch_name> --port 3309

• open a new terminal when you want to push your prisma schema changes.

npx prisma db push

if your are stuck anywhere, checkout the docs.