Welcome to the official repository for the UCF SASE (Society of Asian Scientists and Engineers) website! This project is a modern web application built to serve the UCF SASE community.
- Framework: Next.js 15+ (App Router)
- Styling: Tailwind CSS
- Components: shadcn/ui
- Backend/Auth: Supabase
- Icons: Lucide React & React Icons
- Animations: AOS (Animate On Scroll)
Unlike traditional component libraries, shadcn/ui is not a dependency you install via npm. It's a collection of re-usable components that you copy and paste into your project.
- Ownership: You own the code. You can customize every component to fit the project's specific needs.
- Accessibility: Built on top of Radix UI primitives, ensuring high accessibility out of the box.
- Tailwind-first: Everything is styled using Tailwind CSS classes, making it easy to maintain a consistent design system.
Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS files, you apply pre-defined classes directly to your HTML/JSX.
- Speed: Build complex designs quickly without leaving your HTML.
- Consistency: Uses a standardized spacing and color scale.
- Performance: Automatically removes unused CSS in production builds.
-
Clone the repository:
git clone https://github.com/your-username/saseweb.git cd saseweb -
Install dependencies:
npm install
-
Set up Environment Variables: Create a
.env.localfile in the root directory and add your Supabase credentials:NEXT_PUBLIC_SUPABASE_URL=your_supabase_url NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
[!NOTE] You can find these in your Supabase Project Settings > API.
-
Run the development server:
npm run dev
Open http://localhost:3000 to see the site.
We welcome contributions! To keep the codebase clean, please follow these steps:
- Sync: Ensure your
mainbranch is up to date. - Branch: Create a new branch for your feature or fix (
git checkout -b feature/your-feature-name). - Commit: Write clear, descriptive commit messages.
- Push: Push your branch to GitHub.
- Open PR: Open a Pull Request against the
mainbranch. Provide a clear description of your changes and any relevant screenshots.
This project uses the Next.js App Router.
- Location: All routes are defined inside the
app/directory. - Convention: Each folder represents a route segment. A
page.tsxfile inside that folder makes it publicly accessible.app/about/page.tsx->/aboutapp/events/[id]/page.tsx->/events/123(Dynamic Route)
What is a component? A component is a self-contained, reusable piece of UI (like a Button, Navbar, or Card).
- Location: Put shared components in the
components/directory. - Usage:
- Use Server Components by default for better performance.
- Use Client Components (
'use client') only when you need interactivity (state, effects, event listeners).
- Adding Shadcn Components:
npx shadcn@latest add [component-name]
API routes allow you to build internal APIs within the Next.js app.
- Location: Created inside
app/api/. - Format: Use a
route.tsfile.// app/api/hello/route.ts export async function GET() { return Response.json({ message: 'Hello from the API' }); }
We use Supabase for Authentication and Data Storage.
- Auth: Handled via
@supabase/ssr(Server-Side Rendering) for secure session management. - Client: Use the
supabaseBrowserclient for client-side queries andsupabaseServerfor server-side logic (found inlib/).
├── app/ # App Router (Pages, API, Layouts)
├── components/ # Reusable UI Components
│ └── ui/ # Shadcn UI Components
├── lib/ # Utility functions & Supabase clients
├── public/ # Static assets (images, fonts)
└── styles/ # Global CSS
The site is hosted on Vercel. Every push to the main branch triggers an automatic deployment.
The site is hosted on Vercel. Every push to the main branch triggers an automatic deployment.