City Computer Science Society Website

Here you will find all tech stack of CSS website.

General setup

Tech Stack

For this project we are using NextJS, Tailwind and React

Engineering principles

We believe in the excellence of the engineering part of the product. Success in engineering is the result of good practices, good tools and good people. We are always looking for the best tools and practices to improve our work. Being a good people:

Be kind
Be open to feedback
Be transparent, chat, mail, call, whatever, but always be transparent
Be respectful
Be a team player. Means collaboration and communication,

Being a good engineer: Write good commits. A good commit is a commit that can be read by a human and understand what is the purpose of the commit, it should involve only one feature or bug fix in order to be easily reverted or cherry-picked or understood. Read this article and this one Write good RFCs or ADRs. Those are documents that explain the reason behind a decision. It is important to write them because they are a way to share knowledge, to make the decision process transparent and involve all people. More info here Choose right tools. Don't mean always pick the latest tool or language but also don't stuck on outdated frameworks or languages. Choose the right tool for the right job. Best effort between consistency with our stack, innovation and best for the job. Documentation firts. If you introduce new tools, new command, different way to do things, write it down. It is important to have a good documentation to help new people to onboard and to help the team to remember how to do things.

How to Contribute to the CSS Website Project

We appreciate your interest in contributing to the City Computer Science Society (CSS) website. Contributions can include bug fixes, new features, documentation updates, and more. Follow these steps to ensure your contributions align with our engineering principles and standards.

Prerequisites

1. Basic Knowledge
   Ensure familiarity with our tech stack:

   • Next.js: React-based framework for server-side rendering and static site generation.
   • Tailwind CSS: Utility-first CSS framework for styling.
   • React: For component-based UI development.

2. Tools and Environment
   Install the following tools on your local machine:

   • Node.js (LTS version recommended)
   • Git
   • Code editor (VS Code is preferred)

3. Clone the Repository
   Fork the repository on GitHub, then clone your fork locally:

   git clone https://github.com/YOUR_USERNAME/css-website.git
   cd css-website

4. Install Dependencies
   Run the following command to install project dependencies:

   npm install

5. Start Development Server
   Start the local development server:

   npm run dev

   Open http://localhost:3000 in your browser to view the website.

Contribution Workflow

1. Create a Branch
   Use a new branch for your changes. Follow this naming convention:

   • feature/your-feature-name for new features
   • fix/bug-description for bug fixes
   • docs/your-docs-update for documentation updates

     git checkout -b feature/add-new-section

2. Make Changes
   Implement your feature or fix. Ensure your code adheres to our principles:

   • Readable Commits: Write clear and concise commit messages.
   • Documentation: Update relevant documentation if introducing new tools or workflows.

3. Test Your Changes
   Verify your changes by running the app locally and ensuring everything works as expected.

4. Commit Your Work
   Write meaningful commit messages describing your changes:

   git add .
   git commit -m "Add new feature: user profile section"

5. Push Changes to GitHub
   Push your branch to your forked repository:

   git push origin feature/add-new-section

6. Create a Pull Request (PR)

   • Navigate to the main repository on GitHub.
   • Click New Pull Request.
   • Provide a detailed description of your changes and link any relevant issues.

Code Style and Practices

• Follow Project Structure: Stick to the existing project folder organization.
• Tailwind Conventions: Use Tailwind CSS classes for styling whenever possible.
• Reusable Components: Build reusable and modular React components.
• Adopt Our Principles:
  • Use meaningful and focused commits.
  • Write RFCs or ADRs for significant changes or tool introductions.

Review Process

1. Code Review
   Your PR will be reviewed by a team member. Be open to feedback and iterate on your changes if requested.

2. Testing
   Ensure all functionality works as intended. We may run additional tests during the review.

3. Merge
   Once approved, your PR will be merged into the main branch.

Communication and Collaboration

• Stay Transparent: Use GitHub comments for discussions related to your PR.
• Ask Questions: If you’re unsure about anything, reach out via GitHub Issues or team communication channels.
• Respect: Always be respectful and kind in interactions.

Thank you for contributing to the CSS website project! Together, we can build an amazing platform.