README.md

Official website repository for the GirlScript Summer of Code 2024 (GSSoC'24)

GirlScript Summer Of Code is a three-month-long Open-Source Program conducted every summer by the Girlscript Foundation.
With constant efforts, participants contribute to numerous projects under the extreme guidance of skilled mentors over these months. With such exposure, students begin to contribute to real-world projects from the comfort of their homes. GirlScript Summer Of Code has witnessed active participation over the years, and the 2024 edition aims to carry the legacy with a promising impact.

---

• This is a Next.js project bootstrapped with create-next-app.
• Subsequently this was designed from scratch purely using TailwindCSS framework and does not use any predefined UI library or design system.
• The brand palette and prototype was designed in Figma and can be found HERE

Preview

gssoc-website.webm

Setting Up the Development Environment

First, install the node modules & dependencies:

npm i
# or
yarn

Getting Started

Next, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Project Structure

.
├── .github
│   └── workflows
│       ├── gssoc-deploy.yml
│       └── contributors.yml
├── public/*
├── components/*
├── pages/*
├── styles/*
├── package.json
├── next.config.js
├── tailwind.config.js
├── postcss.config.js
├── README.md
├── LICENCE
└── contributors.md

• You can start editing the homepage by modifying pages/index.js. The page auto-updates as you edit the file.
• All the other pages under the pages directory are a part of the sitemap and represent the different webpages in the website.
• API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.
• The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.
• The various components used in the pages have been defined under components directory
• public directory contains all the assets used in the project (including images, certificates, graphics and logos) The styles/globals.css file consists of all the custom css used apart from inline Tailwind styles.

Theming and Dual Modes

The website was designed to support both light and dark themes. It reads the current theme preference of the client browser and accordingly applies the state throughout the website.

Light Mode

Toggle me to Preview!

Dark Mode

Toggle me to Preview!

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Deploy on GitHub pages

The website in our case was deployed on GitHub pages using a custom workflow that can be found at .github\workflows\gssoc-deploy.yml

At the time of writing this project, GitHub did not provide GitHub pages configuration for Next.js by default and thus, had to be deployed using the next-pages workflow from the Github Actions marketplace

Participating Projects List

The list of participating projects for the GirlScript Summer of Code 2022 as well as in the previous editions is made available through the JSON Endpoint available HERE which is actually the raw version of the selected project list available in THIS Google Sheet.

Leaderboard

The leaderboard's backend is hosted in Heroku and is developed in a separate repository which can be found HERE.
This uses the GitHub OctoKit SDK documented HERE to fetch merged PR data for each contributor in the program and calculates their global rank as per labels assigned by the project owners/maintainers as per the following scoring system:

Note - The dynamic leaderboard was disconnected at the last date of the program at midnight (ie, 6/2/2022, 23:59:52 PM) and replaced using the static json of contributors' final ranking data. It can found at pages\api\leaderboard.json

Onchain Certificate Verification

The website includes a feature of onchain certificate verification to provide convinient download of certificates for eligible participants in each role: namely Top 100 Contributors, Top Mentors, Top Project Admins, Top Campus Ambassadors and the organising team. The data of eligible open-sourecerers can be checked under pages\JSON directory

The smart contract and ABI used to achieve this can be found at pages\JSON\Certificates.sol and pages\JSON\ABI.json respectively.

Learn More on Next.js

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.