https://github.com/oriolpalacios/fuc-page
The FUC Website Project is an information portal for the Federación Universitaria del Cusco (FUC), the university student federation.
https://github.com/oriolpalacios/fuc-page
astro axios netlify nocodb react tailwind
Last synced: 10 months ago
JSON representation
The FUC Website Project is an information portal for the Federación Universitaria del Cusco (FUC), the university student federation.
- Host: GitHub
- URL: https://github.com/oriolpalacios/fuc-page
- Owner: OriolPalacios
- Created: 2025-01-17T15:20:33.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-03-23T16:20:45.000Z (10 months ago)
- Last Synced: 2025-03-23T17:26:50.499Z (10 months ago)
- Topics: astro, axios, netlify, nocodb, react, tailwind
- Language: Astro
- Homepage: https://federacion-universitaria-cusco.netlify.app/
- Size: 8.89 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FUC Website Project
## Overview
The FUC Website Project is an information portal for the Federación Universitaria del Cusco (FUC), the university student federation. The website provides:
* **News and Events**: Up-to-date information and announcements.
* **Documentation and Resources**: Access to various guides and materials.
* **Federation Members and Secretariats**: Detailed profiles and contact information.
* **Consultation/Complaint Submission**: A system for users to submit queries and feedback.
* **Historical Information**: An archive of the federation’s milestones and achievements.
## Features
- **Enhanced Performance**: Configured for optimal performance with Netlify CDN, using advanced caching headers (e.g., `Netlify-CDN-Cache-Control` and `Netlify-Vary`) to ensure fast content delivery.
- **Server-Side Rendering (SSR)**: Pages are rendered on the server for improved SEO, faster initial load times, and better performance on low-powered devices.
- **Incremental Static Regeneration (ISR)**: Combines the benefits of static generation with the ability to update content dynamically, ensuring both performance and freshness.
- **Astro View Transitions**: Smooth transitions between pages enhance user experience (`just for stricly static pages`).
- **Responsive Design**: Built with Tailwind CSS to ensure the site looks great on all devices.
- **Interactive UI Components**: Powered by React for client-side interactions where needed.
## Technology Stack
This project is built with:
- **Astro** - The core framework providing server-side rendering, routing, and MPA architecture
- **React** - For interactive UI components with client-side hydration
- **Tailwind CSS** - For utility-first styling
- **NocoDB** - As a backend database for storing and managing content
- **Additional libraries:**
- Swiper - For carousel components
- Marked - For Markdown parsing
- anime.js - For animations
## Folder Structure
```text
/
├── public/ # Static assets
├── src/
│ ├── assets/ # Images and other assets that are processed
│ ├── components/ # Reusable UI components (Astro and React)
│ │ ├── consultsComponents/ # Components for consultation page
│ │ ├── eventsComponents/ # Components for events section
│ │ ├── generalUtilities/ # Common UI utilities
│ │ ├── landingComponents/ # Components for landing page
│ │ ├── membersComponents/ # Components for members section
│ │ ├── newsComponents/ # Components for news section
│ │ ├── skeletons/ # Loading skeleton components
│ │ └── swiperUtilities/ # Components for Swiper carousel
│ ├── layouts/ # Page layouts
│ ├── pages/ # Astro pages (file-based routing)
│ ├── services/ # API services to interact with NocoDB
│ ├── styles/ # Global styles and CSS overrides
│ ├── customTypes/ # TypeScript type definitions
│ └── utils/ # Utility functions
├── .env.example # Environment variables
├── astro.config.mjs # Astro configuration
└── tailwind.config.mjs # Tailwind CSS configuration
```
## How to Contribute
#### 1. Clone the repository
```bash
git clone https://github.com/your-username/FUC-page.git
cd FUC-page
```
#### 2. Install Dependencies
```bash
npm install
```
#### 3. Set up environment variables Create a .env file with the required environment variables:
```bash
BASE_URL_TABLES=your_nocodb_url
NOCODB_KEY_API=your_nocodb_api_key
NOTICIAS_V1_DEFAULT_VIEW=your_news_table_view
EVENTOS_V1_DEFAULT_VIEW=your_events_table_view
MIEMBROS_V1_DEFAULT_VIEW=your_members_table_view
GALERIA_V1_DEFAULT_VIEW=your_gallery_table_view
DOCUMENTOS_V1_DEFAULT_VIEW=your_documents_table_view
```
#### 4. Start the development server
```bash
npm run dev
```
#### 5. Make your changes
* Follow the existing code style and naming conventions
* Add proper types for TypeScript components
* Use Astro components for mostly static content
* Use React components with the client: directive for interactive elements
#### 6. Test your changes
```bash
npm run build
npm run preview
```
#### 7. Submit a pull request
* Create a new branch for your feature or bugfix
* Make your changes and commit them with clear, descriptive messages
* Push your branch and create a pull request against the main branch
## Deployment
This site is configured to deploy to Netlify using the Astro Netlify adapter