GKSS Website
GKSS Portal
By Lethabo MaepaSvelte
JavaScript
PLpgSQL
CSS
HTML
Links
GKSS Website
Welcome to the official GKSS Website repository. This is a modern, full-stack SvelteKit web application styled with Tailwind CSS and DaisyUI. Supabase handles backend services including authentication, database, and storage.
This project is maintained under the MIT License and will be made public to encourage collaboration. Contributions are welcome ā all code changes are reviewed before being merged.
š Tech Stack
- SvelteKit ā Frontend Framework
- Tailwind CSS ā Utility-first Styling
- DaisyUI ā Prebuilt CSS UI Components
- Supabase ā Backend-as-a-Service (PostgreSQL, Auth, Realtime, Storage)
- Docker ā Local containerized development
āļø Project Setup
Prerequisites
- Node.js (v16+)
- Docker Desktop
- Supabase CLI
- A code editor (e.g., VS Code)
- If using VS Code, install svelte extensions.
1. Clone the Repository
git clone https://github.com/NWU-VAAL-GKSS/nwu_vaal_gkss.git cd nwu_vaal_gkss
2. Install Dependencies
npm install
3. Start SvelteKit (Frontend)
npm run dev
App will be available at: http://localhost:5173
If you visit http://localhost:5173, the app will probably show a 404 or 500 page, This happens because the backend is not running, so to run the backend, read the instructions below
šļø Backend: Supabase (Local)
We use Supabase in Docker to provide a self-contained local development backend, so make sure docker is running on your machine.
1. Install Supabase CLI
npm install -g supabase
2. Start Local Supabase
npx supabase start
This starts:
- Supabase Auth
- PostgreSQL
- Storage
- Studio (web dashboard)
Default ports:
- Supabase API: http://localhost:54321
- Studio: http://localhost:54323
3. Setup .env.local
Create a .env.local in the project root then copy and paste:
PUBLIC_SUPABASE_URL='http://localhost:54321' PUBLIC_SUPABASE_ANON_KEY='your-local-anon-key'
- Anon keys are printed in the terminal when you run npx supabase start.
- Replace your-local-anon-key with the value of the anon key printed in your terminal
- Once all that is done, the app will be running smoothly.
4. Supabase Client
The Supabase client is already configured inside the project. No need to create a new client ā simply import it where needed.
š Project Structure
src/ āāā routes/ # Page routes ā āāā +page.svelte # Home page ā āāā +layout.svelte # Layout template for all pages under a pathname ā āāā +page.server.js # This page runs on the server, see svelteKit docs ā āāā team/+page.svelte # Team page āāā components/ # Reusable UI components ā āāā Header.svelte ā āāā Footer.svelte ā āāā Card.svelte āāā api/ # All api routes | āāā cities/ # An example cities api route | āāā server.js # The required file for the api logic, see sveltekit api docs āāā lib/ # Supabase clients and utilities āāā static/ # Public assets āāā app.html # Entry HTML template āāā app.css # Global CSS (Tailwind config)
āļø How to Contribute
Content Changes
Edit the appropriate .svelte file inside src/routes/.
- Home: src/routes/+page.svelte
- About: src/routes/about/+page.svelte
Add a New Page
- Create a folder in src/routes/ (e.g. events)
- Add a +page.svelte file with your content.
š¦ Common Commands
Command Description | npm run dev | Start frontend dev server
| npm run build | Build frontend for production
| npm run preview | Preview production build
| npx supabase start | Start Supabase in Docker locally
š§ Contributor Notes
- Read how to contribute
- All changes must go through Pull Requests and be reviewed before merging.
- Feature branches should be prefixed with your initials or team (e.g., ts-feature-header)
- Use semantic commits if possible.
- Never commit .env.local or secret keys.
š License
This project is open-sourced under the MIT License.
See LICENSE for full terms.
See LICENSE for full terms.
š Docs & Resources
š¤ Maintainers
This repository is actively maintained. Code reviews are strict to ensure project health, scalability, and security. If you'd like to become a project lead, speak with a current maintainer.
Loading comments...