Skip to content

Introduction

Jeffrey Yao edited this page May 16, 2022 · 4 revisions

CSESoc Learn is an interactive platform delivering educational content including articles, tutorials, videos and more.

Vision ⚡️

CSESoc is where students gather to socialise and extend their technical knowledge outside the classroom. Educational content has previously been delivered via workshops. However, this limits people who're uncomfortable with holding workshops, or want to contribute in other formats, from contributing.

CSESoc Learn empowers students from various backgrounds to contribute to the wider CSE community by:

  • opening up new formats of contributing such as articles, tutorials and videos
  • providing an ergonomic content creation experience, allowing creators to focus on what they do best

CSESoc Learn also focuses strongly on delightful UI/UX, driving engagement and raising the bar for learning experiences at CSESoc.

Features 🎨

Support for a wide variety of content types via Contentlayer

Contentlayer transforms content on CSESoc Learn into JSON data. By allowing for the definition of content schema with automatically-generated type definitions, CSESoc Learn is able to support a wide variety of content types with differing layouts.

Beautiful UI/UX inspired by Medium and technical sites

Delightful UI/UX starts with an excellent design system. CSESoc Learn has its own carefully thought-out design system with tokens and component primitives, allowing for a cohesive experience throughout the platform and accelerating development for technical contributors.

Spotlight-style search via Stork

Many blogs and documentation sites have Algolia Search installed to improve UX and enable discovery. CSESoc Learn implements this via Stork, a local search library powered by WebAssembly. Search on CSESoc Learn is available globally via Command + K.

Ergonomic content creation workflow

CSESoc Learn uses MDX for content creation. A simple syntax which extends to GitHub Flavored Markdown allows creators to focus on what they do best. Next.js + Contentlayer enables creators to preview their changes live on the site as they write, ensuring that what they see is what they get.

The team 🤲

The development of CSESoc Learn is led by CSESoc Education. ❤️

CSESoc Learn

Overview

Process

  • Values
  • Introduction to Git
  • Git workflow
  • Working with Contentlayer
  • Styling with Stitches

Design System

  • Introduction
  • Cheatsheet
  • Components
    • Box
    • Button
    • Card
    • Flex
    • Icon Button
    • Logo
    • Tag
    • Text
    • Version Badge
Clone this wiki locally