Skip to content

Home

Jump to bottom
korih edited this page Sep 30, 2024 · 7 revisions

Tech Stack Overview

This page provides an overview of the main technologies used in our website project, which is built with modern JavaScript libraries and frameworks for performance and scalability.

Main Technologies

1. JavaScript

  • Description: JavaScript is the primary programming language used to build the website. It is used both for the front-end and for handling user interactions, animations, and logic. We use ECMAScript 6+ syntax (ES6+) to take advantage of modern JavaScript features such as arrow functions, modules, and async/await.

  • Resources to Learn More:

2. React

  • Description: React is our front-end library for building user interfaces. It allows us to create reusable components and manage the state efficiently. The website is structured using React components, and data is passed through props and states.

  • Key Concepts:

    • Components: Reusable UI building blocks that can be functional or class-based.
    • State & Props: Manage dynamic data and pass it between components.
    • Hooks: We use React hooks like useState and useEffect for state management and side effects.
    • Routing: The website uses React Router for navigation between different pages.

  • Folder Structure:

    • /src/components – Contains reusable React components.
    • /src/pages – Contains the different pages of the website.

  • Resources to Learn More:

3. TailwindCSS

  • Description: TailwindCSS is our utility-first CSS framework that allows us to style components with ease by using pre-defined utility classes. This helps to keep CSS minimal, easy to manage, and scalable, while avoiding deeply nested CSS styles.

  • Key Concepts:

    • Utility Classes: TailwindCSS uses a set of classes for padding, margin, text size, colors, etc.
    • Customization: Custom styles are handled through Tailwind’s configuration file (tailwind.config.js), where we can define custom themes, colors, and breakpoints.
    • Responsive Design: Tailwind makes it simple to implement responsive design by offering mobile-first CSS classes (e.g., sm:, md:, lg:).

  • Example:

    <div class="bg-blue-500 text-white p-4">
  This is a TailwindCSS-styled div.
</div>

  • Resources to Learn More:

Clone this wiki locally