A comprehensive data portal for political and social research, built with Next.js and modern web technologies. This platform provides access to research reports, survey data, and interactive visualizations for political and social studies.
myPolitics Data is a portal that makes political and social research data accessible to researchers, journalists, and the general public. The platform currently features the "Młodzi Wyborcy 2025" (Young Voters 2025) report, which analyzes the views of young Poles on important social and political issues.
- Interactive Data Reports: Explore survey results with interactive charts and visualizations
- Data Downloads: Access raw data in multiple formats (CSV, XLSX, PDF)
- Responsive Design: Optimized for desktop and mobile devices
- Modern UI/UX: Built with Tailwind CSS and smooth animations
- Data Transparency: Comprehensive methodology and sample descriptions
Project is using Node.js and TypeScript in versions listed below:
| Technology | Version |
|---|---|
| Node.js | ^22.18 |
| TypeScript | ^5.x |
Main dependencies are Next.js and React in versions listed below.
| Vendor | Version |
|---|---|
| Next.js | ^14.x |
| React | ^18.x |
| Tailwind CSS | ^3.x |
| Chart.js | ^4.x |
| React-Chartjs-2 | ^5.x |
| Motion | ^12.x |
| Zod | ^4.x |
| Axios | ^1.x |
- Next.js - React framework for production with features like server-side rendering, static generation, and API routes
- React - JavaScript library for building user interfaces
- Tailwind CSS - Utility-first CSS framework for rapid UI development
- Motion - Animation library for smooth transitions and micro-interactions
- Chart.js & React-Chartjs-2 - Interactive data visualization and charting library
- Zod - TypeScript-first schema validation library for runtime type checking
- Axios - Promise-based HTTP client for making API requests
This is a frontend-only boilerplate that runs locally using Next.js development server.
This app uses Node.js and Yarn package manager. In order to set up project, follow these steps:
-
Install Node.js (v22.18.0 or higher):
- Download from nodejs.org
- Or use a version manager like nvm
-
Install Yarn globally:
npm install --global yarn
-
Clone project by running:
git clone <your-repository-url>
-
Navigate to the project directory:
cd nextjs-boilerplate -
Install dependencies using Yarn:
yarn install
To start the development server:
yarn devOpen http://localhost:3000 with your browser to see the result.
src
|- app # Next.js App Router directory
|- assets # Static assets
|- icons # Icon files (SVG, PNG, etc.)
|- images # Image files (JPG, PNG, etc.)
|- components # React components
|- [shared] # Shared/reusable components across domains
|- [ComponentName] # Individual component folders
|- [domain-name] # Domain-specific components (e.g., home, admin)
|- [ComponentName] # Individual component folders
yarn dev # Start development server
yarn build # Build for production (static export)
yarn start # Start production server
yarn lint # Run ESLint
yarn type-check # Run TypeScript type checkingThis project uses Next.js static export for optimal performance and deployment flexibility.
Important: This approach generates static HTML files at build time. Server-side features like SSR, API routes, and dynamic routes are not available. All data fetching must occur during build time or on the client side.
Currently, no test scripts are configured in this boilerplate. To add testing, you can:
- Install testing library:
vitest - Add test scripts to package.json
- Configure test environment
Example test setup:
# Install vitest and testing libraries
yarn add -D vitest @testing-library/react @testing-library/jest-dom jsdom
# Add test script to package.json
# "test": "vitest"
# "test:ui": "vitest --ui"- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- React Documentation - React.js reference
- Learn React - an interactive React.js tutorial.
- Tailwind CSS Documentation - Tailwind CSS documentation.
- Motion Documentation - Animation library for React
- Chart.js Documentation - Chart.js documentation and examples
- React-Chartjs-2 Documentation - React wrapper for Chart.js