Expected folder structure:

.
├── ...
├── components                 
│   ├── [ComponentName]         
│       └── [ComponentName].tsx       
│       └── [ComponentName].module.css                     
└── ...

We are just at the beginning of the project, but as the folders get deeper, our imports will get ugly.

For example, if we go a little further with the current config, an image like this is not even internal:

import Header from "../../../components/Header/Header"
import Title from "../../../components/Title/Title"

If we add path aliases, we will get a nicer image as below:

import Header from "components/Header/Header"
import Title from "components/Title/Title"

If you assign it to me I can fix it quickly.

This task contains 4 component as:
Event Section,
Event Grid,
Event Banner (bigger image),
Event Card

Expected folder structure:

.
├── ...
├── components                 
│   ├── [ComponentName]         
│       └── [ComponentName].tsx       
│       └── [ComponentName].module.css                     
└── ...

import Header from "components/Header/Header"
import Title from "components/Title/Title"

Under the same folder, horizontal architecture can also be preferred instead of vertical architecture.

import {Header, Title, ...} from 'components'

Originally posted by @harundogdu in #21 (comment)

Expected folder structure:

.
├── ...
├── components                 
│   ├── [ComponentName]         
│       └── [ComponentName].tsx       
│       └── [ComponentName].module.css                     
└── ...

Expected folder structure:

.
├── ...
├── components                 
│   ├── [ComponentName]         
│       └── [ComponentName].tsx       
│       └── [ComponentName].module.css                     
└── ...

add tailwind to the project
find color palette on figma and add it to the tailwind.config.js

add expected folder structure
add details
add conventional commits
add how to add pr

We need to add a reusable section component which can take backgroundColor and padding props

A small point was overlooked while getting the default style in the Title component, so the default styles are not coming.

Initially, if there is no prop named level, it is set to 1. There is no problem here. However, if styles are not found in props, props.level is searched in ModuleStyles as default style. An error occurs here when props.level is undefined.

If we write the code in the image as below, there is no problem.

const { level = 1, styles: propsStyles = ModuleStyles[`title-${level}`] } = props;

We pushed the yarn.lock file to the repo but also added to the .gitignore file.
As far as I know, there are some different ideas about this issue. I think adding a lock file is better because some changes in libraries could create some problems. Also, big projects are adding a lock file.

Examples:
https://github.com/facebook/react
https://github.com/vuejs/vue
https://github.com/facebook/create-react-app
https://github.com/mui/material-ui

I made the frontendship logo as svg in Figma. Shall I send this directly?

We developed a component called Title for the application. However, in most of the places we use Title, we also use subtitle. So we can develop a component called TitleSection and expect an optional subtitle.

For example, if we want to use subtitle right now, we use it like this:

<div className="flex flex-col items-center">
  <Title level={2}>Frontendship&apos;e neden katılmalıyım?</Title>
  <p className={style.subDescription}>Frontend alanında sıfırdan ileri seviyelere kadar sektöre katkı sağlayacak içerikler üretmek ve topluluğa destek sağlamak istiyoruz.</p>
</div>

I think it's better to use it this way:

<TitleSection
  title="Frontendship'e neden katılmalıyım?"
  subtitle="Frontend alanında sıfırdan ileri seviyelere kadar sektöre katkı sağlayacak içerikler üretmek ve topluluğa destek sağlamak istiyoruz."
></TitleSection>

Expected folder structure:

.
├── ...
├── components                 
│   ├── [ComponentName]         
│       └── [ComponentName].tsx       
│       └── [ComponentName].module.css                     
└── ...

Currently our TitleProps accept all numbers for the level field. It should only take between 1 and 6 for HTML Header element (h1-h6).

So right now there is a check like below:

export type TitleProps = {
    level?: number;
    styles?: StyleTypes;
    children: React.ReactNode;
}

Then something like the following will work:

<Title level={100}>My Title</Title> { /* rendered: <h100>My Title</h100> */ }

We must limit this field. I can easily do it with TypeScript

like this:

type HTMLTitleLevel = 1 | 2 | 3 | 4 | 5 | 6;

export type TitleProps = {
    level?: HTMLTitleLevel;
    styles?: StyleTypes;
    children: React.ReactNode;
}

Expected folder structure:

.
├── ...
├── components                 
│   ├── [ComponentName]         
│       └── [ComponentName].tsx       
│       └── [ComponentName].module.css                     
└── ...

We need a Icon component which will render icons by name and props

I think this component can improve with dynamic tag.

For example, is it good to use something like the following? If it's good I can PR

// any_page.tsx
import type { NextPage } from "next";
import Title from "../components/Title/Title"

const Page : NextPage = () => {
     return (
          <Title level={2}>content</Title>
     );
}

this rendered this:

<h2>content</h2>

and with style:

// any_page.tsx
import type { NextPage } from "next";
import Title from "../components/Title/Title"
import styles from "./any.module.css"

const Page : NextPage = () => {
     return (
          <Title level={2} styles={styles.myTitleStyles}>content</Title>
     );
}

And I can add default style for styling. And optionally I can merge it

like this:

// any_page.tsx
import type { NextPage } from "next";
import Title from "../components/Title/Title"
import styles from "./any.module.css"

const Page : NextPage = () => {
     return (
          <Title level={2} style={styles.myTitleStyles} mergeStyle={true}>content</Title>
     );
}

We need to add logo component for reuse it on all screens and components which needs logo like Header

Expected folder structure:

.
├── ...
├── components                 
│   ├── [ComponentName]         
│       └── [ComponentName].tsx       
│       └── [ComponentName].module.css                     
└── ...

Expected folder structure:

.
├── ...
├── components                 
│   ├── [ComponentName]         
│       └── [ComponentName].tsx       
│       └── [ComponentName].module.css                     
└── ...

In the design file we are using logo for single card but in the product we don't have any logo we need to add.

may we consider upgrading the project to the latest version next.js? migration process well-defined the original documentation of next.js. we can benefit from the new features:

• nested layouts - new routing
• server components
• fast builds?

also, we can experiment with the new bundler(turbopack) if possible.

we can add airbnb configurations for better project management. I created it as a new issue to implement it more properly.

Breakpoints must be declared at tailwind.config.js. Because everybody wrote their css random breakpoints. At figma large breakpoints declared as a 1440px but no one comply. All components should revise again depends on declared breakpoints. @OrhanOzkercin @eraygundogmus