Back
Oposiciones Bombero is an online platform designed to help firefighter candidates prepare for their competitive examinations.

Oposiciones Bomberos

Author: Cristian González /

Next.js Strapi Lucide Shadcn/UI TailwindCSS PostgreSQL Strapi

Platform for firefighter competitive examination preparation that allows users to create and practice custom exams, practice with previously failed questions, and participate in challenges with the community. Additionally, you can create your own questions and topics to later add them to a challenge or a flashcard deck.

Key Features

  • Custom exam creation
  • Practice with previously failed questions
  • Flashcard deck creation for study
  • Complete question management (create, edit, and delete)
  • Topic organization and administration
  • Community challenges and competitions
  • Access to official exams
  • Adaptive learning system
  • Personal progress tracking

Technologies Used

Frontend

  • React 18 with Next.js 14 (App Router)
  • TypeScript for typed development
  • Tailwind CSS for responsive styling
  • Shadcn UI and Radix UI for accessible components
  • Tanstack React Query for state management and requests
  • Zustand for global state
  • React Hook Form with Zod for form validation
  • Framer Motion for animations

Backend

  • Strapi CMS as headless CMS and content management system
  • REST API for frontend-backend communication

Authentication and Security

  • NextAuth.js for authentication
  • JWT and session management

Visualization and Experience

  • Recharts for data visualization
  • DayJS for date handling
  • Tailwind Merge and clsx for class composition
  • Embla Carousel for carousels

Payments

  • Stripe for payment processing

Technical Challenges and Solutions

  • Performance Optimization:

    • Use of React Server Components
    • Dynamic component loading
    • Lazy loading with react-intersection-observer
    • Efficient pagination with react-paginate

  • Smooth User Experience:

    • Implementation of NextTopLoader for page transition indicators
    • Optimized animations with Framer Motion
    • Visual feedback with react-hot-toast

  • API Integration:

    • Efficient REST API consumption through Axios and Tanstack Query
    • Cache management and data revalidation

  • Complex Data Handling:

    • Tanstack Table and Virtual for efficient data tables
    • Excel file import and processing with read-excel-file

  • Responsive Design:

    • Mobile-first approach with Tailwind CSS
    • Components adaptable to different devices

  • State Management:

    • Combination of React Query for server data
    • Zustand for local state
    • URL-based state with search parameters

  • Robust Validation:

    • Integration of React Hook Form with Zod for error-proof forms
    • Advanced error handling and validations
View demo