Student Portal - Full Stack Application

A comprehensive student portal application built with Next.js, Express, TypeScript, and PostgreSQL. This platform provides centralized access to courses, clubs, events, achievements, announcements, and assignment submissions.

Features

Authentication & Authorization

• JWT-based authentication
• OAuth2 Google login integration
• Role-based access control (Student, Instructor, Admin)
• Secure password hashing with bcrypt

Core Modules

1. Courses Management

• Browse and enroll in courses
• View course details and schedules
• Track enrolled courses
• Instructor course creation and management
• Student enrollment tracking with capacity limits

2. Clubs & Organizations

• Discover and join clubs
• View club details and membership
• Track club activities
• Role-based club memberships (Member, Officer, President)

3. Events System

• Campus-wide event calendar
• Course and club-specific events
• Event registration and attendance tracking
• Virtual and in-person event support
• Mandatory event flagging

4. Announcements

• Multi-level announcements (Campus, Course, Club, Emergency)
• Priority-based announcement system
• Pinned announcements
• Expiration dates for time-sensitive announcements

5. Assignments & Submissions

• Assignment creation and distribution
• File attachment support
• Submission tracking
• Grading system with feedback
• Late submission handling with penalties
• Support for multiple assignment types (Homework, Project, Quiz, Exam, Lab)

6. Achievements & Gamification

• Achievement system with categories
• Points-based reward system
• Student leaderboard
• Automatic achievement tracking
• Achievement categories: Academic, Participation, Leadership, Special

Technical Stack

Backend

• Runtime: Node.js with TypeScript
• Framework: Express.js
• Database: PostgreSQL with pg driver
• Authentication: JWT + Google OAuth2
• Security: Helmet, CORS, Rate Limiting
• Validation: express-validator

Frontend

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• State Management: Zustand
• HTTP Client: Axios
• Forms: React Hook Form
• Notifications: React Toastify
• Icons: Lucide React

Project Structure

Student-Portal-Fullstack/
├── backend/
│   ├── src/
│   │   ├── controllers/      # Route controllers
│   │   ├── database/         # Database connection and migrations
│   │   ├── middleware/       # Auth, validation, error handling
│   │   ├── routes/           # API routes
│   │   ├── utils/            # Utility functions
│   │   ├── app.ts           # Express app configuration
│   │   └── server.ts        # Server entry point
│   ├── package.json
│   └── tsconfig.json
├── frontend/
│   ├── src/
│   │   ├── app/             # Next.js app router pages
│   │   ├── components/      # React components
│   │   ├── lib/             # API client and utilities
│   │   ├── stores/          # Zustand stores
│   │   └── types/           # TypeScript types
│   ├── package.json
│   └── tsconfig.json
└── docker-compose.yml

Installation & Setup

Prerequisites

• Node.js 18+ and npm/yarn
• PostgreSQL 14+
• Git

1. Clone the Repository

git clone <repository-url>
cd Student-Portal-Fullstack

2. Backend Setup

cd backend
npm install

# Copy environment file
cp .env.example .env

# Edit .env with your configuration
# Update database credentials, JWT secret, Google OAuth credentials

Environment Variables (backend/.env):

NODE_ENV=development
PORT=5000

DB_HOST=localhost
DB_PORT=5432
DB_NAME=student_portal
DB_USER=postgres
DB_PASSWORD=your_password

JWT_SECRET=your-super-secret-jwt-key-change-this
JWT_EXPIRES_IN=7d

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
GOOGLE_REDIRECT_URI=http://localhost:3000/auth/google/callback

FRONTEND_URL=http://localhost:3000

3. Database Setup

# Create PostgreSQL database
createdb student_portal

# Run migrations
npm run migrate

# (Optional) Seed with sample data
npm run seed

4. Frontend Setup

cd ../frontend
npm install

# Copy environment file
cp .env.example .env.local

# Edit .env.local

Environment Variables (frontend/.env.local):

NEXT_PUBLIC_API_URL=http://localhost:5000/api
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id

5. Running the Application

Development Mode

Terminal 1 - Backend:

cd backend
npm run dev

Terminal 2 - Frontend:

cd frontend
npm run dev

Access the application at: http://localhost:3000

Production Build

Backend:

cd backend
npm run build
npm start

Frontend:

cd frontend
npm run build
npm start

Docker Deployment

Using Docker Compose

# Build and start all services
docker-compose up -d

# View logs
docker-compose logs -f

# Stop services
docker-compose down

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000

API Documentation

Authentication Endpoints

POST /api/auth/register     - Register new user
POST /api/auth/login        - Login with email/password
POST /api/auth/google       - Login with Google OAuth2
GET  /api/auth/profile      - Get current user profile

Course Endpoints

GET  /api/courses                - Get all courses
GET  /api/courses/:id            - Get course by ID
POST /api/courses                - Create course (Instructor/Admin)
POST /api/courses/enroll         - Enroll in course
GET  /api/courses/my-enrollments - Get user's enrollments

Club Endpoints

GET  /api/clubs                 - Get all clubs
GET  /api/clubs/:id             - Get club by ID
POST /api/clubs                 - Create club
POST /api/clubs/join            - Join club
GET  /api/clubs/my-memberships  - Get user's memberships

Event Endpoints

GET  /api/events              - Get all events
GET  /api/events/:id          - Get event by ID
POST /api/events              - Create event (Instructor/Admin)
POST /api/events/register     - Register for event
GET  /api/events/my-events    - Get user's events

Announcement Endpoints

GET    /api/announcements     - Get all announcements
GET    /api/announcements/:id - Get announcement by ID
POST   /api/announcements     - Create announcement (Instructor/Admin)
PUT    /api/announcements/:id - Update announcement (Instructor/Admin)
DELETE /api/announcements/:id - Delete announcement (Instructor/Admin)

Submission Endpoints

GET  /api/submissions/my-submissions       - Get user's submissions
GET  /api/submissions/assignments/:courseId - Get course assignments
POST /api/submissions/assignments          - Create assignment (Instructor/Admin)
POST /api/submissions/submit/:assignmentId - Submit assignment
PUT  /api/submissions/grade/:submissionId  - Grade submission (Instructor/Admin)

Achievement Endpoints

GET  /api/achievements                 - Get all achievements
GET  /api/achievements/my-achievements - Get user's achievements
GET  /api/achievements/leaderboard     - Get leaderboard
POST /api/achievements/award           - Award achievement (Admin)

Default Users (After Seeding)

Admin:
- Email: admin@university.edu
- Password: admin123

Instructor:
- Email: instructor@university.edu
- Password: instructor123

Students:
- Email: student1@university.edu
- Password: student123

Database Schema

Main Tables

• users - User accounts and profiles
• courses - Course information
• course_enrollments - Student course enrollments
• clubs - Club/organization information
• club_memberships - Club memberships
• events - Event information
• event_attendance - Event registrations and attendance
• announcements - Announcements
• assignments - Course assignments
• submissions - Student submissions
• achievements - Achievement definitions
• user_achievements - Earned achievements
• notifications - User notifications

Security Features

• JWT-based authentication with secure token storage
• Password hashing using bcrypt
• CORS protection
• Helmet security headers
• Rate limiting on API endpoints
• SQL injection protection via parameterized queries
• Input validation on all endpoints
• Role-based access control

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License

Support

For issues and questions, please open an issue on GitHub or contact the development team.

Roadmap

• Real-time notifications with WebSockets
• Mobile app (React Native)
• Advanced analytics dashboard
• Integration with Learning Management Systems
• Calendar sync (Google Calendar, Outlook)
• Document collaboration
• Video conferencing integration
• Advanced search and filtering
• Export features (PDF reports, transcripts)
• Multi-language support