General

This is a repo for an ongoing development of a landing page written in react.

Releases

The latest releases can be found under releases.

Run locally

1. clone the repo
2. hit npm i
3. set up GraphCMS and gatsby-config.js. Documentation
4. start local develoment environment by gatsby develop

List of components

[NOTE]: The documentation of each components, with examples are under construction.
Until then, check the individual code for each component to get more insight.

task	status	props
<HeaderH1>	✅	text:string, className:string
<HeaderH2>	✅	text:string, className:string
<Button>	✅	bgColor: string, className: string, onClick: func, children: React.node, isAnimation: boolean
<Paragraph>	✅	text: String, className: String
<TestimonialItem>	✅	index: Number, src: String, alt: String, className: String
<Map />	✅	TODO: graphql
<Team>	✅	TODO: graphql
<Phone />	✅	children: React.node, className: String, animationEnd: String, secondaryImage: String, secondaryImageZoom: Number
<Macbook />	✅	children: React.node, barTitle: String, frameUrl: String

Code of conduct

PRs are welcome. To contribute to this repo, first fork it, create a local branch with some meaningful name, and start working. When you are done, submit a PR and I'll review it.

General rules

We are not using class based components, only stateless function components. You must follow the rules set by the provided ESlint configuration. husky package is applied, so you will not be able to commit to this repository if the requirements are not met.

Example:

/**
* @author zilahir
* @function MenuItem
* */

const MenuItem = () => (
	<div>MenuItem</div>
)

export default MenuItem

NOTE: Please comment your components under the import section, so it's purpose will be clearly stated.

1. We are using flex-grid system in this project. More particularly this one.

2. We are using css modules, but with scss syntax. Keep the scss as organizad as possible, try to avoid endless nesting.

3. You are not allowed to use #id selectors.

4. Write as generic components as possible to help reusability.

5. Using prop-types are mandatory. Read the docs of prop-types here if you are not familiar with it.

6. Try to avoid installing 3rd party react components, unless it's a must. Try to implement everything by your own.

Hooks

Since hooks has been introduced to react, let's aim to use them.

For example:

import React, { useState } from 'react'

const [isVisible, setIsVisible] = useState(false)

and when you need to set it's value

setIsVisible(true)

Read more about react-hooks in it's documentation

For hooks follow the naming conventions, as in the example above. If a variable needs to be set to a specific value, use the set in the naming, so it will be consequent, and readable.

Project structure

Each component have to be in components folder.

1. in common/<component-name>, if it's a common component.

2. in pages/<page-name>, if it's a page.

Folder structure

The structure of the folders tried to be kept as consistent and self explanary explanatory as possible. Everything goes where it belongs.

├── App.js
├── App.test.js
├── actions
│ ├── actionTypes.js
│ └── test.js
├── assets
│ └── img
├── components
│ ├── Footer
│ │ ├── Footer.module.scss
│ │ └── index.js
│ └── common
│ ├── Button
│ │ ├── Button.module.scss
│ │ └── index.js
├── reducers
│ └── test.js
├── pages
│ ├── Home
│ │ ├── Home.module.scss
│ │ └── index.js
└── styles
├── mixins
│ ├── Button.scss
└── variables.scss

The filenames and foldernames should be in the following format:

<SomeComponent> / index.js / SomeComponent.module.scss

Naming conventions

We are using camelCase naming conventons for both variable names, and classNames, for example:

TopHeader, isVisible, etc.

The scss modules are always important for a specific component as styles.

import styles from ./TopHeader.module.scss

and then referencing them as:

<div className={styles.topHeaderWrapper}>
    ...
</div>

styled-component are part if this repository also, use it if a component requires styles related props, such as color, width, etc.

Example:

import styled from 'styled-components`

const DemoStyledComponent = styled.span`
    display: flex;
    &:before {
        content: '';
        width: ${props =>  props.width}px;
        ...
        ...
        ...
    }
`

And then referencing them as the following:

<DemoStyledComponent width={200} />

Using the !important rule in CSS is strictly forbidden. If you come accross a problem which can be solved by using !important you need to redefine your CSS, or your component or both.

Follow the rules of HTML tag nesting, to avoid validateDOMnesting(...) warnings.

Fonts

We are using two different font familier here. Both provided by Google fonts.

1. KoHo
2. Roboto

The headings (h1, h2, etc.) are KoHo, and body texts (p, span, etc.) are Roboto.

Contents

Even for placeholders, it's forbidden to hardcode any texts into the code. Let's mimic some API, to help in the future connect some graphQl. Future plan is once the initial release is done, port this to gatsbyJs

Example:

export const headerMenu = {
	menuItems: [
		{ key: 1, label: 'Home', slug: 'home' },
		{ key: 2, label: 'About us', slug: 'aboutus' },
	],
	getHeaderMenu: () => headerMenu.menuItems,
}

Then reference it as the following:

import { headerMenu } from <path-to-file>

const menuItem = headerMenu.getHeaderMenu();

Dependencies

Here's a list of important dependencies we are using in this project:

1. gatsbyJS
2. framer-motion
3. react-waypoint
4. redux
5. redux-thunk (not in use currently)
6. styled-components
7. react-parallax
8. react-responsive
9. react-map-gl

Please read the documentation of these packages if you are not familiar with them.

MapBox

On the website, there is a map incuded. To be able to use it, you need to provide your own TOKEN for it. To learn how to use the tokens, visit the related part of the documentation.

Since we are using gatsbyJS, you must the related way of declaring env variables.

Gatsby prefixes the env variables with GATSBY_, so your token will be something like:

GATSBY_MAPBOX_ACCESS_TOKEN=<YOURTOKEN>

Deployments

This project is automatically deployed from branch master, using netlify. You can follow the development process on this url.

Contact

In case of questions, drop me a message.

Misc

• This project is licenced under MIT licence.
• The photos are in this repo are from pexels.com

Design

If you have design suggestioin, or any type of UI / UX related interaction idea's, open an issue and let's discuss it.