Skip to content

mtcbpdcdubai/mtcbpdcdubai.github.io

BranchesTags

Repository files navigation

⚠️ NOTE: Outdated

This repository is the predecessor to the following repository:
https://github.com/mtcbpdcdubai/MTCwebsite

Do not make changes in this repo anymore.

Microsoft Tech Club BPDC - official website

👉 https://mtcbpdcdubai.github.io/ 👈

This GitHub repository contains the code for the official website of Microsoft Tech Club.

⚠️ Please read the "🛠️ Useful info for developers" section before contributing to this project.



🌐 Getting the website up and running

  1. Go to Node.js®'s download page, and download the prebuilt Node.js® installer for your operating system. Complete its installation process.

  2. Download the code. You may either use GitHub Desktop, download the code as a ZIP, or open a terminal window and type the following command:

    git clone https://github.com/mtcbpdcdubai/mtcbpdcdubai.github.io.git

  3. Open a terminal window inside the folder, and run the following command to download all the required packages:

    npm i

So far, the above steps will get the files ready on your computer. After this, you can either host locally for development purposes, or deploy to GitHub pages.

To host locally, for development purposes:

  1. Open a terminal window inside the folder, and run the following command:

    npm run dev

    This will host a webserver on your local machine, usually at http://localhost:5173/.

To deploy to GitHub pages:

  1. Open a terminal window inside the folder, and run the following command:

    npm run deploy

    This will build the website to the dist/ folder, and publish its contents to GitHub Pages, which will end up in the following URL: https://mtcbpdcdubai.github.io/

    It will also automatically deploy to CloudFlare Pages, which will end up at: https://mtcbpdc.org/

Source: How to deploy Vite React App to GitHub Pages | by Prateek Singh | Medium



🛠️ Useful info for developers

This section contains information and tips that will be useful for developers, and mainly aims to serve as future reference material.

1. Tech stack

This section briefs on the entire tech stack involved in this project. If you're a newcomer to this project, read this section to familiarize yourself with the tools and tech!

Tech What? Why?
github32 GitHub Platform to store, manage and maintain history of code. To keep code accessible and synced with everyone under MTC.
vsc32 Visual Studio Code A fancy code editor with useful features such as IntelliSense (autocomplete). There's a lot of useful extensions which help speed up the dev process.
node32 Node.js® A JavaScript runtime environment.
Just like how your browser provides an "environment" for your JavaScript code to "run", Node.js® is a standalone software whose only purpose is to run JavaScript code on your machine.		 Here, Node.js® is used mainly for building React using Vite, that's it.
react32 React JavaScript library for building user interfaces. Creates reusable UI "components" and makes dynamic content easier to code.
vite32 Vite A build tool. It bundles all of your JavaScript, CSS, assets, etc. into few but highly-optimized files, useful for performance. Vite is more modern than using webpack/Babel that comes in-built with React.
cloudflare32 Cloudflare Pages Static page hosting. We use Cloudflare since we already have the domain name mtcbpdc.org under Cloudflare. Equivalent to GitHub Pages.

2. Folder structure

This section explains the folder structure and organization of this repo.

/content/ folder

The content folder intends to have anything that is meant to be modified at a later time, such as list of events, list of council members, testimonials, etc.

It is requested that relevant assets, such as photos and videos of people and events etc., shall be stored within this content folder only.

Since JavaScript is used and not TypeScript, we use JSDoc comments in this content folder to add type hinting, which helps reduce mistakes.

A lot of the dynamic content here will eventually be replaced with data fetched from the MTC ERP. (inshallah)

/src/ folder

The src folder contains the main code of the website, and is divided into 3 main sub-folders:

  1. pages: Contains code for whole pages, such as About, Events, etc.

  2. components: Contains code for individual components such as navbar, footer, loading screen, etc. which are meant to be used more than once in multiple pages.

  3. assets: Contains generic images and media. For content-specific media, please use the content folder as explained above.

3. Custom import alias

Consider an import statement that imports a file in a different directory.

import logo from '../../assets/MTClogo.png';

Instead of typing the entire ../../assets/… relative path, won't it be easier to just start the path with something simpler, like assets/…? That's where import aliases come to play. Here's the instructions:

  1. Edit vite.config.js with this template in mind:

    // ...
  resolve: {
    alias: {
      assets: "/src/assets",
      aliasNameGoesHere1: "/path/to/folder",
      aliasNameGoesHere2: "/path/to/another/folder",
      aliasNameGoesHere3: "/path/to/yet/another/folder",
      // ...
    }
  }
// ...

    where the key is the name of the alias, and the value is a string that points to the full path.

  2. Edit jsconfig.json with this template in mind:

        "paths": {
      "assets/*": ["./src/assets/*"],
      "aliasNameGoesHere1/*": ["./path/to/folder/*"],
      "aliasNameGoesHere2/*": ["./path/to/another/folder/*"],
      "aliasNameGoesHere3/*": ["./path/to/yet/another/folder/*"],
    }

All done! Now you can write something like this:

import logo from 'assets/MTClogo.png';

4. CSS nesting

CSS has a cool feature called "CSS nesting" where you can declare CSS selectors within another selector.

For example, consider the following HTML document:

<p>This has font size 12px.</p>
<div>
    <p>
        <b>This has font size 14px.</b>
        <i>This has font size 16px.</i>
        <u>This has font size 18px.</u>
    </p>
    <span>This has font size 20px.</span>
</div>

The traditional way to style the above elements is as follows:

p {font-size: 12px;}
div p b {font-size: 14px;}
div p i {font-size: 16px;}
div p u {font-size: 18px;}
div span {font-size: 20px;}

You might have noticed how the div selector has to be repeated each time, for every element inside the div that you want to style. Similarly, even the p selector is repeated.

Using nesting logic, you can simply rewrite the CSS like this:

p {font-size: 12px;}
div {
    p {
        b {font-size: 14px;} /* equivalent to:   div p b {...}   */
        i {font-size: 16px;} /* equivalent to:   div p i {...}   */
        u {font-size: 18px;} /* equivalent to:   div p u {...}   */
    }
    span {font-size: 20px;}  /* equivalent to:   div span {...}   */
}

In other words, the CSS now follows a hierarchial structure, which resembles the hierarchial structure of the HTML code as well!

You can read more about this in the MDN guide.

Regarding compatibility, CSS nesting is a very recent feature (released in roughly December of 2024). But Vite's build process converts all the nested declarations to regular selectors, hence backward compatibility is ensured.

5. Dependencies

This section lists out the Node.js® packages used in this project. Packages used by other packages indirectly aren't included here, for simplicity's sake. The following command displays the list:

npm list --depth=0
Package name Purpose
react React itself
@types/react Type hinting for React
react-dom React for web (as opposed to react-native, etc.)
@types/react-dom Type hinting for React for web
react-icons React-compatible icon pack
react-router-dom Router - Navigation between pages
eslint Linting for JS
@eslint/js ? lol idk
eslint-plugin-react ESLint plugin for React
eslint-plugin-react-hooks ESLint plugin for React Hooks
eslint-plugin-react-refresh ESLint plugin for Hot Reloading
vite Build tool for publishing highly minified, optimized code
@vitejs/plugin-react Vite for React
react-typed Typing animation
gh-pages Publish to GitHub Pages

6. Load sequence

This section shows the sequence/chain in which modules are imported.

Note that Node.js® imports modules only the first time, and on subsequent imports (even in other files), it just reuses the initial import. For this reason, this list only shows the first import.

Benefits of maintaining such a list:

  1. You get an intuitive understanding on how the website gradually builds up
  2. You can diagnose any weird errors by narrowing it down to the exact moment in the import sequence
  3. You can use this list to figure out any modules which are never used.



💻 Contributors and Socials

instagram16 linkedin16 github16 Sreenikethan I - DevOps Manager @ MTC BPDC, 2025-26

instagram16 linkedin16 github16 Stellin J - Technical Head @ MTC BPDC, 2025-26

instagram16 linkedin16 github16 Mrudula R - Co-Chair @ MTC BPDC, 2024-25

instagram16 linkedin16 github16 globe16 Microsoft Tech Club @ BITS Pilani, Dubai

About

Microsoft Tech Club BPDC - official website

mtcbpdcdubai.github.io/

Resources

Readme
Activity
Custom properties

Stars

1 star

Watchers

1 watching

Forks

1 fork
Report repository

Contributors

Languages