📖 Introduction

Campus Hub is a showcase application featuring three Next.js microservices, fully deployed to the cloud for live use. This project includes a Student Portal, a Library Portal, and a Finance Portal, all integrated within a monorepo using Turborepo and communicating via RESTful APIs.

Built to demonstrate my expertise in modern software development, Campus Hub employs a microservices architecture with independent functionality and separate databases, while leveraging a monorepo for shared code and improved DX. It also implements industry best practices, including CI/CD pipelines, design patterns, and robust architecture.

📦 Directory Structure

Campus Hub is a monorepo managed by Turborepo. The monorepo contains an apps, packages, and tooling directory, each serving a specific purpose as shown below:

.
├── .github                   # GitHub Actions CI/CD workflows
│    └── workflows            # CI with pnpm cache + shared GH Actions composite workflow step for all jobs
│        ├── build            # Build monorepo w/ Turborepo's Remote Cache for fast builds
│        ├── e2e-test         # Run E2E tests w/ Playwright & Docker Compose for local DBs
│        ├── vercel (deploy)  # Automatically deploy Next.js apps to Vercel on push
│        ├── commitlint       # Lint commit messages to Gitmoji standard using commitlint
│        ├── lint             # Lints entire monorepo using shared ESLint config
│        ├── format           # Formats entire monorepo using Prettier
│        └── typecheck        # Typechecks entire monorepo using shared TS config
│
├── .husky                    # Git pre-commit hooks for commit messages and linting
├── .vscode                   # Recommended extensions and settings for VSCode
├── postman                   # Postman collection for API testing and documentation
│
├── apps                      # Main applications under the monorepo
│    ├── student              # Next.js app for the Student Portal
│    ├── library              # Next.js app for the Library Portal
│    └── finance              # Next.js app for the Finance Portal
│
├── packages                  # Shared packages used by the apps
│    └── ui                   # Shared UI components (using shadcn/ui)
│
├── tooling                   # Shared configuration setup for the apps and packages
│    ├── config-eslint        # Shared, fine-grained, ESLint preset
│    ├── config-playwright    # Shared Playwright configuration for E2E tests
│    ├── config-prettier      # Shared Prettier configuration
│    ├── config-tailwind      # Shared Tailwind CSS configuration
│    ├── config-typescript    # Shared TS config all apps under the monorepo
│    └── github-actions       # Shared GitHub Actions composite workflow step for all CI jobs
│
├── docker-compose.yml        # Docker Compose file for local development databases
├── .npmrc                    # NPM configuration file for pnpm workspaces
├── .nvmrc                    # Node Version Manager (nvm/fnm) file for setting a specific Node version in the monorepo
├── commitlint.config.ts      # Commitlint configuration for Gitmoji commit messages
├── pnpm-workspace.yaml       # pnpm workspace config using catalogs for unified dependencies across monorepo
├── renovate.json             # Renovate configuration for automated dependency updates
└── turbo.json                # Turborepo configuration file (includes all tasks)

✨ Features

Student Portal (Live Demo)

• Student Registration and Authentication: Secure sign-up and log-in for students.
• Course Enrollment and Management:
  • Browse and enroll in available courses.
  • View enrolled courses and their respective fees.
• Graduation Status Tracking:
  • Monitor readiness for graduation.
  • Verify that all course fees are paid for eligibility.
• Profile Management: Edit and update personal details.

Library Portal (Live Demo)

• Student Verification: Only accessible to students enrolled in at least one course.
• Library Book Management:
  • View and search for available books with cover art.
  • Borrow books with a default return date of 14 days.
  • Create and manage a saved collection of books for future borrowing.
• Overdue Fee Calculation:
  • Automatic calculation of fees for overdue books.
  • Display and manage overdue payments.

Finance Portal (Live Demo)

• Invoice Management:
  • Input and verify invoice numbers for courses or overdue book payments.
  • Display detailed invoice information.
• Payment Processing: Facilitate payments to clear outstanding dues.

Best Practices Implemented

• CI/CD Pipelines: Automated testing and deployment processes using GitHub Actions and Vercel.
• Design Patterns: Applied relevant design patterns for maintainable and scalable code.
• Monorepo Structure: Turborepo allowed shared code and dependencies across the microservices.
• RESTful APIs: Seamless communication between microservices.

🛠️ Tech Stack

Frontend:

• Next.js (App Router): A React framework for building server-rendered applications.
• TypeScript: JavaScript with syntax for types. Used across the entire stack for type safety and improved DX.
• Tailwind CSS + shadcn/ui + Radix UI: Design system for styling the apps. Used for consistent UI components across the microservices.
• React Query: A data-fetching library for React that provides async data state management and caching.
• Lucide: Icon pack used for the app icons across the microservices.
• Geist: Nice fonts from Vercel. Used for all the microservices.

Backend:

• Next.js (API Routes): Used to build REST API endpoints directly in Next.js. Used to communicate between the microservices.
• TypeScript: JavaScript with syntax for types. Used across the entire stack for type safety and improved DX.
• PostgreSQL: Powerful database system. Used to store all the data for the 3 microservices.
• Drizzle ORM: Fast and type-safe database ORM for TypeScript & Node.js.
• Lucia: Authentication library for Next.js. Used to handle authentication for the microservices.

Tooling:

• Turborepo: A monorepo tool that's fast, caches builds (locally, remotely and even across CI), and has great DX.
• pnpm: Fast, disk space efficient package manager. Works well with Turborepo.
  • pnpm Workspaces: pnpm feature allowing you to manage multiple packages in a monorepo. Keeps a single lockfile for all packages.
• Docker: Used to containerize the apps and the databases for local development and deployment.
• Prettier: An opinionated code formatter. Ensures that all code conforms to a consistent style.
  • Prettier Tailwind: A Prettier plugin to format Tailwind CSS classes to a consistent order.
• ESLint: A tool to identify bad code practices and patterns across the codebase.

Deployment:

• Vercel: Used for the deployment of the Next.js apps, including all the REST API endpoints as serverless functions.
• Railway: Preferred database hosting platform for the production databases.
• GitHub Actions: Used to automate the CI/CD pipeline for the monorepo along with Vercel deployments.

🚀 Getting Started

Prerequisites

Ensure you have the following installed first:

• Node.js (LTS version recommended)

brew install node # macOS or Linux (using Homebrew)
winget install -e --id OpenJS.NodeJS # Windows

• pnpm

brew install pnpm # macOS or Linux (using Homebrew)
winget install -e --id pnpm.pnpm # Windows
# or using npm
npm install -g pnpm # Install pnpm globally

• Docker (only for local DBs during development)

brew install --cask docker # macOS or Linux (using Homebrew)
winget install -e --id Docker.DockerDesktop # Windows

• Turborepo (optional)

npm install -g turbo # Either install Turbo globally using npm
pnpm install -g turbo # or using pnpm (recommended)

Installation

1. Clone the repository:

git clone https://github.com/aryanprince/campus-hub.git

2. Install the dependencies:

pnpm install

3. Create the .env file for each app:

cp apps/student/.env.example apps/student/.env
cp apps/library/.env.example apps/library/.env
cp apps/finance/.env.example apps/finance/.env

4. Configure environment variables for each app. Stick to the defaults for the most part.

5. Start the local databases using Docker:

docker-compose up -d

6. Run script to setup the databases with existing migrations and seed data:

pnpm db:setup

7. Start the development server using Turborepo:

pnpm dev

and open http://localhost:3001 (Student), http://localhost:3002 (Library), and http://localhost:3003 (Finance) with your browser 🚀

8. (Optional) Run the following command to open Drizzle Studio to view the database content from the browser:

pnpm db:studio

and open https://local.drizzle.studio?port=3011 (Student DB), https://local.drizzle.studio?port=3012 (Library DB), and https://local.drizzle.studio?port=3013 (Finance DB) with your browser 🗃️

📜 Scripts

Database Scripts

Run the following scripts to manage the database schema and data:

db:studio # Opens Drizzle Studio to view stuff in the database. So cool!

db:push # Pushes database schema directly w/o migrations (prefer db:migrate)

db:migrate:generate # Generates the migration files based on the schema changes

db:migrate:run # Migrates the database using the generated migration files (from db:generate)

db:migrate:push # Generates and runs the migration files in one go (db:generate + db:migrate)

db:seed # Seeds the database with initial data

db:setup # Sets up the database by running db:migrate and db:seed

📝 Note

Developed as part of a university project, Campus Hub highlights my ability to create production-ready applications using the latest technologies and standards. The project is a testament to my skills in software development, showcasing my expertise in building scalable, maintainable, and secure applications. I hope you enjoy exploring Campus Hub and appreciate the effort that went into creating it.