SUST-CSE Frontend

Modern, Responsive Next.js Application for the Department of Computer Science and Engineering, SUST.

A high-performance single-page application built with Next.js 16, Redux Toolkit, and Tailwind CSS, providing an intuitive interface for students, faculty, alumni, and administrators.

Tech Stack

Category	Technologies
Framework	Next.js 16.1 (App Router)
Language	TypeScript 5
UI Library	React 19.2
Styling	Tailwind CSS 4, Material UI 7.3
State Management	Redux Toolkit 2.11, RTK Query
Forms	React Hook Form 7.71, Zod 4.3
Animations	GSAP 3.14
HTTP Client	Axios 1.13
Rich Text	React Quill (New)
Icons	Lucide React
Utilities	date-fns, clsx, tailwind-merge
Authentication	JWT (jwt-decode, js-cookie)
Notifications	React Hot Toast

Features

User Interfaces

🏠 Public Homepage
- Dynamic banner carousel
- About the department
- Research areas showcase
- Recent achievements
- Department services
- Responsive design with smooth animations
Student Dashboard
- Personal profile overview
- Finance management (conditional access)
- Application submissions (conditional access)
- Work assignments
- Blog authoring
Teacher Dashboard
- Faculty profile management
- Course management
- Student oversight
Admin Dashboard
- User approval system
- Content management (CMS)
- Homepage customization
- Notices & events management
- Society management
- Finance oversight
- Blog moderation

Core Features

Authentication & Authorization
- JWT-based authentication
- Email verification
- Password reset functionality
- Role-based access control (RBAC)
- Protected routes
Content Management
- Blog creation with rich text editor
- Event management with categories
- Notice board
- Homepage content customization
- Image uploads with preview
Financial Transparency
- Public income/expense ledger
- Proof document uploads (images/PDFs)
- Category-based filtering
- Real-time updates
Academic Resources
- Faculty directory
- Alumni network
- Student profiles
- Batch and session filtering
Application System
- Application submission
- Status tracking
- Admin review workflow
Society Management
- Hierarchical member structure
- Work assignment system
- Task tracking
- Progress monitoring

Getting Started

Prerequisites

Node.js (v18 or higher)
npm or yarn
Backend API (running locally or deployed)

Installation

Navigate to Frontend directory
```
cd Frontend
```
Install dependencies
```
npm install
```

Set up environment variables

cp .env.example .env

Edit .env with your backend API URL:

NEXT_PUBLIC_API_URL=http://localhost:5000/api
# OR for production:
# NEXT_PUBLIC_API_URL=https://your-backend.vercel.app/api

Start development server
```
npm run dev
```
Open in browser
```
http://localhost:3000
```

Environment Variables

Create a .env file in the Frontend directory:

# Required: Backend API Base URL
NEXT_PUBLIC_API_URL=http://localhost:5000/api

# Production Example:
# NEXT_PUBLIC_API_URL=https://backend-production-url.vercel.app/api

Note: All environment variables prefixed with NEXT_PUBLIC_ are exposed to the browser.

Project Structure

Frontend/
├── public/                      # Static assets
│   ├── images/
│   ├── icons/
│   └── ...
│
├── src/
│   ├── app/                     # Next.js App Router pages
│   │   ├── layout.tsx           # Root layout with providers
│   │   ├── page.tsx             # Homepage
│   │   │
│   │   ├── about/               # About page
│   │   ├── academic/            # Academic resources
│   │   ├── achievements/        # Department achievements
│   │   ├── alumni/              # Alumni directory
│   │   ├── applications/        # Application system
│   │   │   └── submit/          # Submit application
│   │   ├── blogs/               # Blog listing & details
│   │   ├── events/              # Events listing
│   │   ├── faculty/             # Faculty directory
│   │   ├── finance/             # Financial transparency
│   │   ├── notices/             # Notice board
│   │   ├── profile/[id]/        # User profiles
│   │   ├── projects/            # Research projects
│   │   ├── research/            # Research areas
│   │   ├── services/            # Department services
│   │   ├── societies/           # Society pages
│   │   ├── students/            # Student directory
│   │   │
│   │   ├── login/               # Login page
│   │   ├── register/            # Registration page
│   │   ├── verify/              # Email verification
│   │   ├── forgot-password/     # Password reset request
│   │   ├── reset-password/      # Password reset form
│   │   │
│   │   ├── dashboard/           # User dashboards
│   │   │   ├── student/         # Student dashboard
│   │   │   └── teacher/         # Teacher dashboard
│   │   │
│   │   └── admin/               # Admin panel
│   │       └── dashboard/       # Admin dashboard
│   │           ├── users/       # User management
│   │           ├── blogs/       # Blog management
│   │           ├── events/      # Event management
│   │           ├── notices/     # Notice management
│   │           ├── homepage/    # Homepage CMS
│   │           ├── societies/   # Society management
│   │           └── ...
│   │
│   ├── components/              # Reusable UI components
│   │   ├── common/              # Shared components
│   │   │   ├── Navbar.tsx
│   │   │   ├── Footer.tsx
│   │   │   ├── LoadingSpinner.tsx
│   │   │   └── ProtectedRoute.tsx
│   │   ├── dashboard/           # Dashboard-specific components
│   │   ├── home/                # Homepage sections
│   │   └── admin/               # Admin panel components
│   │
│   ├── features/                # Redux slices & API endpoints
│   │   ├── auth/                # Authentication
│   │   │   ├── authSlice.ts     # Auth state management
│   │   │   └── authApi.ts       # Auth API endpoints
│   │   ├── user/
│   │   ├── blog/
│   │   ├── event/
│   │   ├── finance/
│   │   ├── content/
│   │   ├── alumni/
│   │   ├── application/
│   │   ├── society/
│   │   ├── payment/
│   │   ├── product/
│   │   └── work-assignment/
│   │
│   ├── store/                   # Redux store configuration
│   │   ├── index.ts             # Store setup
│   │   └── apiSlice.ts          # RTK Query base API
│   │
│   ├── hooks/                   # Custom React hooks
│   │   └── useAuth.ts           # Authentication hook
│   │
│   ├── utils/                   # Utility functions
│   │   ├── api.ts               # Axios instance
│   │   └── helpers.ts           # Helper functions
│   │
│   └── styles/                  # Global styles
│       └── globals.css          # Tailwind imports & custom CSS
│
├── .env                         # Environment variables (not in git)
├── .env.example                 # Environment template
├── .gitignore
├── next.config.ts               # Next.js configuration
├── tailwind.config.ts           # Tailwind CSS configuration
├── postcss.config.mjs           # PostCSS configuration
├── tsconfig.json                # TypeScript configuration
├── package.json
└── README.md

Key Features

1. Authentication System

The app implements a complete authentication flow:

// Login
POST /api/auth/login
→ Stores JWT in cookies
→ Updates Redux auth state
→ Redirects to dashboard

// Auto-login on page load
useEffect(() => {
  const token = Cookies.get('token');
  if (token) {
    dispatch(setCredentials({ token, user }));
  }
}, []);

Protected Routes:

// components/common/ProtectedRoute.tsx
export function ProtectedRoute({ children, allowedRoles }) {
  const { user, isAuthenticated } = useAuth();
  
  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  
  if (allowedRoles && !allowedRoles.includes(user.role)) {
    return <Navigate to="/unauthorized" />;
  }
  
  return children;
}

2. Dashboard System

Role-Based Dashboards:

Role	Dashboard Route	Features
Student	`/dashboard/student`	Profile, Finance, Applications, Work Assignments
Teacher	`/dashboard/teacher`	Profile, Course Management, Student Oversight
Admin	`/admin/dashboard`	Full System Control, CMS, User Management

*Conditional access based on permissions

3. Content Management

Admin CMS Features:

Homepage banner management (image upload, reordering)
About section editor
Research areas CRUD
Services management
Achievements showcase
Notice board
Event calendar

4. Finance Module

Public Financial Transparency:

// Public ledger accessible to all users
GET /api/finance
→ Returns: Income/Expense records with proof documents
→ Filters: type, category, dateRange

Features:

Category-based organization
Image/PDF proof uploads
Real-time balance calculation
Admin/permitted user entry creation

5. Rich Text Editor

Blog & Content Creation:

React Quill integration
Markdown support
Image embedding
Code syntax highlighting
Draft saving

Routing & Navigation

Public Routes

Route	Description
`/`	Homepage
`/about`	About the department
`/faculty`	Faculty directory
`/students`	Student directory
`/alumni`	Alumni network
`/blogs`	Blog listing
`/blogs/[id]`	Blog details
`/events`	Events calendar
`/notices`	Notice board
`/finance`	Financial transparency
`/societies`	Society pages
`/research`	Research areas
`/achievements`	Department achievements
`/services`	Department services
`/projects`	Research projects

Authentication Routes

Route	Description
`/login`	User login
`/register`	New user registration
`/verify`	Email verification
`/forgot-password`	Password reset request
`/reset-password`	Password reset form

Protected Routes (Authenticated)

Route	Roles	Description
`/dashboard/student`	Student	Student dashboard
`/dashboard/teacher`	Teacher	Teacher dashboard
`/profile/[id]`	All	User profile
`/applications/submit`	Student	Submit application

Admin Routes

Route	Description
`/admin/dashboard`	Admin overview
`/admin/dashboard/users`	User management
`/admin/dashboard/blogs`	Blog moderation
`/admin/dashboard/events`	Event management
`/admin/dashboard/notices`	Notice management
`/admin/dashboard/homepage`	Homepage CMS
`/admin/dashboard/societies`	Society management

State Management

Redux Store Structure

{
  auth: {
    user: User | null,
    token: string | null,
    isAuthenticated: boolean
  },
  api: {
    // RTK Query cache
    queries: { ... },
    mutations: { ... }
  }
}

RTK Query API Slices

Each feature module has its own API slice:

// features/blog/blogApi.ts
export const blogApi = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    getBlogs: builder.query({ ... }),
    getBlogById: builder.query({ ... }),
    createBlog: builder.mutation({ ... }),
    updateBlog: builder.mutation({ ... }),
    deleteBlog: builder.mutation({ ... })
  })
});

Usage in Components:

import { useGetBlogsQuery, useCreateBlogMutation } from '@/features/blog/blogApi';

function BlogList() {
  const { data: blogs, isLoading, error } = useGetBlogsQuery();
  const [createBlog, { isLoading: isCreating }] = useCreateBlogMutation();
  
  // Component logic...
}

API Integration

Base API Configuration

// store/apiSlice.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import Cookies from 'js-cookie';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({
    baseUrl: process.env.NEXT_PUBLIC_API_URL,
    prepareHeaders: (headers) => {
      const token = Cookies.get('token');
      if (token) {
        headers.set('Authorization', `Bearer ${token}`);
      }
      return headers;
    }
  }),
  tagTypes: ['User', 'Blog', 'Event', 'Finance', ...],
  endpoints: () => ({})
});

API Endpoints by Module

Module	Hook	Endpoint	Method
Auth	`useLoginMutation`	`/auth/login`	POST
Auth	`useRegisterMutation`	`/auth/register`	POST
Blog	`useGetBlogsQuery`	`/blogs`	GET
Blog	`useCreateBlogMutation`	`/blogs`	POST
Event	`useGetEventsQuery`	`/events`	GET
Finance	`useGetFinanceQuery`	`/finance`	GET
User	`useGetUsersQuery`	`/users`	GET
Alumni	`useGetAlumniQuery`	`/alumni`	GET

Authentication Flow

Registration → Verification → Approval → Access

graph LR
    A[User Registers] --> B[Email Sent]
    B --> C[Email Verification]
    C --> D[Admin Approval]
    D --> E[Access Granted]

User Registration (/register)
- Fill registration form
- Submit with role selection
- Account created with PENDING status
Email Verification (/verify)
- Check email for verification link
- Click link to verify email
- Status remains PENDING
Admin Approval (Admin Dashboard)
- Admin reviews pending users
- Approves or rejects
- Status changes to APPROVED
Login (/login)
- Only APPROVED users can log in
- JWT token stored in cookies
- Redirected to role-specific dashboard

Token Management

// Auto-refresh token before expiry
useEffect(() => {
  const token = Cookies.get('token');
  if (token) {
    const decoded = jwtDecode(token);
    const timeUntilExpiry = decoded.exp * 1000 - Date.now();
    
    // Refresh 5 minutes before expiry
    const refreshTime = timeUntilExpiry - (5 * 60 * 1000);
    
    const refreshTimer = setTimeout(() => {
      refreshToken();
    }, refreshTime);
    
    return () => clearTimeout(refreshTimer);
  }
}, []);

UI Components

Component Library

The app uses a combination of:

Custom Components (Tailwind CSS)
Material UI (Forms, Dialogs, Data Grids)

Key Custom Components

components/
├── common/
│   ├── Navbar.tsx           # Site navigation with role-based menu
│   ├── Footer.tsx           # Footer with links
│   ├── LoadingSpinner.tsx   # Loading indicator
│   ├── ProtectedRoute.tsx   # Route guard
│   └── ErrorBoundary.tsx    # Error handling
│
├── home/
│   ├── HeroSection.tsx      # Homepage banner
│   ├── AboutSection.tsx     # About the department
│   ├── ResearchAreas.tsx    # Research showcase
│   ├── Achievements.tsx     # Recent achievements
│   ├── Services.tsx         # Department services
│   └── Stats.tsx            # Statistics counter
│
└── dashboard/
    ├── DashboardLayout.tsx  # Dashboard container
    ├── Sidebar.tsx          # Dashboard sidebar
    ├── ProfileCard.tsx      # User profile card
    ├── StatsCard.tsx        # Statistics card
    └── ...

Styling Approach

Tailwind CSS for utility-first styling:

<button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
  Click Me
</button>

Reusable Class Utilities:

// utils/cn.ts
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Deployment

Deployment to Vercel (Recommended)

Install Vercel CLI
```
npm i -g vercel
```
Build the application
```
npm run build
```
Deploy
```
vercel --prod
```
Set Environment Variables
- Go to Vercel Dashboard → Project Settings → Environment Variables
- Add NEXT_PUBLIC_API_URL

Alternative: Manual Deployment

# Build for production
npm run build

# Start production server
npm start

Environment-Specific Configuration

Development:

NEXT_PUBLIC_API_URL=http://localhost:5000/api

Staging:

NEXT_PUBLIC_API_URL=https://backend-staging.vercel.app/api

Production:

NEXT_PUBLIC_API_URL=https://backend-production.vercel.app/api

Best Practices

Code Organization

Feature-Based Structure
- Group related files by feature, not by type
- Each feature has its own API slice and components
Component Composition
- Keep components small and focused
- Use composition over complex component logic
TypeScript Everywhere
- Define interfaces for all props
- Use type inference where possible
- Avoid any type

Performance Optimization

Code Splitting

const AdminDashboard = dynamic(() => import('@/app/admin/dashboard/page'), {
  loading: () => <LoadingSpinner />
});

Image Optimization

import Image from 'next/image';

<Image 
  src="/banner.jpg" 
  alt="Banner" 
  width={1920} 
  height={1080}
  priority
/>

Memoization

const MemoizedComponent = React.memo(({ data }) => {
  return <div>{/* Heavy computation */}</div>;
});

Security

Input Validation
- Use Zod schemas with React Hook Form
- Sanitize user input
XSS Prevention
- Never use dangerouslySetInnerHTML without sanitization
- Use React Quill for rich text (built-in sanitization)
Token Storage
- Store JWT in HTTP-only cookies (server-side)
- Use secure and sameSite flags

Troubleshooting

Common Issues

1. API Connection Failed

Error: Network Error

Verify NEXT_PUBLIC_API_URL is correct
Check if backend is running
Ensure CORS is configured on backend

2. Authentication Not Persisting

User logged out on page refresh

Check if token is being stored in cookies
Verify token expiry time
Check browser console for errors

3. Images Not Loading

403 Forbidden on Cloudinary images

Verify Cloudinary URLs are public
Check image upload permissions
Ensure correct image paths

4. Build Errors

Error: Module not found

Run npm install to ensure all dependencies are installed
Check import paths (use absolute paths with @/)
Clear .next folder and rebuild

Scripts

Command	Description
`npm run dev`	Start development server at `localhost:3000`
`npm run build`	Build for production
`npm start`	Run production build
`npm run lint`	Run ESLint (Next.js built-in)

License

This project is licensed under the ISC License.

Developer

Lead Developer: Zubayer Hossain Uday
Email: zubayerhossain1009@gmail.com

Contributing

Contributions are welcome! Please:

Fork the repository
Create a feature branch
Follow existing code style
Write meaningful commit messages
Submit a pull request

Resources

Built with ❤️ for SUST CSE Department

Name		Name	Last commit message	Last commit date
Latest commit History 47 Commits
public		public
src		src
.env.example		.env.example
.gitignore		.gitignore
README.md		README.md
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

SUST-CSE Frontend

Table of Contents

Tech Stack

Features

User Interfaces

Core Features

Getting Started

Prerequisites

Installation

Environment Variables

Project Structure

Key Features

1. Authentication System

2. Dashboard System

3. Content Management

4. Finance Module

5. Rich Text Editor

Routing & Navigation

Public Routes

Authentication Routes

Protected Routes (Authenticated)

Admin Routes

State Management

Redux Store Structure

RTK Query API Slices

API Integration

Base API Configuration

API Endpoints by Module

Authentication Flow

Registration → Verification → Approval → Access

Token Management

UI Components

Component Library

Key Custom Components

Styling Approach

Deployment

Deployment to Vercel (Recommended)

Alternative: Manual Deployment

Environment-Specific Configuration

Best Practices

Code Organization

Performance Optimization

Security

Troubleshooting

Common Issues

Scripts

License

Developer

Contributing

Resources

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages