Skip to content

A web application for visualizing student data from the 42 API, including evaluations and hall voice configuration.

Notifications You must be signed in to change notification settings

pquline/ft_portal

Repository files navigation

ft_portal

A web application for visualizing student data from the 42 API, including evaluations data.

✨ Features

  • 🔐 Authentication

    • Secure 42 OAuth 2.0 integration
    • Single sign-on with your 42 account
    • Automatic session management
    • Discord webhook notifications for authentication failures
  • 👤 Student Statistics

    • Real-time student search by login
    • Comprehensive evaluation statistics
    • Data visualization with Chart.js and Recharts
  • 📝 Evaluation Analytics

    • Evaluation quality metrics
    • Feedback length distribution
    • Detailed evaluation statistics
  • 🎙️ Hall Voice

    • Listen to student's Hall Voice sounds
    • Audio player integration for sound playback
  • 🔍 SEO Optimized

    • Comprehensive meta tags and Open Graph data
    • Structured data (JSON-LD) for better search visibility
    • Dynamic sitemap generation
    • Robots.txt configuration
    • Custom 404 page
    • Performance optimizations

🚀 Getting Started

📋 Prerequisites

  • Node.js (v18 or higher)
  • npm or yarn
  • A 42 account
  • Discord webhook URL (optional, for error notifications)

⚙️ Installation

  1. Clone the repository:
git clone https://github.com/pquline/ft_portal.git
cd ft_portal
  1. Install dependencies:
npm install
# or
yarn install
  1. Start the development server:
npm run dev
# or
yarn dev
  1. Open http://localhost:3000 in your browser.

Configuration

  1. Visit 42 API Applications
  2. Create a new application
  3. Set the redirect URI to http://localhost:3000/api/auth/callback for development
  4. Copy your client_id and client_secret
  5. Create a .env file in the root directory with:
FORTYTWO_CLIENT_ID=your_client_id
FORTYTWO_CLIENT_SECRET=your_client_secret
NEXT_PUBLIC_URL=http://localhost:3000
JWT_SECRET=your_random_secret_key
DISCORD_WEBHOOK_URL_ERROR=your_discord_webhook_url

Optional: Discord Webhook Setup

  • Create a Discord webhook in your server
  • Add the webhook URL to DISCORD_WEBHOOK_URL_ERROR
  • The app will send notifications when authentication fails

🛠️ Tech Stack

  • Framework: Next.js 15.3.2 with Turbopack
  • Language: TypeScript
  • UI Components:
    • Radix UI primitives
    • Custom shadcn/ui components
    • Tailwind CSS for styling
  • Data Visualization:
    • Chart.js
    • Recharts
  • State Management: React Hooks
  • Form Handling: React Hook Form
  • Notifications: Sonner
  • Authentication: 42 OAuth API
  • Error Monitoring: Discord Webhooks

💡 Usage

  1. Click "Sign in" to authenticate with your 42 account
  2. Enter a student's login in the search field
  3. View detailed statistics including:
    • Evaluation performance
    • Project completion rates
    • Listen to Hall Voice sounds

Development

Available Scripts

  • npm run dev - Start development server with Turbopack
  • npm run build - Build for production
  • npm run start - Start production server
  • npm run lint - Run ESLint

🤝 Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

About

A web application for visualizing student data from the 42 API, including evaluations and hall voice configuration.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages