A web application for visualizing student data from the 42 API, including evaluations data.
-
🔐 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
- Node.js (v18 or higher)
- npm or yarn
- A 42 account
- Discord webhook URL (optional, for error notifications)
- Clone the repository:
git clone https://github.com/pquline/ft_portal.git
cd ft_portal
- Install dependencies:
npm install
# or
yarn install
- Start the development server:
npm run dev
# or
yarn dev
- Open http://localhost:3000 in your browser.
- Visit 42 API Applications
- Create a new application
- Set the redirect URI to
http://localhost:3000/api/auth/callback
for development - Copy your
client_id
andclient_secret
- 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
- 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
- Click "Sign in" to authenticate with your 42 account
- Enter a student's login in the search field
- View detailed statistics including:
- Evaluation performance
- Project completion rates
- Listen to Hall Voice sounds
npm run dev
- Start development server with Turbopacknpm run build
- Build for productionnpm run start
- Start production servernpm run lint
- Run ESLint
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (
git commit -m 'Add some AmazingFeature'
) - Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request