Our Tech Stack

🎯 Why This Combo?

We picked these tools because they make development fast and less confusing. Everything just works together nicely!

📋 What We Use

Frontend Building

Next.js (Pages Router) - Makes React apps faster and easier to deploy
JavaScript - The programming language we use
Ant Design - Ready-made UI components (buttons, forms, tables, etc.)
Flaticon Uicons - Icon library loaded globally through CDN

Icon usage rule: Always load the needed Uicons CDN in _document.js and render icons with the shared <Uicons /> component from components/UI/Uicons.jsx.

Documentation

MDX - Write docs using simple Markdown + React components
Nextra - Documentation site generator (made by the creators of Next.js)

Development Tools

ESLint - Automatically finds mistakes in your code
Prettier - Makes your code look clean and consistent

🚀 Simple Breakdown

What is Next.js (Pages Router)?

It’s React but with superpowers:

✅ Pages load faster
✅ SEO works automatically
✅ Deploy to web easily
✅ File-based routing (pages in /pages folder = URLs)
✅ API routes in /pages/api folder

What is JavaScript?

It’s the programming language that powers web apps:

✅ Runs everywhere (browsers, servers, mobile apps)
✅ Lots of tutorials and help online
✅ Simple syntax, easy to learn
✅ Supported by all modern browsers

What is Ant Design?

It’s a UI library with ready-made components:

✅ Pre-built buttons, forms, tables, modals
✅ Consistent design and colors
✅ Mobile-responsive by default
✅ Professional looking components

Component Organization

We organize the codebase around a clear split between frontend and backend concerns:

src/backend/services – Server-only business logic and integrations reused by API handlers
src/frontend/hooks – Custom React hooks (useAuth, useApi)
src/frontend/contexts – Shared state providers such as AuthContext and UserContext
src/frontend/utils – Helper functions and constants used in client code
components/UI – Reusable UI primitives (Button, Input, Modal)
components/Views – Page-level compositions (Dashboard, UserProfile)
src/DB/connection.js – Centralized MongoDB connection utility reused by API routes and jobs
src/DB/models – Mongoose models (User, Role, etc.)

Iconography (Flaticon Uicons)

Flaticon Uicons give us a consistent icon language across all products. Each Uicons “family” (regular, rounded, solid, bold, etc.) ships with its own CDN stylesheet—include only the one the design system calls for.

1. Load the correct CDN in `_document.js`

pages/_document.js

<link
  rel="stylesheet"
  href="https://cdn-uicons.flaticon.com/3.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css"
/>;

Replace the URL when you need a different Uicons family, e.g. uicons-solid-rounded, uicons-regular-straight, etc.
Because the link lives in _document.js, every page gets access to the icons with zero extra imports.

2. Use the shared `<Uicons />` helper

components/UI/Uicons.jsx

export default function Uicons({ icon, className = "", onClick, style, size, color, ...props }) {
  const classes = ["fi", icon, className].filter(Boolean).join(" ");
 
  return (
    <i
      className={classes}
      onClick={onClick}
      style={{ fontSize: size, color, display: "inline-block", ...style }}
      {...props}
    />
  );
}

icon is the class name you copy from Flaticon (e.g. fi-rr-home).
size and color map to the final font-size and color styles, so components stay lightweight.
Pass className for utility classes and style for one-off overrides.
The helper wraps a plain <i> tag, but centralizes any future behavior tweaks (ARIA, analytics, etc.).
Example usage:

<Uicons icon="fi-rr-home" size={18} color="#667085" />

What is MDX?

It’s documentation but better:

✅ Write like normal text
✅ Add code examples easily
✅ Can include interactive examples
✅ Looks clean automatically

🛠️ Development Setup

Prerequisites (Stuff You Need)

Node.js (Latest version) - Download from nodejs.org
VS Code (Free code editor) - Download from code.visualstudio.com

Getting Started

Clone the repository
Run npm install
Run npm run dev
Open http://localhost:3000

That’s it! 🎉

📁 Project Structure

Click folders to expand and see the interactive file tree!

Key Points:

Every file in /pages becomes a website URL
/pages/index.js → / (homepage)
/pages/_app.js → App wrapper component
/pages/_document.js → HTML document structure
Shared UI lives in /components: Layout for shells, UI for primitives, Views for page-level blocks, utils for helpers
/src/frontend bundles hooks, contexts, utilities, and feature-specific components that run in the browser only
/src/backend houses server-only logic—API route helpers, services, background jobs, etc.
/src/DB holds database-specific code such as the shared connection helper and Mongoose models
/src/DB/connection.js centralizes database connectivity so every API handler reuses the same client
Clean separation keeps frontend imports from ever pulling server code into the bundle

🔧 Common Commands

npm run dev - Start development server
npm run build - Build for production
npm run lint - Check for code mistakes
npm install - Install new packages

💡 Why No Complexity?

Simple = Better

✅ Easy for new team members
✅ Fewer bugs
✅ Faster development
✅ Less maintenance

Modern = Reliable

✅ All tools are popular and stable
✅ Great community support
✅ Regular updates and fixes
✅ Lots of documentation online

📚 Learning Resources

Beginner Friendly

Next.js Tutorial - Official tutorial
JavaScript Basics - Mozilla docs
Ant Design Components - Complete component list

Quick References

React Documentation - Official React docs
Ant Design Getting Started - Ant Design setup
MDX Guide - Official MDX docs

🔗 Essential Links

Next.js (Pages Router)

📖 Pages Router Documentation - Official guide
📖 API Routes Documentation - Backend endpoints
📖 Pages Router Routing - File-based routing

Ant Design

🎨 Ant Design Official Documentation - Complete guide
🧱 Component List - All available components
🚀 Getting Started - Installation and setup

🤔 Need Help?

For Coding Questions:

Google the error message
Check our code examples in /pages/patterns/
Ask team members

For Tool Questions:

Check official documentation links above
Look at our package.json for versions
Most tools have “Getting Started” guides

Remember: The goal is to build things quickly, not become experts in every tool. Start simple, learn as you go! 🚀

Getting Started Patterns