Skip to content

osc-vitap/OSC-Web

Repository files navigation

OSC Web

Index

  1. Project structure
  2. Development
  3. Contributing

Project structure

  1. Every code can be found in the src folder.

  2. The src/routes folder contains all the routes

  3. src/components folder contains all the components

    • Components are resuable pieces of svelte code that can be used in multiple places just by importing them.
    • You can think of components as a function in any other programming language.
  4. src/data contains the data of the team and the events in the form of JSON files

    • This data is used to dynamically populate the team and event pages
  5. Svelte file naming terminologies

    • +page.svelte: It is a the landing page of the specific route. Lets say you visit https://osc-web.pages.dev/team, going to that page will load src/routes/team/+page.svelte file. You can think of it as the index.html file of the route.

    • +layout.svelte: Without going into much details, you can think of the layout file as a blanket the page.svelte and all the child routes. For more information, you can visit svelte docs

    • +error.svelte: This file is rendered when there an error occurs while rendering the page. For example, if the data is not fetched properly, and throws an error, this file will be rendered.


Development

For development, make sure you have the following installed

  1. Latest LTS release of Node JS. download link
  2. Git. download link

Project setup

Click to expand the section.

Using terminal

Once you have the above installed, you can run the following commands to start the development server.

  1. Clone the repository
git clone https://github.com/osc-vitap/OSC-Web.git
  1. Change the directory to the cloned repository
cd OSC-Web
  1. Install the dependencies
npm install
  1. Start the development server
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
Using GUI
  1. Click the green colored Code button on the right side of the repo
  2. Download the ZIP file and extract the file
  3. Open the extracted folder in your preferred code editor
  4. Open the terminal in the code editor and follow the steps from step 3 from the above section.

Technologies

Using tailwind CSS
  1. Tailwind CSS is a utility-first CSS framework, meaning, css classess are used to style the elements. For example, to add a padding of 4 to an element, you can use the class p-4.
  2. Tailwind is mobile first. meaning, you go from styling mobile to desktop, instead of the traditional desktop to mobile approach.
  3. This project is already set up with tailwind CSS. You can directly use the classes in the svelte files.
  4. To learn more about tailwind CSS, you can visit the official documentation

Contributing

  1. Clone the repository
  2. Create a new branch from the dev branch
    • Branch naming convention examples: some-feature or team-optimization (kebab case)
    • If you are working on an issue, you should suffix the issue number to the branch name. For example, if you are working on issue #1, the branch name should be something-#1 or bug-fix-#1
  3. Make the changes
  4. Push the changes to the new branch
  5. Create a pull request to the dev branch
  6. Add the tech lead as the reviewer


If you have any questions, feel free to contact the tech lead over discord or whatsapp

About

The official repo for the OSC Website.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published