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
gssoc-website.webm
First, install the node modules & dependencies:
npm i
# or
yarnNext, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
.
├── .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/apidirectory 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
componentsdirectory -
publicdirectory contains all the assets used in the project (including images, certificates, graphics and logos) Thestyles/globals.cssfile consists of all the custom css used apart from inline Tailwind styles.
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.
Toggle me to Preview!
Toggle me to Preview!
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
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.
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
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.
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
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.
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.